Code Launch Film

Launch video

Make a launch video the way a small motion studio would. First decide what the video must do and plan it beat by beat. Then build every frame in code, so any part can be changed and rendered again in a minute.

The result is a short film of the real product: its UI rebuilt in HTML, moving on a beat grid, cut to music, at 60 fps with motion blur.

What you need

• Node 18+, ffmpeg with libx264, Python 3.9+. The Python scripts use only the standard library.
• Playwright with Chromium, installed in the video folder: npm i -D playwright && npx playwright install chromium.
• This skill's scripts/ and assets/template.html.

In commands, $SKILL is this skill's folder (for example ~/.claude/skills/launch-video). Set it once in the shell: SKILL=~/.claude/skills/launch-video. Run the commands from the video folder.

The process

Work through the phases in order. Each one writes something the next one uses.

Phase	Output	Read
1. Brief	brief.md	references/1-brief.md
2. Format	format, length, aspect ratios, platforms (in the brief)	references/2-formats.md
3. Story	beatmap.md	references/3-story.md
4. Look	style notes (in the brief)	references/4-look-and-motion.md
5. Build	film.html: 4 key stills for the user's OK, then the whole film	references/5-build.md, assets/template.html
6. Music and sound	song options, cut points, mixed MP4	references/6-music-and-sound.md
7. Render and check	the MP4 and the check results	references/7-render-and-check.md
8. Deliver	final files, cutdowns, posting notes	references/8-platforms.md

Read a reference when you reach its phase, not all at once.

1. Brief

Find out what the product is, who the video is for, the one thing they should remember, and the magic moment: the point where the product visibly does its job. Read the repo, site and docs first. Then ask the user at most 5 questions in one batch. For anything else, write your default into the brief's open questions and carry on. Write brief.md.

2. Format

Choose the kind of video from the product type, the goal and the platform: teaser, launch film, demo, explainer, feature drop, founder video, hackathon demo. Set the length and aspect ratios. A 15–30 second launch film for X and LinkedIn is the usual default for software. When advice conflicts, the user's words win, then the main platform. Other platforms get cutdowns.

3. Story

Write the beat map on a fixed tempo; 120 BPM gives a 0.5s beat. For each beat it says what happens, which earlier element it grows out of, where the camera goes, what text shows and what you hear. Put the magic moment on the music's drop.

4. Look

Use the product's own brand: its colors, fonts, logo, icons and components. Read the design tokens and CSS. Without a brand, use a light 2D style: warm white canvas, near-black UI, one accent color, one clean sans font, a mono font for code. Make text big enough to read on a phone.

5. Build

Copy $SKILL/assets/template.html to video/film.html. Keep its engine, replace its film. Every style comes from time inside seek(t): no CSS transitions, timers or state between frames. Shapes change into each other instead of fading.

Build the 4 key moments first: the hook, the magic moment, the payoff and the end card. Render them as stills and show them to the user with the beat map. Get their OK here: changing a sentence is cheap, changing a finished scene is not. Then build the rest.

6. Music and sound

Find 3–4 candidate songs near the film's tempo, each with a quiet part and a clear drop. Ask before downloading anything. Measure each song with scripts/beats.py, look at scripts/loudness_plot.py, and confirm the drop with beats.py --around. Render the film at speed = song BPM / film BPM so the beats line up. Then cut each song with scripts/mux.py, so its drop lands on the magic moment. Let the user pick. Add real sound effects for clicks, whooshes and pops, placed by their loudest point.

7. Render and check

Render stills first, then the video: node $SKILL/scripts/render.mjs film.html --out out/film.mp4. Then check, and show the user the proof:

• scripts/pops.py finds frames that flash for a single frame. It should report 0.
• scripts/contact_sheet.py --video shows frames every 0.5s. Look at every tile for framing, cut-off text and overlaps.
• Check the drop timing and the loudness (-14 LUFS).
• Watch it muted at phone size.

8. Deliver

Export the master and the cutdowns each platform needs, such as 16:9, 1:1 or 4:5, and 9:16. Give the user the files, the post text with the claim and link, and what to check before posting. Then take notes like a director ("the middle drags", "the zoom should hit the drop") and change only what the note is about.

Working rules

• Real product, true claims. Use the product's real name, UI, words and data shapes. Sample data must be plausible and add up across scenes: if a $120 order comes in, the total grows by $120. Never show a feature that doesn't exist or a number you can't back. Say "beta" or "testnet" where it applies.
• One message per video. If the brief has three messages, make three videos or pick one.
• Ask before downloading music, sound effects or footage. Name the file, the source, its license and its size.
• Check your own work before you show it. The checks in phase 7 catch most problems before the user sees them. Report results with numbers, not "looks good".
• Show options where taste decides. Music especially: cut 3–4 versions and let the user choose.
• Copy structure, not art. A reference video can lend its pacing and beat structure. Don't copy its characters, art, music or brand.

Video folder

Keep the video out of the product's source tree, unless the user wants it there.

video/
  brief.md        beatmap.md
  film.html       assets/      (logo, fonts, icons, screenshots)
  music/          sfx/         (downloads, with their license notes)
  stills/         out/         (renders; disposable)
  package.json    node_modules/ (Playwright)

Scripts

Script	Does
scripts/render.mjs	Stills, or the full MP4 with motion blur, parallel workers and --speed
scripts/contact_sheet.py	Tiles stills or video frames into sheets you can look at in one image
scripts/pops.py	Finds single-frame glitches
scripts/beats.py	Song tempo, beat grid, drop candidates; --around for a close look
scripts/loudness_plot.py	Draws songs' loudness with the grid and drop candidates
scripts/mux.py	Cuts music to the hit, places sound effects by their peak, sets loudness

Run any script without arguments to see its usage.