Explainer Video Pipeline

An end-to-end pipeline for creating short-form explainer videos using AI voiceover, auto-generated music, and programmatic motion graphics. Write a script, run one command, get a polished video.

Built with: Remotion + ElevenLabs + Claude Code

https://github.com/user-attachments/assets/placeholder-video-preview

---

What It Does

1. You describe a video concept
2. Claude writes a scene-by-scene script (JSON)
3. One command generates: AI voiceover + background music + synced timing
4. Remotion renders it to MP4

Output: 1080x1920 vertical video (9:16) with animated scenes, AI narration, and background music. Ready for Reels, Shorts, TikTok.

---

Quick Start

Prerequisites

• Node.js 18+
• ffmpeg (brew install ffmpeg on Mac)
• ElevenLabs API key — get one here

Setup

git clone https://github.com/YOUR_USERNAME/explainer-video.git
cd explainer-video
npm install
cp .env.example .env
# Edit .env and add your ElevenLabs API key

Your First Video

# 1. Edit the example script with your voice ID and content
#    scripts/input/example.script.json

# 2. Run the full pipeline (generates music + voiceover + timing)
npm run pipeline -- ./scripts/input/example.script.json

# 3. Render to MP4
npx remotion render src/index.ts ExplainerVideo out/my-video.mp4 --props=./video-config.json

# 4. Watch it
open out/my-video.mp4

---

Using with Claude Code

This project includes a .claude/ directory with rules that teach Claude how to use the pipeline. When you open the project in Claude Code, Claude automatically knows how to:

• Write video scripts in the correct JSON format
• Choose the right scene template for each narrative beat
• Run the pipeline and render commands
• Iterate on voice speed, music levels, and visual content

Just tell Claude what video you want to make. It handles the rest.

The Workflow

1. "Make me an explainer video about X" — Claude collaborates on the topic and writes a script
2. Review checkpoint — Claude presents the script for your approval before generating anything
3. Pipeline — One command generates voiceover + music + timing
4. Render — Exports to MP4
5. Iterate — Tell Claude what to change and it re-runs

---

Customization

Brand Setup (First Time)

The onboarding guide walks you through:

1. Theme colors — Background, accent, text colors in your script JSON
2. Logo — Drop your SVG/PNG in public/logo.svg
3. Voice — Use a stock ElevenLabs voice or clone your own
4. Sign-off — Your signature closing phrase (last scene of every video)
5. Audio — Music volume and ducking levels

Voice Settings

"voiceSettings": {
  "voiceId": "your-voice-id",
  "modelId": "eleven_multilingual_v2",
  "stability": 0.22,
  "similarityBoost": 0.85,
  "style": 0.45,
  "speed": 1.5
}

Parameter	What It Does	Range
stability	Lower = more expressive	0.0–1.0
similarityBoost	Voice match fidelity	0.0–1.0
style	Emotional range	0.0–1.0
speed	Playback speed	0.5–2.0

---

19 Scene Templates

Text-Focused

Template	Best For
title	Hooks, covers, pivots, sign-off
bullets	Problem lists, feature lists
steps	Process explanations, "how it works"
quote	Testimonials, authority citations
subheads	Feature breakdowns, "3 reasons why"
cta	Closing call-to-action

Data & Stats

Template	Best For
stat	Impressive metrics, percentage highlights
comparison	Before/after, old vs new
bar-chart	Comparing multiple data points

Narrative Props

Template	Best For
floating-card	3D card with checklist/body content
progress-meter	Animated bar with milestone markers
flow-diagram	A → B → C relationship flows

Motion Graphics ("Action Forward" Style)

Template	Best For
particle-burst	High-energy emphasis, dramatic reveals
geometric-flow	Abstract backgrounds, transitions
morph-shapes	Transformation, evolution concepts
radial-reveal	Discovery, problem reveals

Media & Structural

Template	Best For
image-reveal	Product screenshots, diagrams
divider	Pacing breaks between sections
blank	Audio-only moments, dramatic pauses

---

Project Structure

explainer-video/
├── .claude/rules/          # Claude Code instructions (auto-loaded)
├── .env.example            # Environment template
├── docs/                   # Full documentation (11 guides)
│   ├── onboarding.md       # First-time setup walkthrough
│   ├── pipeline-overview.md
│   ├── script-writing.md
│   ├── scene-mapping.md
│   ├── template-gallery.md
│   └── ...
├── scripts/
│   ├── input/              # Your script JSON files
│   │   └── example.script.json
│   ├── pipeline-runner.ts  # Orchestrates full pipeline
│   ├── generate-voiceover.ts
│   ├── generate-music.ts
│   └── sync-timing.ts
├── src/
│   ├── ExplainerVideo.tsx  # Main composition
│   ├── components/scenes/  # All 19 scene templates
│   ├── types/schema.ts     # Zod schema (data-driven)
│   └── utils/              # Motion, timing, transitions
├── public/
│   ├── logo.svg            # Your brand logo (swap this)
│   └── sfx/                # Sound effects
└── out/                    # Rendered videos

---

npm Scripts

Command	What It Does
npm run pipeline -- <script.json>	Full pipeline: music + voiceover + timing sync
npm run studio	Launch Remotion Studio for visual preview
npm run generate-music	Generate background music only
npm run generate-voiceover -- <script.json>	Generate voiceover + timing only
npm run sync-timing -- <script.json>	Sync timing from voiceover data only

---

Documentation

Guide	What It Covers
Onboarding	First-time setup: brand, voice, environment
Pipeline Overview	End-to-end workflow and commands
Script Writing	Narrative structure, pacing, voiceover text
Scene Mapping	Which template for each narrative beat
Template Gallery	All 19 templates with visual descriptions
Voiceover Generation	ElevenLabs integration and voice tuning
Timing Sync	How timestamps map to scene boundaries
Audio Layering	Background music, ducking, volume calibration
Visual Polish	"Action Forward" motion graphics style guide
Rendering	Render commands, Studio preview, output formats
Config Reference	Full VideoConfigSchema documentation

---

License

MIT