OB.
All projects

Technical pipeline · React + TS

Remotion Pipeline

Programmatic video in React, integrated into the OBS production flow

Period
2025 — 2026
Role
Technical direction · Engineering
01

Context

Most AI creatives stop at the model output. The piece that separates an AI artist from an AI engineer is what happens after: how the assets become a finished video at scale, repeatably, with editorial timing. That's what Remotion solves — and that's where the hybrid positioning becomes literal.

02

What it does

  • Compose final video from individual AI-generated clips, programmatically.
  • Sync captions to ElevenLabs VO using timecodes as a hard contract (ADR #5 in OBS).
  • Apply motion typography (LetteringScene component) over AI video (VideoShot component).
  • Adds editorial-grade overlays (GrainOverlay, color grade hooks).
  • Renders out to MP4 in any aspect ratio (16:9, 9:16, 1:1) from a single source.
03

Stack

Language
TypeScript
Framework
Remotion (React-based video framework)
Custom components
VideoShot · LetteringScene · GrainOverlay · Captions
Audio
ElevenLabs MP3 with timecode JSON
Render
Local CLI · GitHub Actions for batch
04

Integration with OBS

Every OBS project gets a 09_REMOTION/ folder where the Remotion app for that piece lives. The Video Editor role (one of the 8 OBS roles) operates this. The protocol guarantees that no project ships without a Remotion-rendered master.

05

Learnings

  • VO timecodes as a hard gate. Before any motion design starts, the VO is locked and timecoded. This eliminates 80% of editing-stage friction.
  • Programmatic motion is the only way to keep style consistent across a series. Hand-edited motion drifts.
  • React knowledge transfers to web work — the same engineer who builds the agency site also builds the video pipeline.

Want a custom pipeline like this?

Get in touch