Remotion (Programmatic Video)

Build real MP4/GIF/WebM videos in React. Every frame is a pure function of useCurrentFrame(), so output is deterministic, scrubbable, diffable, and renderable in CI. The code-first alternative to After Effects for templated and data-driven motion graphics.

When to use

• Render MP4/GIF/WebM from code (social clips, title cards, explainers).
• Templated/data-driven videos: one composition, many outputs from props (per-user, per-record, per-row of a CSV/DB).
• Motion graphics that must be versioned, code-reviewed, and rendered in CI without a GUI.
• Programmatic audio sync, charts that animate from data, or embedding shaders/Three.js into video.

Core techniques

Frame-driven animation

Animation is derived from the current frame, never from setState or requestAnimationFrame. interpolate maps an input range to an output range; spring produces physically natural motion.

import {useCurrentFrame, useVideoConfig, interpolate, spring} from 'remotion';