explainroo

vincentschMIT活跃维护

把一段脚本自动变成带旁白的 MP4 讲解视频：本地 Kokoro 语音合成、Whisper 词级时间对齐，再用 Canvas 渲染动画，适合做产品演示。

Explainer videos and product demos made by your AI agent. Free and open source: a local voice (Kokoro), word timing (Whisper) and a canvas renderer turn a script into a narrated MP4.

v0.5.0发布于 2026-11-09 08:10 UTC1,193star +190 / 7 天115fork同步于 2026-11-10 17:52 UTC

讲解视频生成语音合成词级时间对齐 Canvas 渲染产品演示

对比 GitHub 官网 ai-agents animation canvas claude-code codex

怎么上手

由 README 提炼，执行前请确认

原文

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

硬件要求按 README 说明

不需要显卡，CPU 即可运行；需安装 Chrome 或 Chromium。首次安装会下载约 400 MB 的语音与对齐模型。

下载：源码 zip·GitHub Releases（安装包）本站不镜像安装包

项目说明

由 README 自动翻译提炼

没人工点评？写下你的经验

本地跑语音、对齐和渲染，把脚本变成带旁白的 MP4 讲解视频

把一段脚本自动变成带旁白的 MP4 讲解视频：本地 Kokoro 语音合成、Whisper 词级时间对齐，再用 Canvas 渲染动画，适合做产品演示。

核心能力

用 Kokoro 本地合成 54 种声音的旁白
用 Whisper 对齐每个词的发音时间
Chrome 后台逐帧绘制场景并加运镜与动态模糊
自动生成背景音乐、音效、字幕和封面图
支持 16:9、9:16、4:5、方形多种尺寸输出

容易踩的坑

需要 Node.js 20.11 以上并预装 ffmpeg 和 Chrome/Chromium；首次运行要联网下载约 400 MB 模型；西语、法语、意语、葡语、印地语需另装 espeak-ng，中日语需 Python 加 misaki。

内容由模型根据 README 生成，可能不完整或不准确，以官方文档为准。看原文 README

最近发版

5 个版本v0.5.0

全部 release

v0.5.0explainroo 0.5.0最新正式版2026-11-09 · 2026-11-09 08:10 UTC
explainroo 0.5 runs with npx, so you don't have to clone it. It can also use outside services on your own key or login, like AI video clips and posting to your channels. A whole video still needs no account and no key.

Tell your coding agent: "Use explainroo for it: run npx --yes explainroo docs and follow what it prints."

Run it with npx
- npx --yes explainroo docs prints a short start page for coding agents. docs <topic> prints one topic, and docs <topic> <section> prints one part of it, so an agent reads only what it needs.
- Every command has its own --help. The examples come with the package, and doctor shows where they are.
- explainroo set <project> <key> <value> changes one setting in video.json, and it checks the value first.
Outside services on your own key
- explainroo services lists the choices for each step, with the free ones first. Each one says what it costs and what leaves your computer. explainroo connect tests a key or a sign-in and saves it.
- explainroo clip buys short AI video clips through OpenRouter. It shows the price first, and "clipBudget" in video.json sets one budget for all the clips of a video. The final cost is known after the job and can come out a little higher than the price.
- explainroo package writes a folder for one platform: the video at the right size, the post text, captions, a cover and an AI label.
- explainroo publish posts a package after a dry run and a yes. It posts to YouTube directly, or through Buffer and Blotato for the other platforms. With --draft, Buffer keeps the post as a draft.
- Buffer takes no file upload, so it needs a public link to the video. publish checks that the link leads to a file of the same size before it posts.
- A project keeps a record of what was paid for and posted in its history/ folder. The same request uses the file it already bought, and a post never goes out twice. explainroo history shows the record.
- explainroo share will give a video a page on explainroo.com. That service doesn't run yet, so for now the command says so and sends nothing.
Voices and languages
- German narration works with ElevenLabs, with Cartesia, or with your own recording. Kokoro has no German voice.
- doctor --language es checks what a language needs before you have a project. On Debian and Ubuntu, doctor --fetch --language es sets up espeak-ng without root.
- One project can make the same video in several languages, with a script for each.
Length and timing
- "targetSeconds" in video.json gives a video an exact length. voice --estimate prints the expected length before anything is made.
- explainroo words lists the spoken words of a scene with their times, for picking cues. A cue like 'fills#2' means the second time a word is spoken.
- Moving a marker no longer makes the narration again.
Short videos and sizes
- "sizes" in video.json gives one size settings of its own, like bold captions and a quicker pace for TikTok only. --platform tiktok on check, still, sheet and render shows each frame the way the TikTok package will.
- "captions": "bold" shows two to four big words at a time. s.short draws a hook title that is there on the first frame.
- A cover change no longer needs a new render.
Checks
- check now sees shapes and arrows. It finds shapes that partly cover each other, and lines or text that run through a shape. It also finds text cut at the frame edge while the camera holds, typing that never finishes, and stretches where the screen is empty. Warnings name the element.
- The speech check accepts words that sound the same, two words heard as one, units like "km/s", and numbers written in another style. It lists the words it only nearly heard, with their times. voice quotes what it heard for any word it couldn't confirm.
- render keeps the sound at -1 dBTP or lower, and verify fails a video that clips. verify ends with one line that says whether the vid
v0.4.1explainroo 0.4.12026-10-20 · 2026-10-20 07:40 UTC
查看更新说明
explainroo 0.4.1 fixes three things about how the camera frames a scene.

