# Why animation matters — shared 15-second brief

Build a finished 4:5 HTML/CSS/JavaScript animation (1080 × 1350 design canvas) from the attached MP3. Use the MP3 unchanged as the sole voiceover. The narration is Samson's ElevenLabs Samson PRO clone and runs 15.281625 seconds. Make the visual state follow `audio.currentTime`, so pause, seek, replay and export are deterministic. Provide a single self-contained `index.html` plus the unchanged MP3. No external dependencies or remote assets.

Exact narration:
“Why animate? Motion shows change, makes ideas easier to understand, and holds attention. A review of twenty-six studies found instructional animation outperformed still pictures. Use it in YouTube videos, product ads, presentations, and websites.”

This should be far more ambitious than a clean title-card animation. Make a visually dense but readable editorial motion piece with purposeful visual metaphors, layered parallax, dynamic camera pushes and rotations, kinetic type, masks/reveals, physically plausible easing, particles or trails, and transitions that carry a visual object into the next scene. Every key claim should be *shown*, not merely typeset. Keep visual hierarchy clear at phone size. Design for an actual 4:5 social video, not a web dashboard. Use the existing Samson / Opus visual family: near-black, warm ivory, restrained gold, with teal/coral accents. You may interpret those colors creatively.

Suggested beats (adjust cut times to the actual speech):
- 0–2 s: a frozen, confusing visual breaks into motion on “Why animate?”
- 2–5 s: motion traces *change* and an idea clicks into understanding; include a brief attention/engagement metaphor.
- 5–9 s: turn “twenty-six studies” into an elegant, accurate evidence visualization. On-screen wording: “26 STUDIES” and “instructional animation > still pictures” or a careful equivalent. Do not invent a percentage improvement.
- 9–15.28 s: cascade through YouTube video, product ad, presentation and website as four distinct miniature environments; converge into a memorable final frame.

Accessibility/interaction: Play with sound, pause, replay, seek, visible progress, keyboard-usable controls, reduced-motion accommodation. The result should fill the available preview area and retain 4:5. Include a brief plain-language note identifying which parts are editorial visual metaphors and which numerical claim comes from the study.

Source for the study claim: Höffler & Leutner, “Instructional Animation versus Static Pictures: A Meta-Analysis,” Learning and Instruction 17 (2007), 722–738, ERIC record https://eric.ed.gov/?id=EJ780451. The meta-analysis covers 26 primary studies and reports a medium-sized overall learning advantage for instructional animation over static pictures (d = 0.37). This is evidence in instructional contexts, not a claim that every animation increases engagement or conversions.