Create a browser-made motion video for [your brand or product].

OUTCOME
[Describe the one thing the viewer should understand or feel.]

AUDIENCE
[Who is this for?]

DURATION + AUDIO
[Target duration and soundtrack path, if there is one.]

STORY
[List 5–8 moments. Keep it to one connected story, not a module slideshow.]

BRAND + VISUAL INPUTS
- Complete the attached brand-context-template.md and use it as the brand source of truth.
- Read the attached browser-motion-technique-prompt-library.md as a menu of what is technically possible with HTML, CSS and JavaScript. Select only the techniques that help this story.
- Inspect any supplied product screenshots or existing pages. Preserve real terminology and recognisable product structures, but simplify them for motion.

BUILD
- Build the video as HTML, CSS and JavaScript. Do not add an animation framework unless it is genuinely necessary.
- Make the page the prototype and the frame source.
- Put every visual state on one deterministic timeline exposed as window.render_at_time(seconds).
- Also expose window.motion_duration and window.motion_ready.
- Include play, pause, restart, scrubbing and audio synchronisation.
- Use one recurring object, person or visual motif to connect the scenes.
- Prefer transitions where an outgoing shape becomes part of the next scene.
- Use a seeded generator for any random-looking motion.
- Keep text readable and hold important states long enough to understand.

WORKFLOW
1. Inspect the supplied files.
2. Create a concise scene map and timing/cue plan.
3. Build the complete interactive HTML timeline.
4. Export representative frames from the opening, middle, climax and ending; fix visual or timing issues.
5. If the goal is team sharing, stop at the polished interactive HTML page.
6. Only if an MP4 is requested, capture exact frames in a headless browser and encode them with FFmpeg.

Start by summarising the creative direction and scene map, then implement through completion.