How to use Remotion?

2026-02-05
Rok Benko's portrait photoWritten by Rok Benko

Comprehensive Guide to Programmatic Video Creation with React in 2026

Are you a developer looking to create dynamic, customizable videos without traditional editing software? Remotion, available at remotion.dev, is a powerful framework that lets you build real MP4 videos using React. Whether you're making personalized content, data visualizations, or marketing animations, this guide will walk you through how to use Remotion step by step. By the end, you'll be equipped to start your first project and leverage advanced features for professional results.

What is Remotion and Why Should You Use It?

Remotion is an open-source framework that transforms React components into video frames, allowing you to compose, animate, and render videos programmatically. It's perfect for developers who want to parameterize videos with data, integrate them into apps, or scale rendering server-side. Key benefits include:

  • Leverage React Skills: Use familiar tools like CSS, Canvas, SVG, and React hooks to build videos.
  • Dynamic Content: Easily update videos based on APIs, user input, or datasets.
  • Scalable Rendering: Render locally, on servers, or serverlessly for high-volume production.
  • Use Cases: From music visualizations and captions to year-in-review videos and social media clips.

Unlike traditional tools like After Effects, Remotion eliminates timelines and lets you code everything, making it ideal for automation and integration with AI like Claude for prompting videos.

Prerequisites for Using Remotion

Before diving in, ensure you have:

  • Node.js version 16 or higher (or Bun 1.0.3).
  • Basic knowledge of React and TypeScript (recommended for complex projects).
  • A code editor like VS Code.

If you're new to React, Remotion's component-based approach will feel intuitive.

How to Install and Set Up Remotion

Getting started is straightforward. Follow these steps to create a new project:

  1. Scaffold a New Project: Run the following command in your terminal:

    npx create-video@latest

    Choose a template like "Hello World" for beginners. This sets up a basic structure with React and Remotion dependencies.

  2. Navigate to Your Project:

    cd your-project-name

  3. Install Dependencies (if needed):

    npm install

  4. Start the Remotion Studio:

    npm start

    This launches the Studio on port 3000, where you can preview and render videos.

For existing projects, install Remotion via:

npm install remotion @remotion/cli

Core Concepts in Remotion

Remotion revolves around a few key ideas:

  • Frames: Videos are sequences of frames. Use useCurrentFrame() to get the current frame and animate based on it.
  • Compositions: Define videos with metadata like duration, FPS, width, and height using the <Composition> component in src/Root.tsx.
  • Sequences: Time-based containers for elements, allowing precise control over when content appears.
  • AbsoluteFill: A full-screen container for layering elements.

Example of a basic composition:

import { AbsoluteFill, useCurrentFrame } from "remotion";

export const MyComposition = () => {
  const frame = useCurrentFrame();
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

Register it in Root.tsx:

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      component={MyComposition}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Building Your First Video with Remotion

Let's create a simple animated text video:

  1. In src/Video.tsx, define your component with animations using interpolate for smooth transitions.

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

export const HelloWorld = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#f0f0f0",
      }}
    >
      <h1 style={{ opacity, fontSize: 80 }}>Hello, Remotion!</h1>
    </AbsoluteFill>
  );
};

  2. Register in Root.tsx as above.

  3. Preview in Studio: Run npm start and select your composition.

  4. Render the Video:

    npx remotion render HelloWorld out/video.mp4

    Or use the Studio's "Render" button for more options.

Advanced Features: Animations, Audio, and More

  • Animations: Use @remotion/animation for springs, transitions, and easing. For example, add entrance/exit effects with @remotion/transitions.
  • Audio: Import MP3 files and control volume, speed, or pitch.
  • Assets: Load images, videos, or fonts dynamically.
  • 3D Content: Integrate Three.js for advanced visuals.
  • AI Integration: Use Claude with Remotion Skills for prompt-based creation. Install via npx skills add remotion-dev/skills and prompt like: "Use Remotion to create a video about top games sold."

Best practices include waiting for fonts to load before measuring text and optimizing for performance.

Remotion Examples and Tutorials

Explore these to level up:

  • Official Resources: Check remotion.dev/docs for tutorials on Spotify Wrapped or map animations.
  • YouTube Tutorials: "I Made Video Animations in Seconds with Remotion" or "Build REMOTION videos in 60s".
  • Community Projects: GitHub Unwrapped videos or data visualizations like top games sold.

Best Practices for Remotion Development

  • Performance: Avoid heavy computations per frame; use memoization.
  • Player Integration: For embedding, follow guidelines to prevent flickers and handle autoplay.
  • Prompting with AI: Be specific, iterate incrementally, and reference patterns.
  • Resources: Join the Discord, explore templates on GitHub, and use the Showcase for inspiration.

Conclusion: Start Creating with Remotion Today

Remotion empowers developers to turn code into captivating videos efficiently. From basic setups to AI-assisted workflows, it's a game-changer for content creation. Head to remotion.dev to get started, and experiment with the Hello World template.

Back to blog