explainroo README

The project's README from github.com/vincentsch/explainroo. As one markdown file: README.md.

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:

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.

Frames from five example videos, one in each look: paper, clean, chalk, blueprint and midnight

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.

Frames from example videos in four sizes: YouTube 16:9, TikTok 9:16, LinkedIn 4:5 and square

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.

A frame from the Unspar product demo: a form with a website field and an open dropdown

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.

explainroo (vincentsch/explainroo)

Searching Database…

594 ·GitHub
Explainroo
Что это?explainroo позволяет кодинг-агенту превратить сценарий в озвученное объясняющее видео или демо продукта. Он использует локальную голосовую модель для озвучки, Whisper для тайминга слов и canvas-рендерер для рисования синхронизированных иллюстраций, а затем ffmpeg собирает всё в MP4.
Это видеоредактор, которым я пользуюсь сам, или то, что мой кодинг-агент делает за меня?Это инструмент, которым управляет ваш кодинг-агент: агент пишет script.md и файл scenes.js с описанием видео, а explainroo автоматически берёт на себя голос, тайминг, рисование и рендеринг. Видео вы напрямую не монтируете.
Как сделать с ним видео?Дайте своему кодинг-агенту (Claude Code, Codex, Pi и т.д.) этот репозиторий и промпт с описанием темы, например 'Сделай 60-секундное видео о том, как HTTPS защищает пароль.' Агент настроит explainroo, соберёт видео, проверит его и сохранит результат в MP4 в videos//out/video.mp4.
С какими кодинг-агентами он работает и что нужно установить?Работает с Claude Code, Codex, Pi и другими кодинг-агентами, а сейчас лучше всего — с Claude Code и Opus 5.5. Также нужны Node.js 20.11+, ffmpeg и Chrome или Chromium; первая настройка скачивает около 400 МБ голосовых и тайминговых моделей.
Тестировался ли он на macOS и Windows или только на Linux?Автор разрабатывает и тестирует explainroo в основном на Linux; на macOS и Windows он должен работать, но там проверен меньше.
Покидают ли мои данные компьютер во время создания видео?Нет — генерация голоса, тайминг слов и рендеринг выполняются локально, и ничего не уходит с вашего компьютера (сам кодинг-агент — отдельный сервис со своими условиями).
Что за пять визуальных стилей?Видео могут использовать один из пяти стилей — paper, clean, chalk, blueprint и midnight — переключаемых одной настройкой в video.json.
Какие размеры и пропорции видео поддерживаются?Поддерживаются форматы wide (YouTube), tall (Shorts/TikTok/Reels), 4:5 (Instagram/LinkedIn) и квадрат, с пословными субтитрами на tall/4:5/квадратных видео и текстом, не попадающим под интерфейсные наложения платформ.
Умеет ли он делать демо продуктов, а не только объясняющие видео?Да — агент воссоздаёт экраны приложения по его коду или сайту с теми же цветами, шрифтами и подписями, а затем симулированный курсор мыши кликает и печатает в демо через Chrome под управлением Playwright.
Что за водяной знак и можно ли его убрать?В каждом видео в углу стоит небольшая пометка 'explainroo.com'; её можно отключить, задав watermark: false в video.json, но автор просит оставлять её, чтобы другие могли найти проект.
What are similar projects?huashu-art-motion, reelmimic, hand-drawn-explainer-video-nikola, guizang-product-video-skill, procedural-film, flick, mortiflix-oss, onetake
Which topics is it in?explainer-video, speech-synthesis, whisper, canvas, tts, playwright, content-creation, text-to-speech, ffmpeg, browser-automation, video-generation, offline
Creator
vincentsch
Size
5.3 MB
Stars
594
Updated
CommitOct 15Releasev0.4.0Oct 15
Age
23d
Commits · 90 Days