anything2explainer
English | 简体中文
Topic in, narrated explainer video out. anything2explainer is a Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar, in Chinese or English. Every frame is drawn in code with Remotion (React + TypeScript). No stock footage, no generative video model, no frames lifted from anyone else's work.
It is not a CLI. What ships here is the whole method an AI coding agent needs to finish the film: a compilable Remotion template, a primitives and lighting library, tooling for voiceover / storyboard / rendering / quantitative QC, written style and motion specs, a multi-agent division-of-labour protocol, and one complete reference film as the quality bar.
English cut — RAG & Knowledge Bases, 5′02″, 44 lines / 785 words, voiced by kokoro-82m am_liam at natural speed:
https://github.com/user-attachments/assets/e2771c68-a28c-4459-ac5a-a5b685181eeb
Chinese cut — RAG 与知识库 v2, 4′54″, 44 lines / 1490 characters, dot-field backdrop (bg: 'dots'), voiced through the bring-your-own-TTS path (Volcengine TTS 2.0 + forced alignment):
https://github.com/user-attachments/assets/5c213990-cbba-439e-8371-fbb3aa348e05
Both cuts share one storyboard and 44 shots; the English cut re-times every shot to the English voiceover. The full paper trail of the original Chinese cut (4′35″, star-field backdrop, 8 build agents in parallel for 40 minutes, two QC rounds) lives in examples/rag/ (research → narration → storyboard → shot source → QC reports → delivery notes); rendered frames are in examples/rag/frames/.
What it does
- Input: a topic ("explain vector databases"), or an article / document you want turned into a video. You also pick the length and the language.
- Output: a 1280×720 H.264 MP4 with synchronized voiceover, word-boundary-aligned subtitles, chapter cards, a top HUD and a bottom chapter progress bar, plus the full paper trail (research doc with sources, narration, storyboard, per-shot source code, QC reports).
- How: the agent researches the topic with sources, writes the narration, generates the voiceover and frame-accurate timeline, storyboards every shot, then dispatches parallel build agents that write one Remotion component per shot. QC agents review the rendered frames against written criteria before delivery.
- Time: roughly 1 to 3 hours of wall clock depending on length, most of it agents building shots in parallel. You are consulted at exactly four checkpoints.
Output spec
| Frame / rate | 1280×720 @ 30fps, H.264 |
| Length | your call (see table below); 2–8 minutes all work |
| Language | Chinese or English (lang in src/config.ts); typography, subtitle budgets and TTS switch with it |
| Look | black canvas with one of two backdrops, star field + fog gradient or dot-field wave (bg in src/config.ts; the dot-field wave is ported from video-talkcraft); white line art + purple accents; ultra-bold headline type |
| Persistent layers | 44px white-on-black-stroke subtitles, bottom chapter progress bar, top capsule HUD, optional pipeline rail |
| Voiceover | Chinese: edge-tts zh-CN-YunxiNeural (Yunxi, male). English: kokoro-82m am_liam (Liam, male). Or bring your own TTS / finished audio |
Length drives how much ground the film covers, and the size of the whole pipeline:
| Length | Chinese chars | English words | Lines / shots | Build agents | Wall clock | Disk |
|---|---|---|---|---|---|---|
| 2–3 min | 700–950 | 280–420 | 24–32 | 4–6 | ≈1 h | ≈2 GB |
| 3–5 min (reference tier) | 1200–1500 | 420–700 | 40–50 | 8 | ≈2 h | ≈2 GB |
| 5–8 min | 1800–2400 | 700–1150 | 60–80 | 10–14 | ≈2–3 h | ≈3 GB |
Chapter count is not tied to length. One chapter that goes deep or several short ones both work; the progress bar splits evenly across however many chapters the narration declares.
Install
git clone https://github.com/Vincentwei1021/anything2explainer.git
ln -s "$PWD/anything2explainer" ~/.claude/skills/anything2explainer # Claude Code
ln -s "$PWD/anything2explainer" ~/.codex/skills/anything2explainer # Codex
Dependencies:
# Node ≥18 (the template's npm install pulls remotion 4.0.507 / react 19)
brew install ffmpeg # frame extraction / transcoding, required
python3 -m venv ~/.venvs/a2e && source ~/.venvs/a2e/bin/activate
pip install 'edge-tts==7.2.8' numpy pillow scipy # pin edge-tts: it tracks a Microsoft endpoint and breaks across upgrades
# only needed for English narration (kokoro-82m runs locally)
pip install kokoro soundfile && brew install espeak-ng
scipy is only used by the QC script frame_metrics.py. The shell scripts are zsh + Python 3, developed and verified on macOS; Linux should work, Windows is untested.
Usage
In Claude Code or Codex, just say what you want. The skill triggers itself:
Make me an explainer video about vector databases.
讲一下向量数据库，做成一条讲解视频
It then walks the 9 stages in SKILL.md:
- Scaffold the Remotion project from the template.
- Research (1 agent): a sourced research doc with a list of numbers and analogies, every item with a URL.
- Narration & timeline: the script, then TTS voiceover with per-word boundaries turned into a frame-accurate timeline and subtitle table.
- Storyboard: one line per shot with frame range, beat, visuals, motion, hero element and lighting.
- Overlays & primitives: title, chapter cards, HUD, pipeline rail, plus 2–5 topic-specific icons.
- Pilot (1 agent): the first shot group, then a 30-second cut for you to judge the look.
- Parallel build: the remaining groups, 5–7 shots per agent, each writing pure-function Remotion components.
- Render the full film and run quantitative frame metrics.
- QC & fixes: one QC agent per chapter, fix agents per group, re-verification, then delivery notes.
You can also drive the template by hand:
template/scripts/new_project.sh ~/work/my-video myslug
cd ~/work/my-video
# 1. research/调研.md 2. script/narration.txt → python3 scripts/tts_build.py
# 3. script/storyboard_src.md → python3 scripts/render_storyboard.py 4. edit src/config.ts
# 5. src/shots/G1..Gn 6. scripts/preview.sh 30 (first 30 seconds)
# 7. VER=v1 scripts/render.sh + python3 scripts/frame_metrics.py 8. QC → fix → v2/v3
Four checkpoints
The run stops and waits for you at exactly four points instead of ploughing through (details in SKILL.md):
- Length and language: before the script is written. Length decides the line count, shot count and how many agents run in parallel, i.e. how much the film can actually cover; language flips
langinsrc/config.ts, which drives typography, subtitle budgets and the default voice. - Narration sign-off: before voiceover. Once locked, frame numbers are hard-coded into every shot; changing one word re-times the whole film. This is the cheapest place to intervene.
- Voiceover: before TTS runs you get asked whether you have a preferred engine. If not, defaults apply (edge-tts Yunxi for Chinese, kokoro-82m Liam for English). You can also hand over finished audio and fill the per-line timeline yourself.
- First 30 seconds: only the first build group is done, then 30 seconds get rendered for you to judge the look. Fixing the style here costs one group; after the full render it costs every group.
How it compares
| Tool class | What it produces | Where anything2explainer differs |
|---|---|---|
| Generative video models (Sora, Veo, Runway) | Footage synthesized from a prompt | Deterministic code, not pixels. Every number on screen traces to a source URL, and any frame can be fixed by editing one shot file |
| Avatar / presenter tools (HeyGen, Synthesia) | A digital presenter reading a script | No presenter. Motion-graphics diagrams that show the mechanism, with the narration driving the visuals |
| Remotion or Motion Canvas by hand | A programmable video canvas | Ships the method on top of the canvas: research → narration → storyboard → parallel build → QC, with style specs, motion vocabulary and a reference film to match |
| Manim | Python mathematical animations | An agent-driven end-to-end pipeline with TTS-aligned subtitles, chapters and QC; React / TypeScript rather than Python |
FAQ
Which AI coding agents does it work with?
It is written for Claude Code and Codex, and those two are what it has been run with. The skill itself is plain Markdown plus a Remotion project, so any agent that reads SKILL.md-style skill folders and can run shell commands should be able to follow it.
Does it need a GPU? No. Remotion renders through headless Chromium on the CPU. The Chinese default voice (edge-tts) is a cloud call to a Microsoft endpoint; the English default (kokoro-82m) is an 82M-parameter model that runs locally on CPU.
Can I use my own voice or a different TTS?
Yes. Put the finished audio at public/assets/<slug>/audio.wav and fill src/common/timeline.ts and subs.ts by hand (format documented at the top of tts_build.py). Everything downstream is unchanged.
Can I change the visual style?
There is one visual style, on purpose, with a single switch: the backdrop, bg: 'stars' | 'dots' in src/config.ts. To change anything else, edit reference/style-guide.md and src/ui.tsx; the shot