A product launch video with Claude: six steps, not one prompt

You need three things: a place to find references (whatships.com, an archive of launch videos posted on X), an engine that turns code into video (HyperFrames or Remotion) and real UI to put in it (your own app or 21st.dev). All the links are below.

What is extra below: what HyperFrames actually needs (Node 22 and FFmpeg, otherwise rendering fails), two ways to add it to Claude Code, when Remotion becomes paid, and a prompt that directs the video scene by scene.

1. Do not start from scratch, start from a reference. Without one, Claude falls back to its default look. Pointing at a video beats describing a style every time.

2. Install the right tool. HyperFrames and Remotion both have every scene written as code and rendered straight to MP4. The benefit: when you want to change something you do not regenerate from scratch, you fix one line and render again.

3. Give Claude real UI. Use the code and screenshots of your own app or site. If you do not have them yet, take components from a library like 21st.dev. Otherwise Claude invents fake looking buttons and empty boxes, and the video instantly looks cheap.

4. Paste the prompt. Give the prompt below together with your references and the flow of the video.

5. Storyboard first. Claude produces one still per scene and you give notes before any rendering starts. Fixing a wrong scene here is far cheaper than re-rendering a 30 second video.

6. Keep iterating. This is the most important step. The first render will not be perfect. Give feedback on every version; use voice notes if typing feels like a chore.

HyperFrames is HeyGen's open source (Apache-2.0) tool. It renders scenes written in HTML, CSS and GSAP to MP4. You can add it to Claude Code in two ways; both bring the same skills.

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

npx skills add heygen-com/hyperframes

With the plugin you start it inside Claude Code with /hyperframes:hyperframes. If you want to open a project yourself and preview it by hand, there is a CLI too:

npx hyperframes init my-video
cd my-video
npx hyperframes preview   # live preview in the browser
npx hyperframes render    # export MP4

Remotion does the same job with React components. If your app is already React it can be more comfortable, since your components carry straight into the video.

npx skills add remotion-dev/skills
npx create-video@latest

Attach these files with the prompt: three reference videos you like, screenshots of your app, your component code, a brand file and a flow file with one line per scene. The prompt refers to these file names; if yours differ, rename the files or edit the names in the prompt.

THE BRIEF
Make a 30-second launch video for my product in HyperFrames, 1080 by 1920, 60fps.
The idea: the problem in the first 3 seconds, the product solving it by second 8, then three features, then the end card.

REFERENCES
Match the pacing, type and transitions of the three reference videos attached. Cut every 1.5 to 2 seconds. Hard cuts on the beat, no fades.
Copy how ref-2 zooms into one detail of the UI, and how ref-3 types the headline one word at a time.

REAL UI ONLY
Use my real components from components.tsx and my real screenshots. Never invent UI. If you need a screen I have not given you, ask me for it.

BRAND
Use the colours, fonts and logo in brand.md. One accent colour only. Big type, short lines, never more than six words on screen.

THE FLOW
Follow flow.md scene by scene. Write the storyboard first, one still per scene, and wait for my notes before you render anything.

WHEN YOU RENDER
Lint it, render it, then watch your own render frame by frame and fix anything that overlaps, clips or sits still for more than two seconds.

If you use Remotion, change "in HyperFrames" in the first line to "in Remotion". 1080 by 1920 is vertical, meant for Reels and TikTok; for X or YouTube in landscape, write 1920 by 1080.