Product Launch Motion

Product Launch Motion

A production discipline for making launch films that look like a motion designer made them — not a slideshow with a voiceover on top.

The output is a rendered MP4. The medium is HTML, CSS and GSAP, rendered frame-by-frame by a deterministic seek-based renderer (HyperFrames by default). Everything here is transferable to any renderer that can seek a timeline; the laws are renderer-neutral, the plumbing examples are HyperFrames.

This skill exists because green tooling is not the same as good film. A composition can lint clean, render without error, and still be a slideshow. The value below is the craft that separates the two, plus the traps that cost real hours to find — each one recorded with the measurement that proves it, not the vibe that suggested it.

It is a discipline, not a template. The laws below are fixed; the look is not, and deciding it is your job as director. Two films built from this skill should be unmistakably different from each other — different palette, ground, camera personality, type, texture, sound and structure — because they are arguing different claims for different audiences. Before you build anything, write three genuinely different visual directions and kill two: references/11-creative-direction.md. Reaching for the reference film's look because it is documented here is the one failure mode that makes everything else worthless.

When to use this

Use it for: a product launch or feature-announcement film (20–90s), a landing-page hero video, a demo reel, a conference sizzle, an investor-update film, or a rescue pass on a video that "looks basic".

Do not use it for: talking-head editing, screen-recording with captions slapped on, or anything where the deliverable is a live web page rather than a video file.

The ten laws

Break one and the film reads amateur, however good the individual frames are. Note what they do not cover: none of them tells you what the film should look like.

1 · Truth first. Every number, logo, face, screenshot and testimonial on screen is real and sourced. Before animating anything, write down the approved figures — the exact list of numerals allowed to appear — and refuse every other number. Invented metrics and stock faces are the fastest way to make a real product look fake. → references/02-story-and-truth.md

2 · Word-locked sync. Every reveal is cued to the measured start time of the word it illustrates. Not to a beat grid, not to an estimate — to a word-level transcript of the actual voiceover file. A frame at t=0 shows only what the voice is saying at t=0. → references/03-word-locked-sync.md

3 · Determinism. No Math.random, no Date.now, no CSS transitions, no repeat/yoyo. Any scattered or noisy value is derived from an index or the playhead. A seek to time T must reproduce byte-identical output, or your render is a lottery. → references/01-renderer-contract.md

4 · One camera, two nodes. A whole-shot rotation and a mid-shot scale must live on different elements. On the same element they fight over one transform matrix and the move judders. Outer node = dolly (scale), inner node = 3D turn (rotation + perspective). → references/05-camera-3d-cursor.md

5 · The cursor is a stage prop. A life-size pointer (~32px at 1920) disappears into any saturated control. Draw it at ~44×54 with a heavy stroke and a deep shadow, put it inside the node the camera moves, and put the zoom origin exactly on the control it clicks — that point becomes a fixed point of the transform and the aim survives the push with no compensating maths. → references/05-camera-3d-cursor.md

6 · Sound is arithmetic, not taste. A cue's volume cannot rescue a quiet source file. If the asset sits 20 dB under the narration bed, raising its volume moves the mix by tenths of a dB — measured, not guessed. Level the asset, then verify the cue landed in the delivered file. → references/07-sound-and-master.md

7 · Nothing ends moving. Every shot resolves. Motion is cued to meaning; a shot still drifting when it cuts reads as a screensaver, and a shot where everything drifts independently reads as one too. Scope: this governs resolution, not stillness. A single-take film whose camera never stops satisfies it by decelerating to rest before the end; a shot that holds a deliberate slow move while its content is settled satisfies it too. What it forbids is a shot cutting while the thing it was saying is still arriving. → references/04-motion-grammar.md

8 · Ration the accent. Two grounds (one for the argument, one for the product), one accent colour or gradient, and a written budget for where it may appear — typically: one emphasis word per headline, stat numerals, the active step, state flips, the CTA. A third hue is almost always a mistake. → references/06-look-and-grade.md

9 · Green gates are necessary, not sufficient. Lint, layout and contrast passes catch none of the things that make a film bad. After every render, extract frames from the delivered file at the beats you changed, look at them, and write down what is wrong before anyone else does. → references/08-qa-and-direction.md

10 · No house style. The look is derived from this product's claim, brand, audience and category — never inherited from the last film or from the examples in this repo. Write three different directions, pick one, and give the film a signature move that no other film has. A film that could be a competitor's film with the logo swapped has no direction. → references/11-creative-direction.md

Red flags

These are the thoughts that precede every skipped step. Each one is a signal to stop and do the thing you are about to talk yourself out of.

Violating the letter of a law is violating the law. "Mostly deterministic" is non-deterministic; "roughly on the word" is off the word.

The pipeline

Fourteen steps. Do not skip 1, 2, 5 or 13 — they are the ones people skip, and they are the ones that decide whether the film is any good.

Steps 1–3 are a loop, not a sequence: the direction depends on which real assets exist, and the truth pass often kills a direction outright (you cannot shoot a raking-light product film for a product that has not been manufactured). Cycle them until they agree, then go forward.

Build order (step 9) is not negotiable

The index is generated, so anything hand-added to it is destroyed on re-assemble and must be re-injected. Every wiring script here is idempotent (it replaces its own marked block), so the safe move is always to re-run the whole chain:

node scripts/assemble.mjs        # film.json + measured VO → index.html
node scripts/transitions.mjs     # the crossings between frames
node scripts/wire-audio.mjs      # music bed + word-locked SFX cues
node scripts/wire-grade.mjs      # grain + vignette + specular sweeps

assemble.mjs reads film.json (assets/film.example.json is a filled-in one) and measures every frame from its voiceover with ffprobe, so you never type a duration. It applies the arithmetic each downstream cue depends on: hold = VO + pad — the breath after the last word, because a shot that cuts on the last syllable reads as rushed — and duration = hold + the outgoing transition. The next frame starts at hold, not at duration; the difference is the overlap the transition lives in.

Reference map

Load only what the current step needs.

Scripts

All are dependency-light Node/bash, all idempotent, all safe to re-run.

Templates

Definition of done

A launch film is finished when all of these are true. Anything less, say so plainly rather than shipping quietly.

• Three directions were written and two were killed; the chosen one is recorded
• The film has a signature move you can name in one sentence
• It does not look like the examples in this repo, or like the last film you made
• Every on-screen number is on the approved-figures list
• Every reveal sits on its word (spot-check five at random against the transcript)
• Gates: 0 errors with the grade on; contrast passes with the grade off
• No frame is still moving when it cuts
• The delivered MP4 has been sampled at every changed beat and looked at
• Loudness measured on the delivered file: −14 LUFS ±0.5, true peak ≤ −1 dBTP
• Every SFX cue you added is measurably present in the delivered file
• Renders are versioned (video-v3.mp4), never overwritten
• The deliverable set exists, not just the master — vertical cut, captions, poster
• Third-party licences (music, SFX, fonts, photography) recorded with the handoff
• You have written down what you would fix next

Worked example

examples/CASE-STUDY.md walks the real film this skill was extracted from: a 44.2s B2B SaaS launch film, 11 frames, seven rounds of notes from "this is very basic" to delivered — with the specific note, the specific fix, and the measurement for each pass. Read it when you want to see the loop in step 12 actually running.