Stop Wrestling With After Effects! Code Your Videos With React

What if I told you that every hour you spend wrestling with timeline scrubbers, keyframe interpolation, and proprietary export formats is an hour you could spend writing actual code? Here's the painful truth that video creators don't want to admit: traditional video editing is broken for developers. You're forced to abandon everything you know—components, version control, APIs, programmatic logic—and descend into a world of manual clicking, dragging, and praying your render doesn't crash at 99%.

But what if you could leverage React to generate pixel-perfect videos? Not screen recordings. Not hacky workarounds. Real, composable, programmatic video creation using the same components you build UIs with every single day.

Enter Remotion—the framework that's making After Effects engineers nervous and React developers dangerously productive. Created by Jonny Burger and the team at remotion.dev, this open-source powerhouse lets you write videos in code, render them server-side, and scale video production like never before. Fireship uses it. GitHub Unwrapped runs on it. And today, you're going to learn exactly how to wield it.

Stop fighting tools that weren't built for you. Your IDE is calling.

What Is Remotion?

Remotion is a revolutionary framework for creating videos programmatically using React. Born from the frustration of trying to automate video production with tools designed for manual operation, Remotion flips the script entirely: instead of learning video software, you use the web development skills you already possess.

At its core, Remotion treats video frames as React renders. Each frame is a React component rendered at a specific time, compiled into a video file through a powerful rendering pipeline. This means every tool in your frontend arsenal—CSS animations, Canvas drawing, SVG manipulation, WebGL shaders, even Three.js scenes—becomes a video production tool.

The project was created by Jonny Burger and has rapidly gained traction across the developer community, amassing thousands of GitHub stars and powering production systems at major companies. Its popularity exploded when Fireship famously declared "This video was made with code"—demonstrating that educational content with millions of views could be generated entirely programmatically.

Why it's trending now: The demand for personalized, data-driven video content has exploded. Think automated onboarding videos, personalized year-in-reviews, dynamic social media content, and AI-generated narratives. Traditional tools can't scale. Remotion can render thousands of unique videos from a single codebase, making it the secret weapon for modern content operations.

The framework's special licensing model (free for individuals, company license required for organizations) has also enabled sustainable open-source development while keeping it accessible to creators experimenting with the technology.

Key Features That Make Remotion Insane

Full React Ecosystem Access

This isn't a React-like API. This is actual React. You import useState, useEffect, useRef—everything works exactly as expected. Your existing component library, your favorite animation libraries (Framer Motion, GSAP), your styling solutions (Tailwind, Styled Components)—they all render to video frames. The mental model is zero friction because there is no new mental model.

Time-Based Composition System

Remotion introduces <Sequence> components that let you orchestrate scenes with frame-precise timing. Define start frames, durations, and offsets declaratively. Think of it as CSS animation timelines, but with the full power of JavaScript logic—conditionals, loops, API data, mathematical functions driving every pixel.

Server-Side Rendering at Scale

The remotion CLI and @remotion/renderer package enable headless Chrome rendering on your servers or Lambda functions. Render 4K videos, batch-process thousands of personalized variants, or build video-generation APIs. The rendering pipeline uses Puppeteer under the hood with sophisticated optimizations for memory management and parallel processing.

Fast Refresh for Video

Yes, you read that correctly. Save your component file, and see your video update instantly in the preview player. No more 10-minute export cycles to check if your easing curve looks right. This development velocity is unmatched in video production workflows.

TypeScript-First Architecture

Every API is fully typed. Catch timing errors, missing props, and invalid compositions at build time. Your video codebase maintains the same rigor as your production web application.

Audio Synchronization

Embed and precisely synchronize audio tracks with your visual sequences. Remotion handles audio extraction, mixing, and frame-accurate alignment—critical for professional output.

Use Cases Where Remotion Absolutely Dominates

1. Personalized Marketing at Scale

Imagine generating 10,000 unique onboarding videos, each addressing the user by name, showing their specific usage metrics, and recommending personalized next steps. Remotion + your user database = video personalization engine that traditional tools simply cannot replicate.

