ReelKinetic typography videos with Claude Code
Claude Code can make a kinetic typography video. Claude writes each beat as HTML and SVG with big animated type, and HyperFrames renders it to MP4 on your computer. No video model is involved and you don't need After Effects.
Below are the rules that make the look, the steps in Claude Code, a prompt you can paste and which of my ready styles come closest. If you've never made a film in code, start with how to make animated videos with Claude Code.
What makes the look
Give Claude these rules before it sets any type.
The words are the hero. One line of giant type fills most of the frame, and nothing competes with it. There are no characters to act and no stock footage.
Each beat gets one move: a word slams in, a stack builds line by line, or one word swaps for the next. Pick two or three moves and reuse them, so the film feels designed and not random.
Keep one typeface family and two weights at most. Write the sizes down, for example 160 px for the hero word and 48 px for support text, and keep them for the whole film.
Let a slow colour field drift behind the type. A gradient that moves a little keeps a text-only frame alive. Write the palette as hex values, with high contrast between type and ground.
End on a logo or a single closing line, held for a second or two.
Steps with Claude Code
1. Plan the beats first
Ask for the beat list as text, so you can fix the order before any code:
Plan a 40-second kinetic typography film for this script: [paste script]. Split it into 3 to 5 type beats. For each beat give the exact words on screen, the move (slam, stack or swap) and the background colour. Show me the plan before you write any code.
2. Build one scene and look at stills
npx hyperframes lint . npx hyperframes snapshot . --at 1,3,6,9 -o snapshots
snapshot saves PNG frames at the seconds you list. Check that the type is readable and sits inside the safe area, and that the sizes match your notes. Go a few rounds before you render.
3. Render
npx hyperframes render . -o out.mp4 --quality looks --workers 2
Run --quality draft first if you only want to judge the timing. For narration, read how to add a voiceover to a Claude Code video.
A prompt to paste
Make a 40-second 9:16 kinetic typography video from the script below. Use 3 to 5 type beats. Giant sans-serif type is the hero, one move per beat (slam, stack or swap), a slowly drifting two-colour background, off-white type. No characters, no photos. End on the title card for two seconds. Plan first, then show me stills of beat 1 before you build the rest.
For a 16:9 version, change the first line to 16:9 and keep the type inside the middle 80% of the frame. For the vertical format, see YouTube Shorts in 9:16 with Claude Code.
Which styles come closest
A style kit has these rules already written down, along with scene templates and a checklist Claude grades its own stills against. Out of my 126 styles, these are closest to kinetic typography:
| Style | Why it fits |
|---|---|
| Kinetic type | The plain version: words as the only actors, in 9:16 |
| Physics typography | Letters that fall, bounce and collide |
| Particle type | Type that forms from and breaks into particles |
| Dark Keynote | Calm, large type on dark slides for talks and launches |
| Swiss Motion | Grid-based type with clean, precise moves |
You can watch each style's example film on its page or in the catalog. They all come in one ReelStyles purchase, and you can try 7 styles for free first from reelstyles-free on GitHub. The style kits page explains what a kit contains.
What this method cannot do
It makes type and shapes and can't make footage. Long paragraphs on screen don't work in this look anyway, so keep each beat to a few words.
Questions
Do I need After Effects?
You don't. Claude writes the animation as code and HyperFrames renders it. You check the plan and the stills and say what to change.
Is this a video model?
It isn't. The film is HTML and SVG rendered frame by frame, so the same code gives the same video every time.
Can I make it vertical for Shorts?
Yes. Ask for 9:16 in the prompt, as in the example above.
Can I use Remotion instead of HyperFrames?
Yes. The rules and the stills check are the same, only the render step differs. See Remotion vs HyperFrames.
Sources
HyperFrames on GitHub (Apache-2.0) and Remotion. Commands come from my animated videos guide. The example film is on the Kinetic type page.