Remotion — Programmatic Video with React

Build real MP4/WebM/ProRes videos with React components. Remotion renders each frame independently as a React tree, then stitches them with FFmpeg. Current version: 4.0.472 (npx create-video@latest always scaffolds latest).

⚠️ The One Rule That Breaks Everyone

CSS transitions, CSS @keyframes, and Tailwind animate-* classes DO NOTHING. Each frame is rendered in isolation with no time continuity, so the browser never "plays" an animation. All motion must be derived from the current frame number. Drive every animated value through useCurrentFrame() + interpolate() / spring().

// ❌ WRONG — renders a static frame, no animation
<div className="transition-opacity duration-500" style={{ opacity: 1 }} />

// ✅ RIGHT — value is a pure function of the frame
const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: 'clamp' });
<div style={{ opacity }} />

Step 0: Bootstrap (if no project yet)