Remotion

A React-based framework for creating videos programmatically. Write React components, and they render to video — with full access to CSS, Canvas, SVG, WebGL, and programming logic.

Used by Fireship and GitHub Unwrapped (personalized year-in-review videos for millions of developers). If you can build it in React, you can render it as video.

What This Skill Does

Core Capabilities

React-to-Video: Write standard React components that render frame-by-frame to MP4/WebM
Full Web Stack: Use CSS animations, SVG, Canvas, WebGL, and any React library inside your videos
Data-Driven Content: Generate personalized or algorithmic videos from data — no manual editing
Fast Refresh: Develop videos with hot reload just like building a web app
Component Reuse: Share components between your web app and videos
Scalable Rendering: Render videos in parallel on Lambda or your own infrastructure

Quick Start

BASH

npx create-video@latest

This scaffolds a new Remotion project with example compositions.

Basic Example

TSX

import { AbsoluteFill, useCurrentFrame, interpolate } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{ backgroundColor: '#000', opacity }}>
      <h1 style={{ color: 'white', fontSize: 80 }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

Use Cases

Personalized videos: Generate a unique video for each user (GitHub Unwrapped-style)
Data visualizations: Animate charts and dashboards as video
Social media content: Programmatically create reels, stories, shorts
Product demos: Auto-generate feature walkthrough videos from code
Educational content: Animated explainer videos from structured data
Marketing automation: Render hundreds of ad variations from a single template

Key Concepts

Compositions

Define video dimensions, duration, and FPS:

TSX

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>

Sequences

Layer and time your content:

TSX

<Sequence from={30} durationInFrames={60}>
  <Subtitle text="This appears at frame 30" />
</Sequence>

Interpolation

Animate any value over time:

TSX

const scale = interpolate(frame, [0, 60], [0.5, 1], {
  extrapolateRight: 'clamp',
});

A commercial license is required for companies. Individual and open-source use is free. See remotion.dev/pricing for details.