A $0 Launch Film From Your Product's Real Screens

What you’ll make

A short vertical or horizontal launch film that animates your real product screens. Since it’s rendered from your own code, the UI is exactly right, which a video model can’t guarantee.

Steps

1. Write a sound-off script. One line per beat, every line true today.
2. Build the film as one HTML page using copies of your actual components.
3. Drive all motion from one clock. Every animation is a delay from time zero, so any frame renders identically every time.
4. Render frame by frame. Headless Chrome screenshots each frame; FFmpeg stitches them (e.g. 1080×1920 at 60fps for Reels/Shorts/TikTok, 1920×1080 for landscape).
5. Land the music on the key moment. Shift the track so its drop hits your hero frame, and normalize loudness (the source targets −14 LUFS, a common streaming target).
6. Fact-check against the code. Compare every on-screen claim, label, timer and date with what the real product does.

The source creator released these steps as an open-source Claude Code skill, linked from the original post.

Prompt templates

In this repo, build a 20-second vertical launch film as a single HTML page
using our real [component names]. All animations keyed off one timeline clock.
Beats: [beat 1], [beat 2], [beat 3], end card "[CTA]".
Add a script to render each frame with headless Chrome at 1080x1920@60fps
and stitch with ffmpeg. Render frames at 0s, 5s, 10s as PNG stills for review first.

Mistakes to avoid

• Showing interactions the real product doesn’t have (e.g. a form that types itself).
• Animations tied to real time instead of a frame clock, which gives inconsistent renders.
• Music too loud or peaking in the wrong place.