AI Video Playbook

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

ItemChoice
ProductTally 2.0, a budgeting app (a made up example; use your own product)
MessageTally 2.0 sorts your spending automatically and shows where your money went
Length and format40 seconds, 16:9 master, plus a 9:16 version
LookBrand colors and font, real app screenshots, calm motion
ToolsClaude Code with the HyperFrames plugin, Google Flow (Veo 3.1 Fast) for one shot, an editor only if you need one
Why codeLaunch videos need exact text, real UI and many variants. Code gives the same output every time and has no per clip cost.

Budget

ItemCost
HyperFramesFree, open source (Apache 2.0), renders locally
Generated shot0 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 alternativeVeo 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 CodeClaude 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.

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

Start 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:

Terminal
npx hyperframes init my-video
npx hyperframes preview
npx hyperframes render

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

Prompt
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

#TimeMade withWhat is on screenMotion
10 to 4 sCodeHook question on the brand backgroundWords appear one by one
24 to 10 sGenerated (Veo 3.1 Fast)Café table, phone buzzes beside a coffeeSlow push in, title in the lower third
310 to 18 sCodeReal dashboard screenshotSlides in, chart draws itself
418 to 26 sCodeThree feature cardsOne card at a time
526 to 32 sCodeReport screenshot and a big numberNumber counts up
632 to 40 sCodeLogo and release lineLogo 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.

Prompt
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

ProblemWhyFix
Looks like every other AI launch videoNo reference video, so the agent uses defaultsGive 1 to 2 reference videos and real UI
Too busy, effects everywhereAgents tend toward crowded, fast, effect driven outputWrite "one animated element at a time, calm easing" in the brief
Garbled text in the generated shotVideo models render text poorlyKeep text out of the generated shot and add it in code
Flow will not generateFree video can be unavailable 2 PM to 5 PM UTC; Flow flags some promptsGenerate at another time, simplify the prompt
The agent changes things you did not ask forLong, open ended requestsChange one scene per request, keep earlier versions
Slow iterationEach render takes time, especially on long videosPreview 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