How I make 4K launch videos with Claude

No editing software. No timeline. Each ad is an HTML page animated by code, and a tool called HyperFrames renders it to a 4K MP4. I talk to Claude, it writes that page, and the render does the rest. Here is the whole thing, for someone starting on a fresh PC.

Before you start

You need a computer with a graphics card. The rendering is the heavy part. An NVIDIA card makes it minutes instead of an hour. Integrated graphics will work, but slowly.

Install these four things. You will never open any of them — Claude uses them for you.

Claude Code — claude.com/code
Node.js (LTS) — nodejs.org
Python 3.11 or newer — python.org, and tick "Add Python to PATH"
ffmpeg — ffmpeg.org, or run `winget install ffmpeg`

HyperFrames is the renderer that turns the page into video. You do not install it — Node fetches it automatically the first time Claude renders, and it pins one exact version so a re-render months later comes out identical.

Make a folder for one video and put in it:

your talking-head video, filmed vertical at 9:16
an mp3 if you want background music
a folder called `sfx` with any sound effects you own (optional)

Open Claude Code, point it at that folder, and you are ready. One honest note: the first video takes an afternoon, mostly because you are figuring out what you want. The second takes about twenty minutes.

Step 1 — the one big prompt

This is the whole setup. Paste it and change the parts in bold to suit you.

*I want to turn the vertical video in this folder into a launch ad, built as code so I can re-render it after any change.*

*Transcribe it first. Use faster-whisper with word-level timestamps — I need to know exactly when each word is spoken, because every caption and every animation has to land on its word. Show me the transcript before you design anything.*

*Build it as an HTML page animated with a single GSAP timeline, rendered with HyperFrames at 1080×1920. Everything on screen should be real HTML and SVG, not images, so it stays sharp when I export in 4K.*

*Captions. Two lines per caption: a small line on top and a big bold line under it. The big line appears on the exact word it names, not before. Font Bricolage Grotesque, the big line about 120px in white fading into orange, the small line 62px in warm white. Put them in the lower third, around y=1136, centred. Captions go only over my face — never on top of a graphic screen. Add a soft dark gradient behind them so they stay readable.*

*Screens. Between the talking parts, cut to full-screen graphics that illustrate what I am saying. Use a different kind of UI on each one — not the same card every time. Very little text on them; my voice carries it. Each element should appear on the word that introduces it.*

*Background for those screens: dark charcoal with an orange glow rising from the bottom, moving slowly. The theme is for the graphics and text only — do not colour-grade my footage, leave it exactly as filmed.*

*Sound. If there is an `sfx` folder, mix those into one sound-effects track placed on the moments things appear on screen. Mix the mp3 as background music, matched to my voice level and ducked under it while I speak, at about 25%.*

*Motion. Smooth, no bouncing. Things fade and lift into place. Finish by checking it and showing me a picture of every screen before rendering.*

Claude will transcribe, show you the script with timings, design the screens around what you actually said, and build it.

Step 2 — look at the pictures

Claude will show you a still of each screen. Look at every one. The automatic checks catch broken code, not ugly design — a few times things were technically fine and visibly wrong.

Say what you think in plain English. All of these worked:

*"only show the first card when I say it, not before"*
*"the circle isn't centred"*
*"the last screen's alignment is off — the phone and the cursor don't line up"*
*"the UI is too plain, make it more interesting"*
*"put the price on the word fifty thousand"*

You are not describing CSS. You are describing what looks wrong.

Step 3 — render

Say "render it". HyperFrames plays the timeline frame by frame and encodes it. Then when you are happy, say "now export it in 4K" — same page, same code, rendered at 2160×3840. You get an MP4. Done.

Prompts worth keeping

Change the look — *"Make it a light orange theme instead — cream cards, black headings, orange accents. Keep the captions white-to-orange as they are."*

Change the music — *"Use this mp3 instead, start it 20 seconds in, and keep it low."*

Two versions at once — *"Give me two versions from the same file, one dark and one light, so I can test both."*

A second video — *"Do the same thing for this new video, same style."*

That last one is the payoff. Once the first is built, every video after it is one sentence.

Three things to always say

"The theme is for the graphics, not my footage." Otherwise your face gets colour-graded to match the design.

"Use a different UI element on each screen." Left alone, it repeats the same card.

"Show me a picture of each screen before rendering." This is the one that catches real mistakes.

What actually goes wrong

The code always passes its own checks. That is not the same as being right.

Things that looked perfect to the computer and wrong to me: a phone graphic that silently jumped to the corner of the screen, a button whose text ended up the same colour as its background, an animated background that rendered pure black.

Every one was obvious the moment I looked at a still. None were caught automatically.

So the real method is: Claude writes it, you look at it, you say what's wrong in normal words, it fixes it. That loop is the whole skill.