How to make videos with React, programmatically

Short answer: use Remotion. A video is a React component that reads the current frame with useCurrentFrame(); a <Composition> gives it a size, frame rate and length; npx remotion render screenshots every frame in a headless browser and encodes the MP4. Because it is a component, props make one template into as many videos as you have data.

How Remotion works

A video is a function of time. Remotion gives your component the frame number and asks for that frame's UI. It renders every frame — in parallel, out of order — and stitches them together with audio. Two consequences:

• Everything animated must be computed from frame. No setTimeout, no CSS transitions, no state carried between frames.
• Everything the web can draw, a video can show — CSS, SVG, canvas, WebGL, fonts, your own design system.

A minimal video

npx create-video@latest

// src/Title.tsx
import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const Title = ({ title }: { title: string }) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{ background: "white", alignItems: "center", justifyContent: "center" }}
    >
      <h1 style={{ fontSize: 96, opacity }}>{title}</h1>
    </AbsoluteFill>
  );
};

// src/Root.tsx
import { Composition } from "remotion";
import { Title } from "./Title";

export const RemotionRoot = () => (
  <Composition
    id="Title"
    component={Title}
    durationInFrames={90}
    fps={30}
    width={1920}
    height={1080}
    defaultProps={{ title: "Hello from React" }}
  />
);

npx remotion studio previews it with a scrubbable timeline; npx remotion render Title out/title.mp4 renders it.

One template, many videos

The point of making video in code is that the composition takes props. Render the same template with different values from the CLI:

npx remotion render Title out/acme.mp4 --props='{"title":"Welcome, Acme"}'

Or from Node, in a loop over your data:

import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";

const serveUrl = await bundle({ entryPoint: "./src/index.ts" });

for (const customer of ["Acme", "Globex", "Initech"]) {
  const inputProps = { title: `Welcome, ${customer}` };
  const composition = await selectComposition({ serveUrl, id: "Title", inputProps });
  await renderMedia({
    composition,
    serveUrl,
    codec: "h264",
    outputLocation: `out/${customer}.mp4`,
    inputProps,
  });
}

Bundle once, render many. For volume, Remotion Lambda runs the same render on AWS, split across many functions.

When code is the right way to make a video

• The video is made of UI — product demos, changelogs, onboarding. Your components and CSS render as-is.
• You make it more than once — per release, per customer, per locale.
• An agent writes it — Claude Code and Cursor can write Remotion; they cannot drive a timeline editor.

It is the wrong tool for filmed footage and character animation — see Remotion vs After Effects.

Skip writing the motion

The hard part is not the API; it is motion that looks professional. snapcn is a library of finished shots for Remotion — text, prompts and AI answers, devices and screens, captions — installed as source you own:

npx shadcn@latest add @snapcn/text-reveal

Next: how to make a product demo video in React.

FAQ