Digital Twin

Generate and brand AI avatar videos. Full pipeline from script to ready-to-post video using ElevenLabs (voice), HeyGen (avatar), and Remotion (branding).

Pipeline

Script → HeyGen + ElevenLabs (avatar video) → Remotion (intro, outro, captions) → Branded MP4

Quick Start

npm install
cp .env.example .env   # Add your API keys

1. Check your accounts

npm run voices          # List ElevenLabs voices, find your voice_id
npm run avatars         # List HeyGen avatars, find your avatar_id

2. Generate a raw avatar video

# From inline text
npm run generate -- --script "Your script here" --title "My Video"

# From a script file
npm run generate -- --script-file scripts/ethos-academy.txt --title "Ethos Academy"

This sends the script to HeyGen, which uses your ElevenLabs voice clone for TTS and your avatar for lip sync. Downloads the raw MP4 to public/raw/.

3. Brand it with Remotion

npm run studio          # Preview in browser

# Render vertical (YouTube Shorts, LinkedIn, X)
npm run render -- --props='{"videoSrc":"raw/ethos-academy.mp4","title":"Ethos Academy","clipDurationFrames":2400}'

# Render landscape (YouTube)
npm run render:landscape -- --props='{"videoSrc":"raw/ethos-academy.mp4","title":"Ethos Academy","clipDurationFrames":2400}'

Output goes to out/.

Project Structure

src/
├── services/
│   ├── elevenlabs.ts       # ElevenLabs TTS API client
│   └── heygen.ts           # HeyGen avatar video API client
├── compositions/
│   └── BrandedVideo.tsx    # Remotion composition template
├── components/
│   ├── BrandedIntro.tsx    # Animated intro card
│   ├── BrandedOutro.tsx    # Closing card with CTA
│   ├── LowerThird.tsx      # Name bar overlay
│   ├── Captions.tsx        # Timed subtitle overlay
│   └── AvatarClip.tsx      # Raw video wrapper
└── styles/
    └── brand.ts            # Brand tokens (colors, fonts, timing)

scripts/
├── generate.ts             # CLI: script → HeyGen → raw video
├── list-voices.ts          # CLI: list ElevenLabs voices
├── list-avatars.ts         # CLI: list HeyGen avatars
└── ethos-academy.txt       # Example script

Customization

Use your own brand: Edit src/styles/brand.ts — colors, fonts, presenter name, URL, intro/outro timing.

Use your own avatar: Set HEYGEN_AVATAR_ID and ELEVENLABS_VOICE_ID in .env.

Environment Variables

Variable	Where to get it
HEYGEN_API_KEY	HeyGen Settings
HEYGEN_AVATAR_ID	Run npm run avatars
ELEVENLABS_API_KEY	ElevenLabs Settings
ELEVENLABS_VOICE_ID	Run npm run voices

License

MIT