explainer-video

AI skill that turns a topic into a fully animated, narrated explainer video. Runs locally. Free forever. Works with any AI coding agent.

---

You give your agent a topic. It writes a custom animation page, generates a free voiceover, records the page in a headless browser, and merges the audio in with ffmpeg. You get a finished MP4.

No API keys. No subscriptions. No watermarks.

Demo

The demo.mp4 in this repo was generated by the skill itself, using Claude Code.

# the entire build command:
node lib/pipeline.js --config config.json --out demo.mp4

Why this exists

Every other AI explainer video tool wants $30–$80/month and locks you into one visual style. This skill takes the opposite approach:

• The agent writes the visuals — fresh HTML/CSS/GSAP design for every topic, no templates
• The voiceover is free — uses Microsoft Edge’s neural TTS, no account needed
• Everything runs locally — no upload, no SaaS, no watermark
• One artifact — drop the folder into any agent’s skills directory and it just works

How it works

1. Agent writes the narration script (split into segments)
2. Agent writes a custom HTML animation page (GSAP + SVG)
3. Pipeline calls Microsoft Edge TTS per segment → MP3
4. Pipeline measures durations and exposes them to the page
5. Headless Chromium records the animation
6. ffmpeg muxes in the voiceover → final MP4

Each scene’s animation timing is driven by window.__SEGMENT_DURATIONS so the visuals stay locked to the narration — no manual sync.

Install

This skill follows the open SKILL.md spec and works with any agent that supports it.

Claude Code

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.claude/skills/explainer-video

Restart your Claude Code session. Then say “make an explainer video about X” and the skill will trigger.

Codex CLI

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.codex/skills/explainer-video

Restart Codex. Invoke explicitly with $explainer-video or describe the task and Codex will pick it.

Cursor

Cursor scopes skills per-project. Clone into the project where you want it:

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  .cursor/skills/explainer-video

Then reload the window (Cmd/Ctrl+Shift+P → “Developer: Reload Window”).

Universal install (one location, all agents)

If you use multiple agents, install once in ~/.agents/skills/ and symlink from each agent dir:

git clone https://github.com/Mng-dev-ai/explainer-video.git \
  ~/.agents/skills/explainer-video