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 — no After Effects subscription required.

What Is Remotion?

Remotion is an open-source library that lets you build videos using React components. Each frame is a React render. Animations are driven by a useCurrentFrame() hook instead of 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. You can AB-test a colour by changing a variable. You can diff your video in Git.

Prerequisites

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

Step 1 — Bootstrap 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

Step 2 — Understand 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 — 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>
  );
};

Step 3 — Register 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.

Step 4 — Preview in the Browser

npm run dev

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

Step 5 — Add Spring Animations with `interpolate` and `spring`

Remotion ships two utilities for smooth motion:

interpolate — maps an input range to an output range, like 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.

Step 6 — Sequence and Layer 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 play simultaneously between frames 30–60.

Step 7 — Render 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 — 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 dramatically accelerate production work.

RenderComp offers a library of more than 1,400 production-ready Remotion templates — lower thirds, kinetic text, data charts, social media openers, and more. 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 to your brand is usually the most efficient path.

FAQ

Q: Does Remotion require a paid licence? A: Remotion is free for personal and open-source projects. Commercial use requires a company licence. Check the official Remotion website for current pricing.

Q: Can I use Remotion with TypeScript? A: Yes. The official project scaffold is TypeScript-first. Type safety helps catch animation errors at compile time.

Q: How is Remotion different from ffmpeg? A: ffmpeg is a video processing tool — great for converting, trimming, and transcoding. Remotion is a video creation tool. It renders React components to frames and then pipes those frames to ffmpeg under the hood.

Q: What frame rate should I use for social media video? A: 30 fps is the standard for most platforms. YouTube and LinkedIn support 60 fps. Set fps in your <Composition> to match your target platform.

Q: Can I include audio in a Remotion video? A: Yes. Use the <Audio> component from Remotion. You can control volume, trim, and offset audio per frame just like any other element.

Q: How do I generate multiple videos from a dataset? A: Pass a defaultProps object to your composition and override it at render time with --props or inputProps. This lets you loop over a JSON array and render one video per row.

Q: Can Remotion render at 4K resolution? A: Yes. Set width={3840} and height={2160} in your composition. Render time increases with resolution, so use AWS Lambda for large batches.

Q: Is there a way to preview animations without running a full render? A: Remotion Studio (the browser preview at localhost:3000) renders every frame interactively. It is the primary development tool and updates live as you edit your components.

Summary

You have now seen the complete Remotion workflow: install → write a React component → register a composition → preview in Studio → 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.