React Component-Based Video Generation

Overview

• Project: Automated Video Generation Pipeline
• Status: Active
• Verdict: High viability via React + Remotion

Strategic Fit

Benefit	Detail
Code as Video	Video templates committed to Git; brand color changes propagate instantly
CLI Automation	npx remotion render src/index.tsx PromoVideo out/promo.mp4
Component Reusability	Build <LowerThird/> once, use across all video types
Data-Driven Content	Inject JSON (release notes, metrics) directly into render

Proposed Folder Structure

Organize by video archetypes instead of pages:

src/
├── compositions/        # Entry points for full videos
│   ├── DevUpdate/       # Monthly development updates
│   ├── FeatureShort/    # 60s vertical clips for social
│   └── StreamOverlay/   # OBS overlay assets
├── components/
│   ├── shared/          # Brand logos, transitions, typography
│   └── visualization/   # Code blocks, terminal mockups
├── hooks/
│   ├── useTypewriter.ts # Code typing effects
│   └── useAudioSync.ts  # Beat/voice sync
└── utils/
    └── content-loader.ts # Fetch data from Quartz/Markdown

Plop.js Integration

Scaffold new video templates: yarn plop video prompts for Video Type (H/V) and Category (DevLog/Tutorial), generates composition with standard Intro/Outro.

Critical Pitfalls

DOM vs. Pixel Trap

In video React, every frame must render perfectly. Heavy CSS filters (blur, drop-shadow) cause render timeouts or memory spikes.

useEffect is Dead

Video rendering is synchronous frame extraction. Must use delayRender (Remotion-specific) or fetch all data before passing as props.

Audio Complexity

React has no native audio mixing. Audio sequencing in code is harder than dragging clips in a traditional NLE.

AI Agent Gotcha

AI often hallucinates CSS animations that fail in video rendering. Create context files enforcing “Always use useCurrentFrame for animation, never CSS keyframes.”

Live Stream Integration

Run Remotion preview server as OBS Browser Source for real-time overlay updates via text file or API.

Related

• remotion — Remotion core research
• procedural-generation-workflows — Multi-tier code generators