How mng-dev-ai/explainer-video works
Explainer-video is a local, agent-driven tool that turns a topic into an animated, narrated MP4. The agent prepares narration and a custom animation page, then runs the pipeline, which generates or reuses voice audio, provides timing data to the page, records it in a headless browser, and merges the audio into the final video. The graph reflects the documented workflow and sampled runtime code; authoring details beyond the README are not verified from SKILL.md.
Main entry points: pipeline.js Pipeline CLI · render.js Browser rendering · edge-tts.js Voice generation · SKILL.md Skill instructions
Components 19
Agent authoring
- Skill instructions
SKILL.md - Narration script
- Custom animation page
Pipeline orchestration
- Pipeline CLI
lib/pipeline.js - Config and inputs
lib/pipeline.js - Timing injection
lib/pipeline.js
Narration audio
- Voice cache
lib/pipeline.js - Voice generation
lib/edge-tts.js - Audio and durations
lib/pipeline.js
Video rendering
- Browser rendering
lib/render.js - Recorded animation
- Audio-video merge
lib/pipeline.js - Finished MP4
Other components
- Topic requester
- Coding agent
- Microsoft Edge TTS
- Duration probing
- Headless Chromium
- FFmpeg
Connections 24
- Topic requester → Coding agent: requests topic
- Coding agent → Skill instructions: reads guidance
- Coding agent → Narration script: writes script
- Coding agent → Custom animation page: writes page
- Coding agent → Pipeline CLI: runs pipeline
- Pipeline CLI → Config and inputs: loads inputs
- Config and inputs → Narration script: provides script
- Config and inputs → Custom animation page: provides HTML
- Pipeline CLI → Voice cache: checks and writes
- Pipeline CLI → Voice generation: requests speech
- Voice generation → Microsoft Edge TTS: generates audio
- Pipeline CLI → Audio and durations: concatenates segments
- Pipeline CLI → Duration probing: probes duration
- Audio and durations → Timing injection: provides timing
- Custom animation page → Timing injection: supplies page
- Timing injection → Browser rendering: passes prepared page
- Browser rendering → Headless Chromium: records page
- Headless Chromium → Recorded animation: produces recording
- Browser rendering → Recorded animation: returns video path
- Pipeline CLI → Audio-video merge: merges media
- Recorded animation → Audio-video merge: provides video
- Audio and durations → Audio-video merge: provides audio
- Audio-video merge → FFmpeg: invokes merge
- FFmpeg → Finished MP4: writes output