How to Create Programmatic Video with React and Remotion

Programmatic video is one of the most powerful ideas in modern content production. Instead of dragging clips on a timeline, you write code that describes your video, and a renderer turns that description into frames. React and Remotion make this approach accessible to any JavaScript developer.

This tutorial walks you through everything from a fresh install to your first animated composition. You don’t need an After Effects subscription or a background in motion graphics.

---

What Is Remotion?

Remotion is an open-source library that lets you build videos using React components. Each frame is a React render, and animations are driven by a useCurrentFrame() hook rather than keyframe curves. The result is video that is version-controlled, composable, data-driven, and reproducible.

Why “programmatic” matters

Traditional video tools treat video as a timeline artifact. Remotion treats it as a function:

frame → React component → PNG → MP4

This means you can loop over a JSON dataset and generate 500 personalised videos in one command, or AB-test a colour by changing a single variable. Your video lives in Git alongside your other source files, fully diffable and reviewable.

---

Prerequisites

• Node.js 18 or later
• Basic knowledge of React (hooks, components)
• A terminal you are comfortable using

---

Bootstrapping a New Remotion Project

The fastest way to start is the official CLI initialiser:

npx create-video@latest my-first-video
cd my-first-video
npm install

The wizard asks which template to start from. Choose Hello World for now. The generated project contains:

• remotion.config.ts (project-level configuration)
• src/index.ts (composition registry)
• src/Root.tsx (where you register compositions)
• src/HelloWorld/ (your first example composition)

---

Understanding the Core Hooks

useCurrentFrame()

Returns an integer representing the current frame number, starting from 0.

import { useCurrentFrame } from "remotion";

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  return <div style={{ opacity: frame / 30 }}>Hello</div>;
};

At frame 0 the element is invisible; at frame 30 it is fully opaque, producing a one-second fade-in at 30 fps.

useVideoConfig()

Returns the composition’s width, height, fps, and durationInFrames.

import { useCurrentFrame, useVideoConfig } from "remotion";

export const CenteredText: React.FC = () => {
  const { width, height } = useVideoConfig();
  return (
    <div
      style={{
        width,
        height,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "#0f0f0f",
        color: "#fff",
        fontFamily: "-apple-system, Segoe UI, Roboto, sans-serif",
        fontSize: 72,
      }}
    >
      Frame {useCurrentFrame()}
    </div>
  );
};

---

Registering a Composition

Open src/Root.tsx and register your component using <Composition>:

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

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

durationInFrames={90} at 30 fps gives you a 3-second video.

---

Previewing in the Browser

npm run dev

Open http://localhost:3000. You will see Remotion Studio, a timeline-based preview environment where you can scrub the playhead and watch your component re-render for each frame.

---

Adding Spring Animations with interpolate and spring

Remotion ships two utilities for smooth motion. interpolate maps an input range to an output range, similar to a CSS transition expressed in code.

import { interpolate, useCurrentFrame } from "remotion";

const frame = useCurrentFrame();
const translateY = interpolate(frame, [0, 30], [80, 0], {
  extrapolateRight: "clamp",
});

spring simulates physics-based easing.

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  fps,
  frame,
  config: { damping: 10 },
});

Combine both to build polished entrance animations without touching a single keyframe curve.

---

Sequencing and Layering Compositions

The <Sequence> component lets you offset when a child component starts:

import { Sequence } from "remotion";
import { Title } from "./Title";
import { Subtitle } from "./Subtitle";

export const Scene: React.FC = () => (
  <>
    <Sequence from={0} durationInFrames={60}>
      <Title />
    </Sequence>
    <Sequence from={30} durationInFrames={60}>
      <Subtitle />
    </Sequence>
  </>
);

Subtitle starts at frame 30, creating a staggered entrance. Both components play simultaneously between frames 30 and 60.

---

Rendering Your Video

When you are happy with the preview, render to MP4:

npx remotion render CenteredText out/video.mp4

For production pipelines, Remotion supports serverless rendering on AWS Lambda, which is particularly useful when you need to generate thousands of videos in parallel.

---

Using Pre-Built Templates to Ship Faster

Writing every animation from scratch is educational but time-consuming. Once you understand the fundamentals, pre-built Remotion templates can dramatically accelerate production work.

RenderComp offers a library of more than 1,000 production-ready Remotion templates, including lower thirds, kinetic text, data charts, and social media openers. Each template ships as source code you can customise directly in React, so you keep full creative control without spending days on boilerplate physics.

If you are building a video production pipeline for clients or creating content at scale, starting from a solid template library and adapting it to your brand is usually the most efficient path.

---

Summary

You have now seen the complete Remotion workflow: install, write a React component, register a composition, preview in Studio, and render to MP4. The key mental model is that every frame is a function of the frame number. Master that, and you can build any animation you can imagine in React.

Next steps: explore Remotion’s @remotion/player for embedding interactive video players in web apps, and look into @remotion/lambda for scalable cloud rendering.