The camera
- An arrow's label now stays whole while a close-up holds. A chart's labels, values and axis ends stay with the chart.
- When an icon without a label already fits the shot, the camera no longer moves in on it. The same goes for a box without words. s.focus() still asks for a close-up of anything.
- When a short scene has no time for the final pull-back, its last camera move now shows the whole picture. Close-ups of code, terminal commands and areas chosen with s.focus() can still end a scene.
Other changes
- If the browser page that draws the video loads without its scripts, explainroo now tries once more. It already did that when the page took too long to load.
- AGENTS.md has four layouts to start from (one big number, a comparison, steps in order, a main thing with its parts) and four questions for planning each scene.
Projects you made with 0.4 get these changes when you render them again. All 32 videos on explainroo.com now use the updated camera.
v0.4.0explainroo 0.4.02026-10-15 · 2026-10-15 15:53 UTC
查看更新说明
explainroo 0.4 films each scene with a camera, and adds spring motion and motion blur.

The camera
- Before anything is drawn, explainroo measures each element of a scene. The camera opens on the picture and widens when something new would not fit. Something new that already fits needs no move.
- Now and then the camera moves in on what the voice talks about, when the viewer has time to look. Near the end of the scene it pulls back to show the whole picture.
- While a shot holds, cards and labels are never cut in half. Shots stay clear of the captions and of the buttons on Shorts, TikTok and Reels.
- Highlighted code lines, terminal commands and the new s.focus() get close-ups when they are small in the shot.
- s.camera() still takes over a scene's camera, and "camera": "still" in video.json turns it off. Projects you made before get the camera when you render them again.
Motion
- Entrances move on a spring and lift their shadow while they land.
- Final renders add motion blur to frames where something moves. They take about two to three times as long. Drafts skip it, and "motionBlur": false turns it off.
- Large headlines in the clean, midnight and editorial looks get slightly tighter letter spacing.
The videos attached here were made with explainroo 0.4. Their sources are in examples/:
- how-dns-works.mp4: how DNS finds a website (chalk look)
- explainroo-intro.mp4: how explainroo makes a video (paper look)
All examples, more videos and the documentation are on https://www.explainroo.com
v0.3.0explainroo 0.3.02026-10-13 · 2026-10-13 21:46 UTC
查看更新说明
explainroo 0.3 narrates in Japanese and Mandarin Chinese, adds a sixth look, and gives the speech check a better ear.

Japanese and Mandarin Chinese
- Set "language": "ja" or "zh" in video.json. Kokoro's 5 Japanese and 8 Mandarin voices read the script through misaki, the pronunciation library they were trained with. Install Python with misaki once. doctor shows whether it is found.
- Write without spaces. Cue words, phrases, markers and {shown|spoken} work as in the other languages.
- Latin words such as API are read in English. Japanese decimals are read digit by digit after the point.
- The speech check compares sounds, so a word that Whisper writes with other characters of the same sound still counts. Japanese is compared by kana reading, and Chinese by pinyin, with Traditional and Simplified characters treated the same.
- Captions and subtitles join words without spaces, and keep particles and counters with their words.
- Noto Sans JP or SC is downloaded once and works in every look. An exported web player keeps only the characters its video shows, about 30 KB per font.
Also new
- The editorial look: serif headlines and fine lines on warm paper.
- The English speech check reads years and ordinals the way the voice says them, such as 1900 as "nineteen hundred" and 21st as "twenty first".
- Web players include the Hindi font only when a video shows Hindi text.
- The tests run on Linux, macOS and Windows for every change. Math formulas now work on Windows. If the page that draws the frames hangs while loading on a busy machine, it is tried once more.
The videos attached here were made with explainroo. Their sources are in examples/:
- leap-years.mp4: why we have leap years (editorial look)
- leap-years-ja.mp4: the same question in Japanese (chalk look)
- password-storage-zh.mp4: how websites store passwords, in Mandarin (midnight look)
All examples, more videos and the documentation are on https://www.explainroo.com
v0.2.0explainroo 0.2.02026-10-13 · 2026-10-13 16:32 UTC
查看更新说明
explainroo 0.2 brings more voices, more things a scene can show, and more ways to publish a video.

