remotion: React video, frame by frame
What it does
Section titled “What it does”Builds video as React components driven by frame number, rendered through headless Chromium and ffmpeg. Every frame is a function of its number, which is what makes the hard cases tractable.
Reach for it when you need something HTML and CSS genuinely cannot do well:
- TikTok-style per-word caption highlighting from a transcript.
- 10 or more parametric variants generated from a JSON file. One composition, forty cities, forty MP4s.
- Frame-synced voiceover, where the animation lands on the word.
- Spring-physics motion that feels physical rather than eased.
- 3D product rotation via three.js, Skia 2D illustration, Rive and Lottie embeds, motion blur.
- Studio-based editing, so a non-developer teammate can adjust things without touching code.
When to reach for it
Section titled “When to reach for it”- You need the same ad in many versions from structured data.
- You need per-word caption timing, not per-line.
- The motion needs spring physics or real 3D.
- A teammate needs a visual editor on the composition.
For everything else, hyperframes gets there with less setup. Let motion-video choose if you are not sure.
Not for realistic AI footage. That is seedance-video-ad-generator.
Where it runs
Section titled “Where it runs”Needs Node, headless Chromium and ffmpeg locally.
How to run it
Section titled “How to run it”“Build a Remotion ad with per-word captions from this transcript”
“/um-toolkit:remotion 40 variants of this ad, one per city, from cities.json”
What it needs from you
Section titled “What it needs from you”- Node and ffmpeg installed.
- The variable data as JSON if you are generating variants.
- A transcript or audio for caption work.
- Locked copy and brand assets.
What you get back
Section titled “What you get back”- The scaffolded Remotion project on disk.
- Rendered MP4s, one per variant where applicable.
- A Studio session you can open for visual editing.
A worked example
Section titled “A worked example”You: “Same ad, 40 cities, city name and local stat swapped.”
Scaffolds one composition with the city name, local stat and CTA as props, wires it to
cities.json, renders 40 MP4s in one pass. Changing the CTA later is one edit in one component followed by a re-render of all 40, rather than 40 manual edits.
Tips & gotchas
Section titled “Tips & gotchas”- Higher setup cost than HyperFrames. Worth it for the four or five things it uniquely does, overkill for a simple title card.
- Frame-driven thinking takes a minute. Animation is a function of frame number, not a timeline you scrub.
- Parametric variants are the killer feature. If you are making the same ad more than about five times, this pays for itself immediately.
- Studio is how you hand off. Non-developers can adjust without touching JSX.
Related skills
Section titled “Related skills”Chosen by motion-video. Sibling stack to hyperframes, which wins on setup friction for simpler work.