ReelFlat vector science explainer videos with Claude Code
Claude Code can make a flat vector science explainer in code. People often search for a "Kurzgesagt-style" video, and what they usually mean is flat shapes, a small bright palette, a soft glow, depth built from layers and a calm narrator. Claude writes each scene as HTML and canvas code, HyperFrames renders it to MP4 on your computer, and at no point is a video model involved.
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. Without them you get generic motion graphics.
Build everything from flat shapes. Planets, cells and creatures are circles, rounded rectangles and simple curves. Leave out outlines, or use one thin outline in a darker shade of the fill.
Keep the palette to 4 or 5 colours: one dark background, two main colours, and one accent for whatever the viewer has to look at. Write them down as hex values.
Use soft glow and simple gradients. A light source glows, and a sphere gets one gentle gradient. Nothing should look like a photo.
Build depth with layers. Background, middle and foreground go on separate layers, and the further back a layer is, the darker and smaller it gets.
Move the camera slowly with parallax. It drifts, the layers move at different speeds, and there are only a few hard cuts.
Show one idea per shot and let a narrator carry it. The picture shows what the sentence says, at the moment it says it.
Steps with Claude Code
1. Plan first
Ask for a scene plan before any code gets written. While it's still text, fixing the science or the order is easy:
Plan a 60-second explainer about why the sky is blue. One idea per scene, a narrator line for each, flat vector look, palette of 5 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,4,8,12 -o snapshots
snapshot saves PNG frames at the seconds you list. Hold them up against the rules above. Does the palette stay the same? Is there one thing to look at? Can you see the parallax? 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, and for a vertical version, YouTube Shorts in 9:16 with Claude Code.
A prompt to paste
Make a 45-second 16:9 science explainer about how a vaccine trains the immune system. Flat vector look: flat shapes, no outlines, a dark navy background, 4 colours plus one accent, soft glow on light sources, three depth layers, slow parallax camera. One idea per scene. Plan first, then show me stills of scene 1 before you build the rest.
Which of my styles come closest
A style kit has these rules already written down, along with the characters, scene templates and a checklist Claude grades its own stills against. Out of my 121 styles, these are the closest to a flat science explainer:
| Style | Why it fits |
|---|---|
| Isometric infographic | Flat shapes in clean layers, made for how-things-work topics |
| Data viz | Numbers and charts that build on screen |
| Sketch explainer | Drawn diagrams that appear as the narrator speaks |
| Whiteboard explainer | The plainest version: one idea drawn at a time |
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 drawn, designed pictures and can't make realistic footage. Very detailed illustrations, like a whole city with hundreds of windows, take Claude a lot of rounds of stills. Keep each shot simple, which suits this look 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.
Can I use Remotion instead of HyperFrames?
Yes, the visual rules work in any engine. The commands on this page are for HyperFrames. My Remotion vs HyperFrames post compares the two.
How long does a render take?
On a 4-core machine with 2 workers, my kits need about 1 to 3 seconds of render time per second of film.
Sources
HyperFrames on GitHub (Apache-2.0). Commands and render times come from my animated videos guide and the render notes in my kits.