Product Launch Motion Design — a Claude Code Skill

Make product launch videos from code. Install this skill, point Claude Code at your product, and it directs and renders a launch film: script, voiceover, word-synced reveals, real camera moves, film grade, broadcast-loudness master — as HTML, CSS and GSAP, rendered frame by frame to MP4.

Four beats from it, above. ▶ Watch all 45 seconds — eleven shots, no After Effects, no stock footage, no GPU renderer, no diffusion model. The render is deterministic, so the same commit produces the same file.

npx skills add AbubakrChan/product-launch-motion

Why this exists

Programmatic video tools solve rendering. They do not solve direction — and direction is the entire difference between a launch film and a slideshow.

A composition can lint clean, render without error, hit every deadline, and still look like a template. The gap is craft: does the reveal land on the word? Is the camera actually moving, or is everything just drifting? Can you see the cursor? Is the "typing sound" you added actually audible, or is it 20 dB under the narration and mathematically inaudible?

This skill is that craft, written down — ten laws, a fourteen-step pipeline, fourteen shots, and thirty-four traps, each recorded with the measurement that proves it rather than the vibe that suggested it.

It also won't hand you a house style. Before building anything it writes three different visual directions and kills two, so two products never get the same film.

What you get

• 12 reference documents — direction, story, sync, motion, camera, look, sound, QA, a catalog of 14 shots, 34 traps, and how to ship the final set.
• 8 scripts that do the fiddly parts: assemble, transitions, audio, grade, levelling, word timings, mastering, and proving a sound is audible.
• 5 templates, including a frame that already has the camera rig and cursor in it.
• A worked example — a real film, revision by revision, with the note that prompted each change.
• A baseline evaluation — the skill run against itself, with and without. It found three bugs in its own scripts and one missing chapter; all fixed. evals/BASELINE.md

Install

npx skills add AbubakrChan/product-launch-motion

Then ask for what you want:

Make a 45-second launch video for my product at example.com

That's it. The skill takes it from there — it will ask you the things it needs.

You'll need Node and FFmpeg (brew install ffmpeg). Everything else it tells you about when it needs it, and nothing costs money: the voiceover can be a free local model, your own voice, or any TTS you already pay for.

You don't have to run any of this yourself — it's what the skill does when you ask. It's here so you can see the shape of it, and so you can drive it by hand if you'd rather.

# 1 · the brief — product, audience, the one claim
cp assets/BRIEF.md ./BRIEF.md

# 2 · direction — three different looks, two of them killed
#     this is the step that decides whether the film is any good

# 3 · voiceover first. Frame lengths come from the real recording, never a guess

# 4 · word timings, so every reveal can be cued to the word that describes it
node scripts/word-timings.mjs --transcript 01.json --id 01-hook --out audio_meta.json

# 5 · one HTML file per shot, starting from a skeleton that already has
#     the camera rig and the cursor
cp assets/frame-skeleton.html compositions/frames/01-hook.html

# 6 · assemble the film — this order, every time
cp assets/film.example.json ./film.json
node scripts/assemble.mjs && node scripts/transitions.mjs \
  && node scripts/wire-audio.mjs && node scripts/wire-grade.mjs

# 7 · check, render, master, and prove it worked
npx hyperframes check --no-contrast
npx hyperframes render -o renders/video-v1-raw.mp4
./scripts/master.sh renders/video-v1-raw.mp4 renders/video-v1.mp4
./scripts/verify-cue.sh renders/video-v1.mp4 10.72 0.76

The craft it encodes

Timing and easing — custom-bezier ease-out, spring and settle, staggered entrances, anticipation, speed ramping, deliberate holds, beat-synced cuts. Camera — dolly, parallax, orbit and turntable, rack focus, whip pan, zoom-to-detail. Type — kinetic typography, mask reveal from the baseline, blur-in, tracking-in, odometer counters, text morphs. Look — film grain, bloom and halation, chromatic aberration, light sweeps, aurora and gradient-mesh grounds, glassmorphism, vignette, lifted blacks, a tight palette with one accent. 3D and product — exploded views, floating isometric mockups, HDRI-style lighting. SaaS and UI — fake cursor with ripples, UI card staggers, skeleton-to-results loading, progressive disclosure, state flips. Sound — whooshes, UI ticks, sub-bass on hero hits, and silence before the reveal. Structure — cold opens, problem-agitate-solve arcs, register flips as story turns.

Each one is documented as when to use it and what breaks, not just as a name.

Stack

GSAP for the motion, HyperFrames to render it, FFmpeg to master it. Remotion works too, and the skill includes the translation.

One beat each, built and rendered for real rather than compared on paper.

A taste of the trap index

These are the ones that cost hours. All 34 are in references/10-traps.md.

• Turning a sound effect up cannot save a quiet one. Going from 0.35 to 0.85 moved the actual film by 0.1 dB. Fix the file, not the volume.
• A film can render completely white from one line of CSS (mix-blend-mode), and nothing about the source will tell you why.
• Film grain makes the file 7× bigger — 9.3 MB became 67.3 MB — unless you hold the grain across frames the way real film does.
• Your sound effect can be in the film, at the right volume, and still start too late to hear if the audio file opens with a moment of silence. That one shipped.

Each of the 34 is written up with the command that proves it, in references/10-traps.md.

FAQ

Will every video made with this look the same? No. The pipeline forces three competing directions before any building, and a checklist names the skill's own defaults so an agent can catch itself reaching for them. What repeats is the discipline — sync, determinism, sound arithmetic, mastering — not the aesthetic. references/11-creative-direction.md.

Does this work for physical products, not just software? Yes. The shot catalog covers hardware heroes, unboxing and exploded views, e-commerce line items and floating product mockups alongside the SaaS shots. The laws are product-agnostic; only the shot selection changes.

Do I have to use HyperFrames? No. The laws — word-locked sync, the two-node camera, the cursor spec, sound arithmetic, mastering — are renderer-neutral, and references/01-renderer-contract.md includes the Remotion equivalents. HyperFrames is the default because it ships the gates.

Can I use my own voice, or a cloned one? Yes. The pipeline needs a WAV plus word-level timestamps. Anything that produces those works — human recording, ElevenLabs, local Kokoro. Swapping voices means re-deriving the timings, because every cue is locked to the words.

Is this an AI video generator? No, and that is the point. Nothing is diffused or hallucinated. Every frame is code you can read, diff and fix, so the output is deterministic, brand-exact, and never invents a number or a face.

How long does a film take? Measured on an M-series laptop: the 44-second reference film renders in 51s (rendered in 51.1s, 40 MB raw) and masters in 30s (real 30.35 — two ffmpeg passes plus a full re-encode, and the re-encode is most of it). The direction loop — the part that matters — takes as many passes as you have notes.

Troubleshooting

Every script takes --help and prints its own documentation.

Contributing

Traps are the most valuable contribution. If you find one, open a PR against references/10-traps.md with the measurement that proves it — the number, the command, and the before/after. That standard is the whole reason this file is useful.

License

MIT — see LICENSE. The craft is meant to travel.

The film does not. The reference film and the frame reproduced under examples/ belong to the client it was made for. See NOTICE — it also covers GSAP, which these docs tell you to vendor into your own project.