talkreel

Talking-head clip in → subtitled, on-brand social video out.

A starter kit for turning 9:16 recordings of people into polished, subtitled, on-brand social videos. You bring a vertical talking-head clip; the kit transcribes it (OpenAI), burns in word-by-word karaoke subtitles, and overlays motion graphics built from your brand's colors, fonts, and logo. Multiple brands and multiple languages are first-class.

Built on Remotion (React for video).

_{The bundled ExampleVideo, rendered with zero assets — watch the full-quality MP4. Reproduce it with npm run render -- ExampleVideo out/example.mp4.}

🤖 Best paired with a coding agent

talkreel is designed to be driven by a coding agent — Claude Code, Codex, Cursor, or any agent. Point it at AGENTS.md (its operating manual) and it has everything it needs to transcribe your clip, plan the beats, build the cutaway scenes, and render the video. You direct; the agent does the wiring.

Topics: remotion · react · video · subtitles · karaoke-captions · social-video · reels · ai-agent · claude-code · codex

---

What you get

• Word-level karaoke subtitles synced to the audio, in your brand accent color.
• A brand system — drop a folder in brands/, get themed graphics everywhere. No code edits to add a brand.
• Reusable scene + animation primitives so cutaways look consistent.
• An OpenAI transcription pipeline (multilingual) that emits ready-to-import transcript modules.
• A method guide (GUIDE.md) distilling what makes these videos work — layout, text sizing, beat timing, the screenshot-to-scene rebuild, common pitfalls.
• A runnable example (ExampleVideo) that works with zero assets and no API key, so you can see the whole pattern immediately.

Prerequisites

• Node 18+
• ffmpeg on your PATH (audio extraction) — brew install ffmpeg
• An OpenAI API key (only for transcription)

Setup

npm install
cp .env.example .env        # then add your OPENAI_API_KEY
npm run studio              # opens Remotion Studio; play the ExampleVideo

The example renders out of the box — no key, no video file needed.

Make a real video (the short version)

# 1) Put your 9:16 clip in public/
cp ~/Desktop/jane-intro.mp4 public/

# 2) Transcribe → word timestamps  (uses brand language + name spelling)
npm run transcribe -- public/jane-intro.mp4 transcripts-json/jane.json --brand acme

# 3) Build the transcript module
npm run build-transcript -- transcripts-json/jane.json src/compositions/jane-transcript.ts --brand acme

# 4) Make the composition + register it, then:
npm run studio
npm run render -- JaneIntro out/jane-intro.mp4

The full step-by-step (including the beat plan and scene building) is in AGENTS.md; the why behind every rule is in GUIDE.md.

Add a brand

Copy brands/example-brand/ to brands/<your-brand>/, edit brand.json + guidelines.md, drop in logo.svg. See brands/README.md.

Layout

talkreel/
  AGENTS.md                  # ← start here if you're a coding agent
  GUIDE.md                   # the method: layout, timing, rebuild technique, pitfalls
  brands/                    # one folder per brand (config + logo + guidelines)
  public/                    # video files + logos (Remotion serves from here)
  scripts/
    transcribe.mjs           # OpenAI word-level transcription
    build-transcript.mjs     # transcription JSON → transcript.ts
  src/
    theme.ts                 # brand config types + buildTheme + theme context
    transcript.ts            # Word / Phrase types
    components/              # Subtitles, BrandLogo, sceneAnim, scenes/
    compositions/            # one file per video + its generated transcript
    Root.tsx                 # Composition registry (one entry per video)

License

MIT — free to use, modify, and share. Attribution appreciated but not required.

Built on Remotion, which has its own license: free for individuals and small teams, paid for larger companies. Check Remotion's terms before commercial use.