Animations & Videos · · 4 min read
How to Create Animated Explainer Videos With Claude
Claude doesn't press record. It writes the code that draws every frame, then renders it into an MP4 on your computer. Here's the full workflow, from one idea to a finished short.
By Florent, Oversight
If you ask Claude in a normal chat to "make me an explainer video", you'll get a script, maybe a storyboard, and no video. That's not Claude being lazy. A chat model writes text and code; it doesn't have a video editor.
The trick is to stop asking for a video and start asking for the code that draws one. Every animated explainer is just a few hundred frames. If Claude can write a program that draws frame 1, frame 2, frame 3 and so on, a free tool like ffmpeg can stitch them into an MP4. Claude Code can run that program on your own computer, look at the frames it made, and fix what's wrong.
That's how my videos are made, including the one below. It has had 662,771 views.
What you need
- Claude Code. This is Claude running in your terminal, where it can create files and run commands. It needs a paid Claude plan (Pro or Max) or Anthropic API credits.
- Node.js 18 or newer. Free, from nodejs.org. It runs the render scripts.
- A drawing library and ffmpeg. In my setup that's
@napi-rs/canvasto draw each frame andffmpeg-staticto encode the MP4. Both are free and install with npm, so Claude can set them up for you. - Optional: a voiceover. Most of my shorts work without one, because the captions carry the story. If you want one, record it yourself or use a text-to-speech tool you're licensed to use.
You don't need After Effects, a GPU or any API keys for the rendering itself. It all runs locally.
The workflow, step by step
1. Pick one idea, not a topic
"How credit cards work" is a topic. "Why your card number passes a check before it's ever sent to the bank" is an idea. Short explainers live or die on having exactly one surprising thing to show.
A good test: can you say the payoff in one sentence? If not, narrow it down before you open Claude.
2. Get a script with beats, not paragraphs
Ask Claude for the script as a list of short beats, each one a caption that fits on a phone screen. For a 12–15 second short that's usually four to six beats.
Write a 12–15 second explainer script about [your idea].
Return 4–6 beats. Each beat: one caption under 8 words,
and one line describing what the viewer should see.
The first beat must create a question. The last beat answers it.Read it out loud. If a beat needs a second sentence to make sense, cut or merge it.
3. Turn the beats into a storyboard
Now ask Claude to plan the visuals for each beat: what's on screen, what moves, how long it stays. This is where you decide the style: colours, fonts, the kind of motion (soft and slow, or snappy and punchy). Writing the style down once, as a short style guide, keeps every video looking like it belongs to the same channel.
4. Have Claude Code build the scene
This is the part a chat can't do. In Claude Code, ask it to write a Node script that draws each frame of the storyboard with canvas, at 1080×1920 and 30 frames per second, then encodes the frames into an MP4 with ffmpeg.
The first render is rarely right. That's fine. Ask Claude Code to render a few still frames from different beats and look at them before rendering the whole video. Fixing a caption that overlaps a shape takes seconds at this stage.
Tip: ask for timing in seconds per beat in one config object at the top of the script. Then "make beat 3 half a second longer" is a one-line change instead of a hunt through the code.
5. Render, watch, adjust
Render the full MP4 and watch it on your phone, not your monitor. That's where it'll be seen. Things to check:
- Can you read every caption before it disappears?
- Does the first second make you want to see the second?
- Does anything move for no reason? Motion should point at the idea.
Tell Claude Code exactly what to change ("beat 2 caption on screen for 1.5s more", "the circle should grow, not fade in") and render again.
6. Add audio if you want it, then post
Drop in a voiceover or music if you're using one, have ffmpeg mix it in, and post the MP4 yourself.
Why a reusable style matters more than any single prompt
The first video takes the longest, because you're inventing the look, the timing and the scripts all at once. The second one is much faster if you saved what worked: the style guide, the render script and an example. Then you only bring a new idea and Claude reuses everything else.
That's exactly what a Claude skill is: a folder with instructions (a SKILL.md), references and scripts that Claude Code loads when it needs them. Package your style as a skill once, and every new video starts from a working pipeline instead of a blank page.
Common mistakes
- Asking for "a video" in one prompt. You'll get something generic. Script, storyboard and scene as separate steps give you control.
- Too many ideas per video. One payoff per short.
- Skipping the still-frame check. Rendering the whole video to spot one overlap wastes the most time.
- Tiny captions. Design for a phone held at arm's length.
If you want to try this without building the pipeline yourself, the styles I use for my own videos are on the video styles page, with scripts, references and step-by-step instructions. Rays is free with an account.