Protocol · React composition × video rendering → batch-grade editorial reels

The Reel Factory

The protocol that built the reels you're watching.

creatorsAI power usersagenciesfounders making their own content
Cross-listed inOperator's AI
Also in Creator's AI
See all in Creator's AI
Artifact
tsx
// One reel = scenes as React components, chained by frame offset. const SCENES = [ { dur: 100, Comp: Hook }, { dur: 200, Comp: BigStat }, { dur: 220, Comp: BulletReveal }, { dur: 170, Comp: ReceiptCard }, { dur: 150, Comp: CTA }, ]; export const Reel: React.FC = () => { let offset = 0; return ( <AbsoluteFill style={{ backgroundColor: PAPER }}> {SCENES.map(({ Comp, dur }, i) => { const from = offset; offset += dur; return ( <Sequence key={i} from={from} durationInFrames={dur}> <Comp /> </Sequence> ); })} </AbsoluteFill> ); };
The skeleton. Every reel is the same six-line composition; the scenes do all the work.
What you need to know
  • React composition model
  • Remotion Sequence pattern
  • ffmpeg audio mux
  • IG / TikTok aspect rules (1080×1920, 9:16)
  • WebVTT subtitle timing
  • editorial typography for silent video
  • the 80%-watch-muted constraint

If a name is unfamiliar, that's the gap. The list is the curriculum.

The recipe
  1. 01

    Scaffold a Remotion project. 1080×1920 at 30fps. One Composition per reel.

    bash
    npx create-remotion-video@latest
  2. 02

    Build five reusable scene primitives: HookFrame, StatTile, BulletList, Receipt, CTACard. Each is ~50 lines.

  3. 03

    Each reel composes the same Sequence skeleton with different scene instances. Resist parameter creep.

  4. 04

    Render to MP4 with concurrency=1. Each 30s reel renders in ~45 seconds on M-series silicon.

    bash
    npx remotion render ReelXX out/reel-XX.mp4 --concurrency=1
  5. 05

    Generate captions via Whisper (word_timestamps=true) or a TTS provider's native timing track.

  6. 06

    Mux narration + captions via ffmpeg. One command per reel; bash loop the batch.

    bash
    ffmpeg -i reel.mp4 -i vo.wav -vf subtitles=cap.srt -shortest final.mp4
  7. 07

    Spot-watch every reel silent on a phone. Eighty percent of viewers will see it that way.

Receipt
Seven reels rendered, captioned, ready to post in 90 minutes. The reels visible at the top of /stack.
Project at ~/Desktop/VIBECODING/web/ai-stack-reels. Same five primitives compose all seven; total project size under 2,000 lines including the brand tokens. The artifact you can see on this site is its own receipt.
Why it works

Most video pipelines build a custom scene for every reel. That scales linearly with effort. Treating scenes as composable React primitives flattens the cost: every new reel reuses the same five components and the same Sequence skeleton. The work moves from rendering to writing. The result reads editorial because the typography is consistent and silent-watchable because the constraint was the design brief.

Adjacent
← Previous in Creator's AI
The Voice Clone Pipeline
Personal narration without recording yourself.