What it does

Creates videos using React components where every visual element is a deterministic function of the current frame number. No timeline editors, no drag-and-drop. Videos are code, and code is reproducible, parameterizable, and version-controllable.

The pattern

Remotion renders React components as video frames. The core primitive is useCurrentFrame(), which returns the current frame number (0, 1, 2, ...). All animation logic derives from this number.

Building blocks:

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
const scale = spring({ frame, fps: 30, config: { damping: 12 } });

interpolate() maps frame ranges to value ranges (fade in from frame 0 to 30). spring() creates physics-based easing. These two functions handle 90% of animation needs.

Composition structure:

Root.tsx (registry)
├── Scene1.tsx (intro, frames 0-90)
├── Scene2.tsx (data visualization, frames 91-300)
├── Scene3.tsx (outro, frames 301-390)
└── Transitions between scenes

Root.tsx is the composition registry. Each <Composition> entry defines a scene with its duration, dimensions, and FPS. Transitions between scenes use @remotion/transitions.

Data-driven content is the sweet spot:

• Charts that animate bar-by-bar as data loads in
• Numbers that count up from zero to their final value
• Text that types itself character-by-character
• Timelines that build progressively

Feed data as props to components. The same component with different data produces a different video. Batch-render 50 personalized videos by mapping over a dataset.

Rendering:

npx remotion render src/index.ts SceneName output.mp4

Renders locally. Each frame is rendered independently, so rendering parallelizes well.

Key decisions

No CSS animations or keyframes. Everything is controlled by the frame number. CSS animations are time-based and non-deterministic in a rendering context. Frame-based logic guarantees that frame 42 always looks identical, every render.

React, not After Effects. If your content is data-driven, parameterized, or needs to be generated programmatically, React is the right tool. If your content is hand-crafted visual art, use a traditional video editor.

Compositions as a registry. Define all scenes in Root.tsx with their metadata. This makes the project navigable and lets the Remotion Studio preview any scene independently.

Spring over linear easing. Spring physics produce natural-looking motion. Linear interpolation looks robotic. Default to spring-based animation and only use linear for specific effects like progress bars.

When to use it

When you need to produce videos programmatically: product demos with real data, personalized content at scale, animated data visualizations, or social media content that follows a consistent template. Not suitable for live-action editing or heavily artistic motion graphics.