ReelHow to make animated videos with Claude Code without a video model
Claude Code can make an animated video without calling any video model. It writes the scenes as HTML, CSS and JavaScript, and a renderer such as HyperFrames or Remotion records them frame by frame into an MP4 on your own computer. You get drawn animation (cartoons, diagrams, cut paper, motion graphics), with the same characters in every shot.
This is the method behind our own YouTube channels, among them Primal Bound and The Money Fools. Every video on them is animated in code by Claude Code on one small server. Here is how to set it up, which free tools to start with, and where a style kit like ours fits in.
What you need
- A paid Claude plan that includes Claude Code. A film takes a fair amount of usage, so a bigger plan lets you make more films a day.
- Node.js 22 or newer and FFmpeg. HyperFrames needs both.
- A normal computer. Rendering runs on the CPU; you do not need a GPU. A long film takes a while on a laptop.
Rendering costs nothing per minute because nothing is sent to a video service. The cost is your Claude plan, and Claude Code usage counts toward its limits.
Step 1: install Claude Code and a renderer
Install Claude Code with Anthropic's setup guide, run claude once and log in. Then check the tools HyperFrames needs:
node --version # v22 or newer ffmpeg -version npx hyperframes doctor
doctor lists anything missing. HyperFrames downloads its own Chrome on the first run.
Step 2: pick a starting point
You can start from nothing and describe the look yourself, or give Claude a set of instructions it can follow. Free options, checked on GitHub on 16 October 2026:
| Tool | What it gives Claude | Licence |
|---|---|---|
| HyperFrames (HeyGen) | An engine: HTML scenes rendered to MP4, plus official skills | Apache-2.0 |
| Remotion agent skills | Skills for Remotion, which builds video in React | Remotion's own licence: free for individuals and companies up to 3 people, paid above |
| cth9191/animate | A Claude Code plugin for procedural animation with 7 built-in styles | MIT |
| latent-spaces/brag | One-command launch videos | MIT |
| claude-code-video-toolkit | A video toolkit for Claude Code | MIT |
Any of these will get you a first video today. What they do not give you is a finished look. Without direction, Claude falls back to the same choices every time: centred text, a gradient, shapes sliding in.
A style kit fills that gap. ReelStyles is ours: a library of 72 film styles, each one a folder with the palette, the characters, scene templates, motion rules and a checklist the agent grades its own frames against. For explainers, look at Isometric infographic or Whiteboard explainer; for stories with a cast, Round-head toon. The kits are plain files, so they also work with Codex, Cursor, Gemini CLI and other agents that read files and run a terminal; our example films were all made with Claude Code. They render with HyperFrames, so step 1 stays the same. You can also write your own style notes and keep them in your project; the steps below work either way.
Step 3: plan before you animate
Start Claude Code in an empty folder and ask for a plan first, in plain words:
Plan a 60-second video about how a hunter-gatherer child spent the day. Open on a modern kid with a tablet, then cut to the child at the fire. Show me the scene plan before you write any code.
Read the plan. Cut scenes, change the order, fix facts. Changing a line of text now costs nothing; changing a rendered film costs a render.
Step 4: build one scene and look at a still
Ask Claude to build scene 1 and show you a still. With HyperFrames that is two commands:
npx hyperframes lint . npx hyperframes snapshot . --at 1,4,8,12 -o snapshots
lint catches broken scenes. snapshot writes PNG frames at the seconds you name, so you can look at the picture without rendering the film. Stills are cheap and renders are slow, so do at least three rounds here: first the layout, then the acting and composition, then the polish. Our kits ask Claude to grade each still against the style's checklist before moving on.
Step 5: render and check the file
npx hyperframes render . -o out.mp4 --quality looks --workers 2
On a 4-core machine with 2 workers, our kits take about 1 to 3 seconds of render time per second of film. Use --quality draft for a quick motion check first. When the file is done, check its length and size with ffprobe and watch it once at full speed.
Example prompts that work
These are the test prompts we give a fresh Claude Code for our Primal toon style:
- "Make a 40-second 16:9 video about how people spent a winter evening 10,000 years ago versus today, and render it to out.mp4."
- "Make a 45-second 16:9 video about how our ancestors kept food from spoiling, ending on one question for the viewer."
Name the style, the length and the frame size. Ask for the plan and a still before the render.
What this method cannot do
It makes drawn and designed looks: cartoons, paper, paint, diagrams, motion graphics and toy-like 3D. It does not make realistic footage of people or places. For that, use a video model and expect to pay per second.
Sources
Checked 16 October 2026: HyperFrames on GitHub, Remotion licence, remotion-dev/skills, cth9191/animate, latent-spaces/brag, digitalsamba/claude-code-video-toolkit. Render times are from the render notes in our kits.