Voices and languages
- Narration in Spanish, French, Italian, Brazilian Portuguese and Hindi as well as English. Set "language": "es" in video.json. The Kokoro voices for those languages need espeak-ng installed once.
- An ElevenLabs voice, or your own recording, as one take or one file per scene. Word timing, cues, captions and checks work the same for every source.
What a scene can show
- s.clip() plays video clips such as screen recordings, frame-exact, with their sound if you want it.
- s.math() typesets TeX formulas, which are written on in the hand-drawn looks.
- s.code() takes a list of steps and animates code from one version to the next.
Publishing
- Every render also writes .srt and .vtt subtitle files, a cover image, and YouTube chapters when scenes name them.
- --format gif, and --transparent WebM or MOV for video editors.
- --size renders one project in several sizes, for example for YouTube and TikTok.
- explainroo export writes a web player that draws the video live, sharp at any size, for docs sites and iframes.
Product demos and looks
- explainroo capture <url> saves a live site's screenshots, colors, fonts, logo and wording.
- A project can bring its own look in a JSON file that extends a built-in look. Thanks @mrthommaso for the proposal (#4).
- check suggests a readable color for text with low contrast.
Fixes
- Long videos render again: page uploads now go up in pieces (#2, thanks @mrthommaso).
- On macOS the CLI exits cleanly after loading the speech models (#1, thanks @meminens).
- Burned-in captions split each sentence into balanced phrases, and the cover leaves them out.
- The speech check confirms a word written as {shown|spoken} when it hears the shown form.
The videos attached here were made with explainroo. Their sources are in examples/:
- callbacks-to-async-await.mp4: callbacks, promises and async/await with code steps (midnight look)
- circle-area.mp4: why a circle's area is πr², with formulas (chalk look)
- why-is-the-sky-blue-es.mp4: why the sky is blue, narrated in Spanish (paper look)
All examples, more videos and the documentation are on https://www.explainroo.com

用户点评

登录用户的真实使用记录，可按版本和硬件筛选

共 0 条

还没有人点评。第一个说出真实体验的人最有价值。

README 原文

未翻译

在 GitHub 打开

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

News

Oct 20, 2026: explainroo 0.4.1 keeps arrow and chart labels whole while a shot holds.
Oct 15, 2026: explainroo 0.4 films each scene with a camera that follows the narration.
Oct 13, 2026: explainroo 0.3 narrates in Japanese and Mandarin Chinese, and adds the editorial look.
Oct 13, 2026: explainroo 0.2 adds five more languages, other voices and video clips.

All news is on explainroo.com/news.

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 in English, Spanish, French, Italian, Brazilian Portuguese, Hindi, Japanese or Mandarin Chinese. It has 54 voices and needs no account or API key. You can also use an ElevenLabs voice or record the narration yourself.
Timing. Whisper listens to the narration 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, math formulas, code that changes step by step, your own screenshots and video clips such as screen recordings.
Camera. A camera films each scene. It moves in on what the voice talks about when there is time, and pulls back at the end so the last frame shows the whole idea. Cards and labels are never cut in half while a shot holds. Things arrive with a little spring, and the final video has motion blur, like a film camera.
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, with subtitle files, YouTube chapters and a cover image.

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. For a feed-sized player, explainroo check videos/<name> --view-width 854 also flags small text.

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 six looks: paper, clean, chalk, blueprint, midnight and editorial. You change a video's look with one setting in video.json. A project can also bring its own look, a small JSON file with its colors, fonts and background. Here is one frame in each built-in 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. One project can render several sizes: explainroo render videos/demo --size tiktok writes the TikTok version next to the wide one.

More than an MP4

Every render also writes subtitle files (.srt and .vtt) that YouTube and LinkedIn accept, a cover image for the thumbnail, and YouTube chapters when the script names them. --format gif makes a GIF for a README or a post. --transparent --format mov makes a video with a transparent background, for putting a diagram over camera footage in a video editor. explainroo export writes a small web player that draws the video sharp at any size and embeds with an iframe.

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. explainroo capture saves the live site's screenshots, colors, fonts, logo and wording first, and a real screen recording can play inside a scene too.

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 explainroo on Linux, and its tests run on Linux, macOS and Windows for every change.

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

For narration in Spanish, French, Italian, Portuguese or Hindi, also install espeak-ng, for example with sudo apt install espeak-ng or brew install espeak-ng. Japanese and Chinese need Python with misaki instead, as described in AGENTS.md.

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. MathJax typesets the formulas. Playwright runs Chrome, and ffmpeg makes the video file. For other languages, explainroo runs espeak-ng as a separate program, with phoneme rules from Kokoro's misaki, and misaki itself for Japanese and Chinese. OpenCC and pinyin-pro help the speech check compare Chinese, and HarfBuzz keeps web player fonts small. The fonts, including Noto Sans CJK for Japanese and Chinese, are under the SIL Open Font License.