Launch video with Claude Code
A complete walkthrough of a 40 second product launch video built with Claude Code and HyperFrames, with one generated shot mixed in.
This recipe makes a 40 second launch video for an app. Claude Code writes the animation as HTML with HyperFrames and renders it on your computer, so titles, UI and numbers come out exact and cost no video credits. One shot is generated with Veo 3.1 on Google Flow's free daily credits to add a real world moment. The only spending is your Claude plan and, optionally, music and voice.
The brief
| Item | Choice |
|---|---|
| Product | Tally 2.0, a budgeting app (a made up example; use your own product) |
| Message | Tally 2.0 sorts your spending automatically and shows where your money went |
| Length and format | 40 seconds, 16:9 master, plus a 9:16 version |
| Look | Brand colors and font, real app screenshots, calm motion |
| Tools | Claude Code with the HyperFrames plugin, Google Flow (Veo 3.1 Fast) for one shot, an editor only if you need one |
| Why code | Launch videos need exact text, real UI and many variants. Code gives the same output every time and has no per clip cost. |
Budget
| Item | Cost |
|---|---|
| HyperFrames | Free, open source (Apache 2.0), renders locally |
| Generated shot | 0 USD on Flow's free credits: Veo 3.1 Fast costs 20 credits per generation and free users get 50 credits a day, so 2 takes a day |
| Generated shot, paid alternative | Veo 3.1 Fast on the Gemini API: 0.10 USD/second at 720p, so 0.80 USD for 8 seconds |
| Voiceover (optional) | ElevenLabs Starter, 6 USD/month, commercial use |
| Music (optional) | Suno Pro, 8 USD/month on yearly billing, or a free library |
| Claude Code | Claude Pro, 20 USD/month (17 USD/month billed yearly); Max from 100 USD/month if you hit limits |
Prices checked on 15 Oct 2026. HeyGen also offers cloud rendering billed in HeyGen credits, but local rendering is free.
Walkthrough
Set up HyperFrames in Claude Code
You need Node 22 or newer, FFmpeg and Chrome. Then add the plugin inside Claude Code and run npx hyperframes doctor to check your machine. Setup covers plans, effort levels and render times in more detail.
claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframesStart the workflow inside Claude Code with /hyperframes:hyperframes. Another option is npx skills add heygen-com/hyperframes. Without Claude Code, the same project runs with these commands:
npx hyperframes init my-video
npx hyperframes preview
npx hyperframes renderIdea and brief
Write the brief before you ask for anything. Name the hook, the scenes, the exact text and the brand rules. Paste this into Claude Code and adapt it.
Make a 40 second launch video for Tally 2.0, a budgeting app, with HyperFrames.
Format: 1920x1080, 30 fps. Later we will make a 1080x1920 version.
Brand: background #0F1B2D, accent #3DDC97, text #F5F7FA, brand font
Satoshi 500/800 (files in ./brand/fonts). Logo in ./brand/logo.svg.
Real app screenshots are in ./screens (dashboard.png, categories.png,
report.png). Use them as they are; do not redraw the UI.
Style references: ./refs/ref-1.mp4 and ./refs/ref-2.mp4. Match their pacing
and type sizes, not their colors.
Scenes:
1. 0 to 4 s: hook text "Where did your money go this month?"
2. 4 to 10 s: the clip ./footage/cafe.mp4 full screen, title "Every coffee
counts." in the lower third.
3. 10 to 18 s: dashboard.png slides in, the spending chart draws itself.
4. 18 to 26 s: three feature cards, one at a time: "Sorts every payment",
"Weekly report", "Shared budgets".
5. 26 to 32 s: report.png, the total counts up to 1,240 USD saved.
6. 32 to 40 s: logo reveal, "Tally 2.0. Out now on iOS and Android."
Rules: one idea per scene, large readable text, no more than one animated
element at a time, calm easing. Hold every line 0.3 s per word after it settles.
Banned: centered title on a gradient, everything fading in, glows, particles,
lens flares, bouncy easing, invented numbers.
First give me the scene list and one still frame per scene for approval.
Do not animate until I approve the stills.Replace Satoshi with your real brand font. Do not fall back to Inter or Poppins just because they are common: HyperFrames lists them among fonts that signal AI output, unless they are your actual brand font. If the on screen text is not English, check that the font covers every character on Fonts. The Brief page explains each line of this prompt and has five more example briefs.
Shot list
| # | Time | Made with | What is on screen | Motion |
|---|---|---|---|---|
| 1 | 0 to 4 s | Code | Hook question on the brand background | Words appear one by one |
| 2 | 4 to 10 s | Generated (Veo 3.1 Fast) | Café table, phone buzzes beside a coffee | Slow push in, title in the lower third |
| 3 | 10 to 18 s | Code | Real dashboard screenshot | Slides in, chart draws itself |
| 4 | 18 to 26 s | Code | Three feature cards | One card at a time |
| 5 | 26 to 32 s | Code | Report screenshot and a big number | Number counts up |
| 6 | 32 to 40 s | Code | Logo and release line | Logo reveal, then hold |
Storyboard and references
Give Claude 1 to 2 reference videos you like. Without a reference, creators report that the agent defaults to centered text on a gradient background with everything fading in. Use real UI screenshots, not redrawn ones. Then follow a simple review loop that one team shared: approve the hook and scene list, approve one still per scene, only then animate, and review readability at the end. Iterate shows how to give notes and when to stop.
The generated shot
Make scene 2 in Google Flow with Veo 3.1 Fast. Flow is available in Vietnam for users 18 and over, and English prompts are recommended. For Veo, put the camera first, and describe sound with SFX: and Ambient noise: labels.
Slow push in, eye level, 50mm, shallow depth of field. A phone lies face up
on a wooden café table next to a cup of iced coffee. The phone screen lights
up and the phone buzzes once, the ice in the cup shifts slightly. Morning
window light from the left, warm wood and soft green tones, calm and quiet
mood. The phone screen shows only a soft glow, no readable text.
SFX: one short phone vibration on the table.
Ambient noise: quiet café murmur, a cup set down in the distance.Generate at 8 seconds, pick the best take, and save it as ./footage/cafe.mp4. Any text on the phone screen will be garbled, so all text in this scene comes from code. Flow clips carry their own audio track and a small watermark: tell Claude to keep the clip's sound here (it holds the vibration), and check the corners. Mixing footage covers placing and grading generated shots. Free daily credits work for Veo 3.1 Lite, Fast and Quality only, and video may be unavailable for free users from 2 PM to 5 PM UTC.
Editing: build, preview and review
Let Claude build the composition, run npx hyperframes check --snapshots, then preview it with npx hyperframes preview. Watch it at full size and on a phone. Check four things: every text stays on screen long enough to read twice, only one element moves at a time, the screenshots are sharp, and the café clip starts on motion. Ask for changes one scene at a time and keep earlier versions; a hands on test of Claude Code editing video found it works best as a supervised operator.
Audio
Add a music bed and, if you want, a voiceover. ElevenLabs Starter (6 USD/month) includes commercial use; the free plan does not. For music, use a track from a paid Suno plan or a free library. Ask Claude to place the audio file in the composition and to time the logo reveal to a beat in the music. Audio and sync explains beat maps, voice timing and mix levels.
Finishing: render and variants
Render the master with npx hyperframes render to MP4. For YouTube, use H.264 with AAC audio at 48 kHz, about 8 Mbps at 1080p. Then ask Claude for the 9:16 version: same scenes, text sizes adjusted, screenshots stacked vertically. In HyperFrames each aspect ratio is its own composition sharing the same assets, so this is a re layout, not a crop. Rendering variants is where code saves the most time; see Output.
Pure motion graphics do not need an AI label on YouTube; the rules target realistic synthetic content. The generated café shot is realistic, so if it stays in the video, use YouTube's altered or synthetic content setting.
What usually goes wrong
| Problem | Why | Fix |
|---|---|---|
| Looks like every other AI launch video | No reference video, so the agent uses defaults | Give 1 to 2 reference videos and real UI |
| Too busy, effects everywhere | Agents tend toward crowded, fast, effect driven output | Write "one animated element at a time, calm easing" in the brief |
| Garbled text in the generated shot | Video models render text poorly | Keep text out of the generated shot and add it in code |
| Flow will not generate | Free video can be unavailable 2 PM to 5 PM UTC; Flow flags some prompts | Generate at another time, simplify the prompt |
| The agent changes things you did not ask for | Long, open ended requests | Change one scene per request, keep earlier versions |
| Slow iteration | Each render takes time, especially on long videos | Preview in the browser, use --quality draft, and render only when a scene is approved |
Mixing both paths
Use generated shots for the moments that should look filmed and code for titles, UI and numbers. If you need more than one or two generated shots, follow the product ad recipe for those shots and bring the clips into this project as described in Mixing footage.
Sources
- HyperFrames setup and license: HyperFrames on GitHub, HyperFrames overview, HyperFrames quickstart
- Claude prices: Claude pricing
- Remotion setup and license: Remotion with Claude Code, Remotion license
- When to use code and the hybrid workflow: Cutback
- Reference videos and review loop (organic posts on X): rexan_wong, every, adrianinmotion
- Claude Code as a supervised operator: Implicator
- Flow credits and availability: Flow credits help, Where you can use Flow
- Veo prompting and prices: Google Cloud Veo 3.1 guide, Gemini API pricing
- Export and labels: YouTube encoding, YouTube disclosure