2. Data Visualization Narratives

Convert dry dashboards into compelling video stories. Pull live API data, animate transitions between metrics, and export shareable video summaries. Financial reports, social media analytics, fitness achievements—all become cinematic experiences.

3. Programmatic Educational Content

Fireship proved this model: create video templates with dynamic code highlighting, then generate episodes from structured content sources. Update your data? Re-render your entire video catalog. No manual re-editing required.

4. Dynamic Social Media Assets

Build systems that generate platform-optimized videos from templates. User submits content, selects style, receives polished video in seconds. The infrastructure powering TikTok-style generators, but with your complete creative control.

5. Automated Documentation Videos

Keep your product videos synchronized with your actual UI. Screenshot your components, animate interactions programmatically, and regenerate whenever your design system updates. Never ship outdated tutorial content again.

Step-by-Step Installation & Setup Guide

Getting started with Remotion takes under two minutes if you have Node.js installed. Here's the complete path from zero to your first rendered video.

Prerequisites

• Node.js 16+ (18+ recommended for optimal performance)
• npm, yarn, or pnpm package manager
• FFmpeg installed on your system (for video encoding)

Project Initialization

The fastest path uses the official project scaffold:

npx create-video@latest

This interactive CLI prompts for:

• Project name
• Template selection (blank, Hello World, Three.js, still image, etc.)
• Package manager preference
• Whether to initialize a Git repository

Manual Installation (For Existing Projects)

If integrating into an existing React codebase:

# Install core dependencies
npm install remotion @remotion/cli @remotion/player

# Install rendering engine
npm install @remotion/renderer

# Development dependencies
npm install --save-dev @types/react @types/react-dom

Project Structure

A standard Remotion project contains:

my-video-project/
├── src/
│   ├── HelloWorld.tsx      # Your composition component
│   ├── Video.tsx           # Root composition registry
│   └── index.ts            # Entry point
├── public/                 # Static assets (images, fonts, audio)
├── remotion.config.ts      # Rendering configuration
├── package.json
└── tsconfig.json

Configuration File

Create remotion.config.ts to customize rendering behavior:

import {Config} from '@remotion/cli/config';

// Set default render concurrency
Config.setConcurrency(4);

// Configure output codec
Config.setCodec('h264');

// Set default image format for frames
Config.setImageFormat('jpeg');

Development Server

Start the preview player with hot reload:

npm start

This launches the Remotion Studio at http://localhost:3000—your visual timeline editor, composition browser, and render queue in one interface.

First Render

Export your composition to video file:

npx remotion render src/index.ts HelloWorld out/video.mp4

The CLI handles headless Chrome orchestration, frame extraction, and FFmpeg encoding automatically.

REAL Code Examples From the Repository

Let's dissect actual patterns from the Remotion ecosystem, starting with the fundamental composition structure.

Example 1: Basic Composition Registration

Every Remotion project defines its renderable scenes through the Composition component. This example shows the standard registration pattern:

// src/Video.tsx - The composition registry file
import {Composition} from 'remotion';
import {HelloWorld} from './HelloWorld';

export const RemotionVideo: React.FC = () => {
  return (
    <>
      {/* Define a renderable composition with explicit timing */}
      <Composition
        id="HelloWorld"           // Unique identifier for CLI targeting
        component={HelloWorld}     // The React component to render
        durationInFrames={150}     // Total frames (5 seconds at 30fps)
        fps={30}                   // Frame rate for timing calculations
        width={1920}               // Output resolution width
        height={1080}              // Output resolution height
      />
    </>
  );
};

Critical insight: The id prop becomes your CLI target. The durationInFrames, fps, width, and height constitute your video's "canvas specification"—every component inside receives these values through context. This declarative approach means you can register multiple compositions with different specs, then render them selectively.

Example 2: Time-Aware Component with useCurrentFrame

The magic happens when components become time-sensitive. Here's how you access the current frame and derive animation values:

