explainroo

Explainer videos made by your AI agent.
Free and open source. The voice, the timing and the rendering run on your computer.

Website  ·  Example videos  ·  Docs  ·  AGENTS.md

https://github.com/user-attachments/assets/6dd5dc32-c975-4e0e-8cd4-2ef3ccc11e61

_{A coding agent made this video with explainroo. You can also watch it on explainroo.com.}

Make a video

[!TIP]
Give your coding agent this repo and tell it what the video should explain.
It works with Claude Code, Codex, Pi and other coding agents. Right now it
works best with Claude Code and Opus 5.5.

Copy this into your agent and put your topic in place of the brackets:

Make me a short explainer video about [your topic].
Use explainroo for it: clone https://github.com/vincentsch/explainroo,
read its AGENTS.md and follow the steps.

The agent sets up explainroo, makes the video and checks it. You get an MP4
file.

How does it work?

An explainer video is a short video where a voice explains a topic and
drawings appear while it speaks. For explainroo, the agent writes two files.
script.md has the words the voice says. scenes.js draws the pictures with
a bit of JavaScript, and each drawing can appear on a word from the script.
explainroo does the rest:

• Voice. Kokoro, an open
  voice model, reads the script aloud. It has 28 voices and needs no account
  or API key.
• Timing. Whisper listens to the
  recording and notes when each word is spoken.
• Pictures. Chrome runs in the background and draws the frames. The lines
  can look hand drawn (Rough.js), and there are 1,800
  icons from Lucide. A scene can also show charts, code
  or your own screenshots.
• Sound. explainroo makes its own background music for each video and
  adds small sound effects. The music gets quieter while the voice speaks.
• File. ffmpeg puts it all together into an MP4.

An agent can't watch a video, so explainroo gives it other ways to check its
work. It saves stills of the scenes and a sheet of small frames for the whole
video. A layout check finds text that is cut off or overlaps, and a speech
check finds words the voice got wrong.

None of this leaves your computer, and it costs nothing. Your coding agent is
a separate service with its own terms and prices. If you want, the agent can
also make illustrations with an AI image model through OpenRouter, and you pay
for each image.

Looks

There are five looks: paper, clean, chalk, blueprint and midnight. You change
a video's look with one setting in video.json. Here is one frame in each
look, from the example videos.

Sizes

You pick the size for the place the video goes. YouTube videos are wide, and
Shorts, TikTok and Reels are tall. Instagram and LinkedIn posts use 4:5, and
there is a square size too. Shorts, TikTok and Reels put their own buttons
over the video, and explainroo keeps your text out of those spots.

Tall, 4:5 and square videos get captions that light up word by word.

Pace

"pace": 1.2 in a video's video.json makes the voice, the pauses and the
animations 20% quicker. The music gets a little quicker too. Pace goes from
0.7 to 1.6, and 1 is normal.

Product demos

explainroo can also make product demos, the videos software companies make to
show their app. The agent rebuilds the app's screens from its code or its
website, with the same colors, fonts and button labels. A mouse pointer then
clicks through the screens and types into the fields. Tell your agent which
product it is and where to find its code or website.

Here are the demos for Unspar
and Vroni, two of my
own products. The files for the Unspar demo are in
examples/unspar-demo. explainroo.com also has
unofficial demos of Gmail, ChatGPT and Claude.

Install it yourself

You need Node.js 20.11 or newer, ffmpeg, and Chrome or Chromium. The first
setup downloads the voice and timing models once, about 400 MB together. You
don't need a graphics card. I develop and test explainroo on Linux. It should
work on macOS and Windows, but I have tested it less there.

git clone https://github.com/vincentsch/explainroo.git
cd explainroo
npm install
node bin/explainroo.js doctor --fetch

Then start your agent in the explainroo folder and ask for a video, for
example "Make a 60 second video about how HTTPS keeps a password secret." The
agent follows AGENTS.md and saves the video as
videos/<name>/out/video.mp4. The example videos are in
examples/, and the full documentation is on
explainroo.com.

The watermark

Each video has a small "explainroo.com" in one corner. "watermark": false in
video.json turns it off. Please keep it if you can, because that is how
other people find explainroo.

Credits and license

explainroo is MIT licensed. The voice comes from
Kokoro, and the word timing from
Whisper through
Transformers.js. The
drawings use Rough.js and Lucide
icons. Playwright runs Chrome, and
ffmpeg makes the video file. The fonts are under the SIL
Open Font License.