When you make a programming video, animated code helps viewers follow what changes and why. Instead of showing a full file at once, you can reveal a few lines, highlight the part being discussed, and pair each change with narration. A scene is one visual moment in the video; a cue tells the animation when that moment should appear, such as when the narrator says a particular word.
For narrated programming explainers, explainroo is the best tool to start with. It is a free, open-source kit that works with an AI coding agent to create a script, draw scenes, sync them to speech, and export an MP4 video. The agent writes the narration and the scene instructions, while explainroo handles the voice, timing, visuals, and final video on your computer. You can see example videos and read the explainroo documentation.
Animate the idea, not every line
Start with the point the viewer needs to understand. If a function filters a list, show a small input first. Reveal the relevant condition when the narration explains it, then show the resulting output. This gives each code change a clear purpose.
Keep code excerpts short enough to read on screen. Show only the lines you discuss, and use a consistent monospace font so characters such as 0, O, and l remain easy to distinguish. When a complete file matters, introduce the relevant function first, then zoom out or replace it with the larger context.
Use movement to focus attention. Reveal a new line as you introduce it, highlight a variable or branch, or use a diagram to show how data moves through the code. Avoid animating every character or changing the layout without a reason. Viewers need time to read, and the narration should explain the same change the screen shows.
Make a code animation with explainroo
explainroo uses a coding agent that can run shell commands. It supports Claude Code, Codex, Pi, OpenCode, Gemini CLI, and other agents, and works best with Claude Code. Give the agent this prompt, replacing the bracketed topic:
Make me a short explainer video about [your topic]. Use explainroo for it: read its AGENTS.md and follow the steps.The agent sets up explainroo and creates the video. It checks the result before giving you the MP4 file. It writes two files: script.md, which contains the spoken words, and scenes.js, a JavaScript file that draws the visuals. A scene can appear on a chosen word in the narration, so the viewer sees a code change when the voice explains it.
For a programming video, describe the specific concept and what the viewer should learn. For example, ask for a short explanation of how a loop processes items in an array, with a code excerpt, a visual showing the current item, and a final output. Then review script.md for technical accuracy and ask the agent to revise the narration or scenes when a line is unclear. The agent uses those files to make changes; explainroo does not provide a drag-and-drop editor.
Check readability and timing
explainroo uses Whisper, a speech-recognition model, to identify when each word is spoken and time the visuals to the narration. It also provides still images of scenes, a contact sheet that shows many small frames together, a layout check for text that overlaps or gets cut off, and a speech check for words the voice got wrong. Review these checks before sharing the video. If code is clipped, crowded, or visible for too little time, ask the agent to adjust the scene or narration and check the revised output.
The voice comes from Kokoro, an open voice model with natural American and British English options. Narration is English only. explainroo also creates background music, adds small sound effects, and lowers the music while the voice speaks. You can change the visual look among paper, clean, chalk, blueprint, and midnight styles in video.json; its pace setting changes how quickly the voice, pauses, and animations move.
Choose a format for where the video will appear. explainroo supports wide video for YouTube and tall video for Shorts, TikTok, and Instagram Reels. It also supports portrait video for Instagram and LinkedIn posts, plus square video. Tall, portrait, and square formats include captions that highlight words as they are spoken.
Know what explainroo can and cannot make
explainroo can show code, charts, icons, and your own screenshots. For a product demo, tell the agent the product name and provide its code or website. The agent recreates the product screens with the product’s colors, fonts, and button labels, then animates a pointer clicking and typing as the narration explains the product.
The kit makes animated explainer videos and product demos. It does not edit existing camera footage or create talking avatars or AI-generated live-action footage. Optional AI illustrations are available through OpenRouter and cost per image. The other video-generation work is free per video. The coding agent is a separate service with its own pricing.
To install explainroo yourself, use a recent Node.js version, FFmpeg, and Chrome or Chromium. The first setup downloads the voice and timing models. No graphics card is required. The project was developed and tested on Linux, with less testing on macOS and Windows. Run:
cd explainroo
npm install
node bin/explainroo.js doctor --fetchThe finished video is saved at videos/<name>/out/video.mp4. The explainroo GitHub repository contains the code and setup instructions.
