Launch video, built in code

window.seek(seconds)

brand.md

MOTION.md

brand-intake

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.

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

• 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.

Step 2: Lay out the beats

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

npx skills add heygen-com/hyperframes

npx hyperframes render