Build Narrated Motion-Graphics Explainer Videos with anything2explainer

What Is anything2explainer?

anything2explainer is a skill for Claude Code and Codex that turns a topic, article, or document into a narrated motion-graphics explainer video. It combines research, scriptwriting, text-to-speech, frame-accurate subtitles, storyboarding, parallel shot development, rendering, and quality control in one guided workflow.

The project is not a standalone command-line application. Instead, it provides an AI coding agent with a complete production method: a compilable Remotion 4 template, React and TypeScript visual primitives, voiceover and rendering scripts, written style specifications, multi-agent build instructions, QC tools, and a reference film.

Every frame is drawn in code rather than generated by a video model or copied from existing footage. Animations are pure functions of the frame number and use seeded randomness, making repeated renders reproducible.

What the Pipeline Produces

The default output is a 1280×720, 30fps H.264 MP4. A completed project can include:

• Synchronized Chinese or English voiceover.
• Word-boundary-aligned subtitles.
• Chapter cards and a bottom chapter progress bar.
• A top capsule HUD and an optional pipeline rail.
• Per-shot Remotion components.
• A sourced research document, narration, storyboard, QC reports, and delivery notes.

The visual system uses a black canvas, white line art, purple accents, bold headlines, and either a star-field backdrop with fog or a dot-field wave. The current template targets landscape video only; vertical 9:16 output is not supported.

Supported lengths

Films between two and eight minutes are supported. A two-to-three-minute video typically uses 24–32 lines or shots and takes about one hour. A three-to-five-minute reference-tier production commonly uses 40–50 shots and takes about two hours. Longer five-to-eight-minute films may use 60–80 shots and take approximately two to three hours.

These are wall-clock estimates rather than guarantees. Much of the work is performed by build agents in parallel.

Prerequisites

Before installation, prepare the following:

• Claude Code or Codex.
• Node.js 18 or later.
• Python 3.
• FFmpeg for frame extraction and transcoding.
• At least 5 GB of free space when running several build agents concurrently.

The included shell scripts use zsh and were developed and verified on macOS. Linux should work, but Windows is untested. A GPU is not required because Remotion renders through headless Chromium on the CPU.

Install the Skill

1. Clone the repository

git clone https://github.com/Vincentwei1021/anything2explainer.git

2. Link it to your coding agent

For Claude Code, create a symbolic link in its skills directory:

ln -s "$PWD/anything2explainer" ~/.claude/skills/anything2explainer

For Codex, use the corresponding Codex skills directory:

ln -s "$PWD/anything2explainer" ~/.codex/skills/anything2explainer

3. Install system and Python dependencies

On macOS, install FFmpeg with Homebrew:

brew install ffmpeg

Create a dedicated Python environment and install the shared dependencies:

python3 -m venv ~/.venvs/a2e
source ~/.venvs/a2e/bin/activate
pip install 'edge-tts==7.2.8' numpy pillow scipy

The README pins edge-tts to version 7.2.8 because it depends on a Microsoft endpoint and may break across upgrades. The scipy package is only required by the quantitative QC script, frame_metrics.py.

4. Add English narration dependencies

English narration defaults to the locally run kokoro-82m model with the am_liam voice. Install its additional requirements if you intend to produce English videos:

pip install kokoro soundfile
brew install espeak-ng

Chinese narration defaults to the cloud-based edge-tts voice zh-CN-YunxiNeural.

Create a Video with Claude Code or Codex

The simplest approach is to describe the requested film in natural language. The skill should activate itself when available to the agent.

Make me an explainer video about vector databases.

You can also make the request in Chinese:

讲一下向量数据库，做成一条讲解视频

Your input can be a broad topic or an existing article or document. You will also choose the target length and language.

Understand the Nine Production Stages

1. Scaffold: The agent copies the Remotion template into a new project.
2. Research: A research agent prepares a sourced document, including useful numbers and analogies with URLs.
3. Narration and timeline: The agent writes the script, generates or imports voiceover, and converts word boundaries into a frame-accurate timeline and subtitle table.
4. Storyboard: Every shot receives a frame range, narrative beat, visual plan, motion direction, hero element, and lighting plan.
5. Overlays and primitives: The project adds its title, chapter cards, HUD, pipeline rail, and two to five topic-specific icons.
6. Pilot: One agent builds the first shot group and renders a 30-second preview.
7. Parallel build: Additional agents build the remaining groups, generally handling five to seven shots each.
8. Render: The complete film is rendered and analyzed with quantitative frame metrics.
9. QC and fixes: QC agents review chapters, fix agents address issues, and the project is verified again before delivery.

Use the Four Review Checkpoints

The workflow deliberately pauses four times so you can make important decisions before changes become expensive.

Checkpoint 1: Length and language

