Twelve-Second Seek-Function Story Video

You are a motion graphics engineer and animation director. Build a single self-contained HTML file that renders a 12-second, 1920×1080, 30fps launch video with synchronized procedural sound—every frame drawn by a `seek(t)` function, no external assets, ready to capture with Playwright + ffmpeg.

## Story & Timing

**0–2s: Prompt input**  
A dark rounded-rect "pill" input field sits centered on an off-white canvas. The phrase "make a launch video" types in with realistic keystroke rhythm (100–180 ms between letters, occasional 250 ms pause). A blinking caret precedes each character. On Enter, an orange button beside the pill flashes bright orange, and the pill slides upward out of frame.

**2–4s: Filmstrip stamp-in**  
A 12-frame horizontal filmstrip materializes left-to-right, one frame per beat at 120 BPM (500 ms/frame). Each frame depicts one pose of an orange ball's parabolic bounce: squash on ground contact, stretch at apex, realistic acceleration. Frames appear with a subtle scale/fade and a rising-pitch note (C4 → C5 chromatic).

**4–8s: Flipbook playback**  
A large "viewer" window appears above the strip. A red playhead sweeps the filmstrip at 120 BPM while the viewer plays the 12 poses as a flipbook loop—once at 120 BPM, then immediately again 1.5× faster. The strip and playhead remain subtly animated (micro-drift, scale breathing).

**8–10s: Headline reveal**  
The filmstrip slides off-screen. The headline "every frame is code." types in or fades up, large and centered.

**10–12s: Final flourish**  
The orange ball arcs over the headline from right and lands on the period with a soft thump and squash, then settles with a gentle ease.

## Animation & Style Rules

- **Arrive fast, land soft:** ease every move with 12–19% of remaining distance per frame (exponential decay).
- **Nothing freezes:** even "holds" drift slowly (0.5–2 px push, slight scale breathing 0.5%).
- **Stagger:** overlapping action by 2–4 frames between related elements.
- **Motion blur:** apply directional blur (2–8 px) only when an object moves >40 px/frame.
- **Readable on mobile:** minimum text 48 px equivalent; high contrast.
- **Palette:** off-white background (#F8F6F3), ink (#1A1A1A), highlight orange (#FF6B35). No gradients, no other colors.

## Sound Synthesis (Web Audio API)

- **Keystroke tick:** 80 Hz click, 30 ms, per character typed.
- **Enter click:** 200 Hz pop, 50 ms.
- **Frame stamp notes:** rising chromatic scale C4 (261.63 Hz) to C5 (523.25 Hz), sine wave, 80 ms attack, 200 ms release, one note per frame.
- **Ball thump:** 60 Hz bass transient, 120 ms decay, on final landing.

All sound must trigger sample-accurately in sync with visuals.

## Implementation Requirements

**Structure:**  
One HTML file. A `seek(t)` function accepts time in seconds [0, 12] and renders that frame to a `<canvas>`. A `render()` loop calls `seek(performance.now() / 1000)` at 30 fps for real-time preview. Include a URL parameter `?frame=N` mode that seeks to frame N, renders, and signals Playwright (for ffmpeg export).

**Code quality:**  
- Pure functions for easing, lerp, arc paths, squash/stretch.  
- Clear named constants for timing breakpoints, colors, dimensions.  
- No libraries; vanilla JS, Canvas 2D, Web Audio API only.

## Deliverable Workflow

**First, produce 5 key-frame stills** as static `seek(t)` calls:  
1. `seek(1.2)` – typing in progress, three letters visible.  
2. `seek(3.0)` – filmstrip half-built, 6 frames stamped.  
3. `seek(6.0)` – flipbook mid-playback, playhead at frame 7.  
4. `seek(9.0)` – headline fully visible, strip gone.  
5. `seek(11.8)` – ball landed on period, squashed.

**Render the stills** (ASCII art wireframe or code snippet showing canvas state), then **critique them as a harsh motion director:**  
- Does the composition read instantly?  
- Is the weight and timing convincing?  
- Are secondary actions (caret blink, drift, blur) present?  
- Does the eye flow naturally from beat to beat?  
- Is the hierarchy clear at phone scale?

**Identify the 3 worst problems** (e.g. "the ball lacks squash," "headline competes with the strip," "no motion blur on the slide") and **revise the `seek(t)` function** to fix them.

**Finally, output the complete HTML file** with inline comments marking each story beat, easing helpers, and sound triggers.

---

**Context:** {{project-context}}

Now build the video code.