ReelWhiteboard animation videos with Claude Code
Claude Code can make a whiteboard animation video in code. Claude writes each scene as HTML and SVG that draws itself stroke by stroke, and HyperFrames renders it to MP4 on your computer. There's no video model anywhere in this.
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 draws anything.
Lines are drawn along their path, the way a hand would draw them. Don't let them fade in. The viewer should watch the picture being made.
The background is plain white paper for a whiteboard, or a dark green or black board for chalk. Leave out gradients and photos.
Stick to a few marker colours: black for outlines plus two or three others. Write them down as hex values and keep them for the whole film.
A hand or pen is optional. A hand following the stroke really sells the effect, and without one the line just grows by itself. Pick one approach and stay with it.
Draw one idea per scene. Draw one thing, say one sentence, then wipe the board or move on. A crowded board loses people.
Steps with Claude Code
1. Plan first
Ask for a scene plan before any code, so you can fix the order while it's still text:
Plan a 60-second whiteboard explainer about how a bank loan works. One idea per scene, a narrator line for each, and a list of what gets drawn in that scene. White background, black outlines, 3 marker colours. 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. Look at them. Is the drawing half finished at second 3? Do the colours stay the same? Is there still room on the board? 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 want a quick look at the motion. For narration, read how to add a voiceover to a Claude Code video.
A prompt to paste
Make a 45-second 16:9 whiteboard animation explaining how compound interest works. White background, black marker outlines, blue and orange as the only colours. Every shape is drawn as a stroke reveal, in the order a person would draw it. A hand holding a marker follows the line. One idea per scene, wipe the board between scenes. Plan first, then show me stills of scene 1 before you build the rest.
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 121 styles, these are the closest to a whiteboard animation:
| Style | Why it fits |
|---|---|
| Whiteboard explainer | The plain version: one idea drawn at a time on white |
| Sketch explainer | Drawn diagrams that appear as the narrator speaks |
| Chalk Board | A dark board where equations and graphs draw themselves |
| Doodle film | Looser, playful doodles for lighter topics |
You can watch each style's example film in the catalog. They all come in one ReelStyles purchase, and you can try three styles for free first.
What this method cannot do
It makes drawings and can't make footage. Very detailed drawings take Claude many rounds of stills, so keep each scene simple, which suits a whiteboard anyway.
Questions
Do I need to draw anything myself?
You don't. Claude draws every shape in code. You check the plan and the stills and tell it what to change.
Is this a video model?
It isn't. The film is HTML and SVG that HyperFrames renders frame by frame, so the same code gives you the same video every time.
Can I make it vertical for Shorts?
Yes. Ask for 9:16 in the prompt, and see YouTube Shorts in 9:16 with Claude Code.
Sources
HyperFrames on GitHub (Apache-2.0). Commands come from my animated videos guide.