Choose the film length and either Chinese or English before scriptwriting begins. Length affects coverage, narration size, shot count, disk usage, and the number of parallel agents. Language changes typography, subtitle budgets, pacing, and the default voice through lang in src/config.ts.

Checkpoint 2: Narration approval

Review the complete narration before voice generation. Once the voiceover is locked, frame numbers are embedded into individual shots. Changing even one word can require the entire film to be retimed, so this is the most economical point for editorial revisions.

Checkpoint 3: Voiceover choice

Choose the default voice, another TTS engine, or your own finished recording. If you do not specify an alternative, the pipeline uses edge-tts Yunxi for Chinese and kokoro-82m Liam for English.

Checkpoint 4: First 30 seconds

Review the pilot render before the remaining shot groups are built. Correcting visual direction at this point affects only the first group; correcting it after a full render may require changes across every group.

Drive the Template Manually

You can use the included scripts directly when you want more control over the production process. Create a project from the template and enter its directory:

template/scripts/new_project.sh ~/work/my-video myslug
cd ~/work/my-video

Then follow the manual sequence:

1. Write the research file at research/调研.md.
2. Create script/narration.txt and generate the voiceover timeline.
3. Write script/storyboard_src.md and render the storyboard.
4. Edit language, backdrop, and related settings in src/config.ts.
5. Implement shot groups under src/shots/G1 through src/shots/Gn.
6. Render the opening preview.
7. Render a versioned final video and run frame metrics.
8. Review, fix, and render subsequent versions such as v2 or v3.

python3 scripts/tts_build.py
python3 scripts/render_storyboard.py
scripts/preview.sh 30
VER=v1 scripts/render.sh
python3 scripts/frame_metrics.py

Customize Language and Backdrop

The primary project settings live in src/config.ts. Set lang to 'zh' or 'en'. Chinese uses a subtitle budget of 16 characters per block, while English uses 48 characters per block.

The supported backdrop switch is:

bg: 'stars' | 'dots'

The star option combines a star field with a fog gradient. The dots option uses a dot-field wave. The project intentionally provides one visual language with these two backdrop choices.

For broader visual changes, edit reference/style-guide.md and src/ui.tsx. Shot components rely on the shared primitives, so changing those central definitions is preferable to styling every shot independently.

Use Your Own Voiceover

You are not limited to the bundled TTS defaults. Place finished audio at:

public/assets/<slug>/audio.wav

Then populate src/common/timeline.ts and subs.ts manually. The required format is documented at the top of tts_build.py. Once the timeline and subtitle data are present, the storyboard, shot build, rendering, and QC stages remain unchanged.

Advanced Production Tips

Approve words before polishing pictures

Treat narration approval as a hard lock. Because shots use fixed frame ranges, late script edits are more disruptive than ordinary visual corrections.

Use the pilot as a style test

Inspect typography, composition, motion speed, lighting, subtitle readability, and the backdrop during the first 30-second review. Do not approve the pilot merely because it renders successfully.

Scale parallel work carefully

Longer films may use 10–14 build agents. Several agents can bundle Remotion simultaneously, which increases storage and system load. Keep at least 5 GB free and dispatch agents in waves when approaching the tmux pane limit described by the project.

Preserve source traceability

Every number, year, organization, and English term shown on screen should trace to a URL in the research document. Unverified claims should remain outside both the narration and visuals.

Use versioned renders

Set VER=v1, review the metrics and chapter-level QC findings, then create corrected versions such as v2 or v3. This preserves a clear review history instead of overwriting earlier output.

Study the reference materials

The examples/rag/ directory contains the reference film's production trail, including research, narration, storyboard, shot source, reports, and delivery notes. The examples/contrast/ directory contains six bad-versus-good frame pairs for evaluating composition and lighting.

The reference/ directory also documents safe areas, palettes, fonts, motion formulas, lighting rules, storyboard conventions, agent protocols, prompt templates, and lessons learned across earlier films.

Important Limitations and Licensing

• The supported languages are Chinese and English.
• The template assumes 1280×720 landscape video and does not currently support 9:16 output.
• It is not designed for talking-head presentations, mostly live-action productions, or reproducing an existing video.
• Optional live-action B-roll must come from royalty-free sources and be recorded in a manifest with its source URL, license, SHA-256 hash, and usage.
• The toolkit uses the PolyForm Noncommercial 1.0.0 license. Noncommercial use is free, while commercial use requires prior authorization from the author.
• Videos created with the toolkit belong to their creators.
• The bundled fonts and Remotion have their own license terms.

Review the repository's project page and license files before production or distribution, especially for commercial work.

Conclusion

anything2explainer provides more than a video template: it gives Claude Code or Codex a structured production system for turning researched material into deterministic Remotion animation. Start with a focused topic, make careful decisions at the four checkpoints, approve narration before TTS, validate the 30-second pilot, and use versioned rendering plus quantitative QC to refine the final film.