// src/HelloWorld.tsx - A time-aware component
import {useCurrentFrame} from 'remotion';
import {spring, interpolate} from 'remotion';

export const HelloWorld: React.FC = () => {
  // Hook returns the current frame number (0 to durationInFrames-1)
  const frame = useCurrentFrame();

  // interpolate: map frame range to output range with easing
  const opacity = interpolate(
    frame,                     // Current input value
    [0, 30],                   // Input range: frames 0-30
    [0, 1],                    // Output range: 0 to 1
    {extrapolateRight: 'clamp'} // Prevent values beyond 1
  );

  // spring: physics-based animation with configurable parameters
  const scale = spring({
    frame,                     // Current frame for calculation
    fps: 30,                   // Frame rate for time normalization
    config: {
      damping: 10,             // Resistance (lower = more oscillation)
      stiffness: 100,          // Spring tension (higher = faster)
      mass: 0.5,               // Virtual mass (higher = more inertia)
    },
  });

  return (
    <div
      style={{
        opacity,
        transform: `scale(${scale})`,
        fontFamily: 'sans-serif',
        fontSize: 120,
        textAlign: 'center',
        color: 'white',
      }}
    >
      Hello, Remotion!
    </div>
  );
};

Why this pattern is powerful: You're not describing what the animation looks like—you're describing how to calculate any frame given a time value. This functional approach enables perfect seekability, deterministic rendering, and mathematical precision impossible with keyframe-based tools.

Example 3: Sequence Composition for Scene Orchestration

Complex videos require scene management. The <Sequence> component provides declarative timeline control:

import {Sequence, useCurrentFrame} from 'remotion';
import {Intro} from './Intro';
import {MainContent} from './MainContent';
import {Outro} from './Outro';

export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <div style={{backgroundColor: '#0f0f0f', flex: 1}}>
      {/* Scene 1: Runs from frame 0 to frame 89 (90 frames total) */}
      <Sequence from={0} durationInFrames={90}>
        <Intro />
      </Sequence>

      {/* Scene 2: Starts at frame 60, overlaps with Intro's fade-out */}
      <Sequence from={60} durationInFrames={180}>
        <MainContent />
      </Sequence>

      {/* Scene 3: Final scene with cross-dissolve timing */}
      <Sequence from={210} durationInFrames={60}>
        <Outro />
      </Sequence>

      {/* Global overlay: runs entire duration */}
      <Sequence from={0} layout="none">
        <Watermark />
      </Sequence>
    </div>
  );
};

Advanced technique: Sequences can be nested infinitely, creating hierarchical timelines. The layout="none" prop prevents automatic positioning, letting you overlay elements freely. Each Sequence resets useCurrentFrame() to start from zero—use useVideoConfig() to access global timeline position when needed.

Example 4: Dynamic Data Integration

Remotion truly shines when combining with APIs. Here's a real-world pattern for data-driven video generation:

import {useEffect, useState} from 'react';
import {continueRender, delayRender} from 'remotion';

interface GitHubStats {
  contributions: number;
  repositories: number;
  username: string;
}

export const GitHubUnwrapped: React.FC<{username: string}> = ({username}) => {
  // delayRender: pause rendering until data loads
  const [handle] = useState(() => delayRender('Loading GitHub data'));
  const [stats, setStats] = useState<GitHubStats | null>(null);

  useEffect(() => {
    fetch(`https://api.github.com/users/${username}`)
      .then(res => res.json())
      .then(data => {
        setStats({
          contributions: data.public_repos * 42, // Simulated metric
          repositories: data.public_repos,
          username: data.login,
        });
        continueRender(handle); // Signal ready to render
      });
  }, [handle, username]);

  if (!stats) return null; // Return blank while loading

  return (
    <div style={{/* styling */}}>
      <h1>@{stats.username}'s Year in Code</h1>
      <StatCard value={stats.contributations} label="Contributions" />
      <StatCard value={stats.repositories} label="Repositories" />
    </div>
  );
};

