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