Product film

A film is one HTML file: a 1920×1080 stage, a scene timeline, a pure render(t) function that sets every element from film time t, and a score built from a precomputed list of sound events. The same file previews live in a browser (scrub, frame-step, play with sound) and exports to MP4 by rendering every frame through headless Chrome and piping it to ffmpeg.

Why this shape: the film stays text (diffable, reviewable, easy to re-time), picture and sound come from one clock so sync is exact, and the export is frame-exact however slow the machine is, because capture never runs in real time.

Needs: Chrome or Chromium, ffmpeg built with libx264, Node 22+ (the export script uses Node's built-in WebSocket).

Workflow

0. Gather inspiration. Ask whether the user has reference videos or a look they want. Their references always come first. If they have none, offer the house references below. Either way, turn the references into a short borrow list before storyboarding (see Inspiration).
1. Storyboard first. Write a table: scene id, start–end in seconds, the one thing the viewer must understand, and the beat it lands on. Get the user's sign-off on the story before you polish anything. See Pacing below; most first cuts are too fast.
2. Build film.html on the engine contract below. Open it straight from disk (file:// works). Space plays, ←/→ step one frame, , and . jump one second, ?t=7.5 opens at a time, ?clean hides the controls.
3. Score it. Put a sound on every on-screen action (see Sound).
4. Verify by looking. Render stills at key moments and read them (see Verify). Check scene boundaries, each click, and each "done" state.
5. Export with the capture script. Run it in the background, since it takes about 3–5 seconds of real time per second of film at 60fps. Then pull a few frames from the MP4 itself, and deliver the MP4 with a contact sheet and a line giving its length, resolution and size.

Inspiration