English Grammar App

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 calculateMetadata is 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?