launch-video

Launch video, built in code

A launch video sells one thing in 30-45 seconds. You build it as one HTML file with window.seek(seconds), then export to MP4.

Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.

Step 1: Ask for five things, then wait

1. What's launching, in one line. Example: "LinkedIn AI OS, a six-week cohort that sets up your content system."
2. The one sentence the video says, split into 3-5 beats. Example: "Your next post, / in your voice, / checked before you see it."
3. Proof. Real screenshots of the product, real results with their source, or real customer posts. Attached files only.
4. The call to action, word for word, exactly as it appears on the sales page.
5. Brand. Hex codes, font, logo file. Plus the size: 1920 x 1080, 1080 x 1350 or 1080 x 1920.

Never invent a price, a date, a "spots left" count, a testimonial or a result.

What "premium" means here (learned the hard way)

Three first drafts were rejected as "not premium" and "not my brand colours". What fixed it:

• Your real brand colours, sampled from your landing page or your best graphic. Never a default palette.
• Glass UI. Product surfaces as frosted, liquid-glass panels with soft depth, like Apple's current UI.
• The prompt typed live into a real-looking input box. That is the one place typing belongs.
• Real, recent work on the proof cards, not old examples.
• Variety. No two beats share the same layout.

Build the first 10 seconds in two or three styles first. Pick one. Only then build the rest.

Step 2: Lay out the beats

Default 7 beats, 45 seconds:

#	Time	Beat
1	0-4s	First words of the sentence, big, on a clean background. The hook.
2	4-9s	Next words over real proof (posts, results, screens).
3	9-17s	The product working: a screen, a cursor typing a real prompt, the output appearing.
4	17-22s	The quality beat: something checks, passes or ticks.
5	22-32s	How it works: steps, weeks or features as one simple visual.
6	32-38s	The number that matters, counted up, with its source.
7	38-45s	Name, call to action, requirement. Holds long enough to read.

Show the beat sheet and wait for a yes.

Step 3: Build brief (paste into Claude Code)

Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.

Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.

Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.

Beats: follow my beat sheet exactly, with its timings.

Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.

After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.

Step 4: Check it like a buyer

• Would a stranger know what's launching by second 4?
• Is every number traceable to a source?
• Does the call to action hold for at least 3 seconds?
• Is it readable on a phone, with the sound off?

Step 5: Export

HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. Export a 16:9 and a 4:5 cut. Check which tools exist before installing, and ask first.