Production critical: delayRender/continueRender prevents incomplete frames in your output. The rendering pipeline waits for all pending handles before capturing each frame, ensuring data-dependent content resolves completely.

Advanced Usage & Best Practices

Optimize Render Performance

Use @remotion/renderer's concurrency option to parallelize frame rendering across CPU cores. For Lambda deployments, implement chunk-based rendering with getRenderProgress polling—process 30-second segments independently, then concatenate.

Audio-Visual Precision

For lip-sync or beat-matched content, extract audio waveforms server-side using remotion/media-utils. Pre-calculate amplitude arrays, then drive visual parameters through interpolate() against the audio data.

Asset Optimization

Large video projects bottleneck on I/O. Pre-optimize images to target resolution, convert GIFs to MP4 for <Video> components, and use staticFile() for consistent path resolution across environments.

Testing Strategies

Write Jest tests for your animation logic using calculateMetadata() and frame-specific assertions. Snapshot test rendered frames with @remotion/renderer's renderStill() for visual regression detection.

Version Control Workflows

Store source compositions in Git, generate preview renders in CI, and only produce final outputs on tagged releases. The remotion.config.ts supports environment-specific overrides for development vs. production quality settings.

Comparison With Alternatives

The Verdict: After Effects dominates for manual artistic work. FFmpeg excels at transcoding pipelines. Motion Canvas offers interesting alternatives for canvas-based animation. But for programmatic, data-driven, scalable video generation by developers, Remotion occupies a unique position—leveraging the world's most popular UI framework with production-grade rendering infrastructure.

Frequently Asked Questions

Is Remotion free to use?

Remotion is free for individuals and non-commercial projects. Companies and organizations must purchase a license. Review the LICENSE file for specific terms.

What video formats and codecs are supported?

Remotion supports H.264, H.265 (HEVC), VP8, VP9, and ProRes output. Container formats include MP4, WebM, and MOV. The codec selection depends on your target platform and quality requirements.

Can I use Remotion with Next.js or existing React applications?

Yes, though Remotion compositions require isolation from standard DOM rendering. Use separate entry points for video compositions, or leverage @remotion/player for embedded preview experiences within larger applications.

How does Remotion handle fonts and external assets?

Load fonts via @font-face CSS or Google Fonts imports. Use staticFile() for reliable asset path resolution. For dynamic assets, implement delayRender patterns to ensure complete loading before frame capture.

What's the maximum video length and resolution?

Technically unlimited, constrained by available memory and disk space. Practical limits: 4K resolution renders reliably on 16GB+ systems. Hour-long videos require chunking strategies and sufficient temporary storage.

Can Remotion render on CI/CD pipelines or serverless functions?

Absolutely. The @remotion/lambda package provides AWS Lambda integration for elastic scaling. Docker-based rendering works on GitHub Actions, GitLab CI, and similar platforms with Chrome installation.

How do I debug animations that look wrong at specific frames?

Use the Remotion Studio's timeline scrubber to inspect any frame. Add console.log(frame, value) statements—they appear in the Studio's dev tools. For complex issues, render single frames with npx remotion still for rapid iteration.

Conclusion

Remotion isn't just a tool—it's a paradigm shift. It demolishes the artificial wall between web development and video production, letting you apply decades of accumulated frontend expertise to a medium that desperately needs programmatic innovation.

The evidence is overwhelming: Fireship's code-generated content reaches millions. GitHub Unwrapped personalizes video experiences at massive scale. And now, with npx create-video@latest, you can join this movement in under two minutes.

Traditional video tools weren't built for automation, data integration, or developer workflows. Remotion was. Every component you write, every API you connect, every algorithm you implement becomes a video production superpower.

Your move. Will you keep clicking through timelines? Or start typing your next masterpiece?

🚀 Get started now: Clone the repository at github.com/remotion-dev/remotion, run npx create-video@latest, and render your first programmatic video today. The future of video is code—and you're already fluent in the language.

Ready to build? The Remotion community awaits on Discord, and the complete documentation lives at remotion.dev/docs. See you in the render queue.