I auto-generate YouTube videos for every grammar quiz using Remotion
I built a free English grammar quiz app (english-grammar.app) with 1000+ exercises. To drive discovery, I wanted a YouTube video for every single quiz set — but recording them manually was out of the question. So I built a pipeline that auto-generates videos from structured data using Remotion (React → video).
Why
Grammar-related searches on YouTube are massive. "Prepositions of time," "reported speech," "conditionals" — millions of monthly views. But creating a video for each quiz set by hand? With screen recording, editing, and export, that's easily 30–60 minutes per video. I have dozens of quiz sets and growing. I needed a programmatic approach.
How it works
The full pipeline looks like this:
JSON question bank → Remotion compositions → CLI render → MP4 + PNG thumbnail
Each quiz set lives as structured JSON — stem, options, correct answer, explanation. A single CLI command renders a complete video:
npm run generate-fullset-video -- prepositions prepositions-of-time 1
Three output types share the same React component tree:
Shorts (1080×1920) — single-question vertical videos
Full quiz (1920×1080) — landscape video with all questions in a set
Thumbnail (1280×720) — rendered as a Remotion Still, same components
Dynamic timing — each question gets its own duration based on content density. Short stem + short explanation = 14s. Dense content = up to 18.5s. The system measures character count and adjusts countdown and explanation phases automatically.
Procedural audio — all sound effects (correct ding, wrong buzzer, countdown tick, suspense drone) are synthesized at render time using OfflineAudioContext. No audio files in the repo. A correct-answer "ding" is literally a 880Hz sine wave with exponential decay, wrapped in a React component.
What I learned
From zero to working pipeline in ~18 commits. The entire repo history fits on one screen. Remotion's DX made iteration surprisingly fast.
Writing video like UI is a superpower. Spring animations, conditional rendering, props-driven content — it's just React. I reuse the same question card component across Shorts, full videos, and thumbnails.
Dynamic
calculateMetadatais underrated. Remotion lets you compute video duration at render time based on props. My full-quiz videos have no fixed length — each one is exactly as long as its content needs.
Results & what's next
The app is live at english-grammar.app and videos are rolling out to the YouTube channel. The pipeline is stable — adding a new quiz set to the app automatically means I can generate its video with one command.
Next up: more topic coverage, experimenting with Shorts distribution, and possibly generating videos on CI when new content is pushed.
Happy to answer questions about the Remotion pipeline, the technical tradeoffs, or the product itself. Has anyone else used programmatic video generation for content marketing?
