Remotion — making videos with React

Remotion is a library that lets you compose a video with React components.

Each frame is a render. You get useCurrentFrame() — an integer representing the current frame — and you build your animations exactly like you'd build a dynamic UI.

import { useCurrentFrame, interpolate } from 'remotion';
 
function FadeIn({ children }) {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
  return <div style={{ opacity }}>{children}</div>;
}

interpolate(frame, inputRange, outputRange) — you map frames onto CSS values.

What I built with it

The Pixel-Mart promo video — 45 seconds, 30fps, vertical 1080×1920 — built with 7 React scenes:

Scene1 — Intro (logo, tagline)
Scene2 — Create your store
Scene3 — Add a product
Scene4 — Order received
Scene5 — Delivery
Scene6 — Seller dashboard
Scene7 — Outro (CTA)

Each scene is a component. The main composition orchestrates the transitions and durations.

Spring animations

Remotion has spring() — a physics-based animation with stiffness and damping.

import { spring, useVideoConfig, useCurrentFrame } from 'remotion';
 
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
 
const scale = spring({
  frame,
  fps,
  config: { stiffness: 200, damping: 22 },
});

For badges, notifications, elements that "arrive" — the natural bounce reads much better than a linear tween.

What changes compared to After Effects

Everything is code. Change one variable in the config — every scene using it updates. You version the video with git.

The limit: Remotion generates MP4s via Puppeteer. On Linux, the Chromium dependency can be friction in some environments.

For SaaS videos with UI components (dashboards, mockups, dynamic data) — it's faster than traditional motion design software.