Remotion: make videos with React code

Glidezo isn't connected to Remotion. Our own skills use HyperFrames, a competing tool, so weigh this page with that in mind. It is a summary of Remotion's terms, not legal advice.

What Remotion is

You write a React component. Remotion tells it which frame is being drawn, and your code works out how everything looks at that moment. To make the video, Remotion opens the component in a headless browser, captures each frame, and joins them with FFmpeg. This is the idea behind the clip above:

const frame = useCurrentFrame();
const left = interpolate(frame, [20, 110], [0, 1400], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });

Because a video is code, you can change one word, feed in data, or render a thousand versions. In return, you need to be comfortable with Node.js and React, or have an agent that is.

Is Remotion free? The licence in plain words

Who pays depends on the size of your organisation, not on how many people use Remotion.

What else to know:

• It isn't open source. Remotion calls it source-available under its own licence.
• A 20-person company with one user still pays. Headcount decides, not users. An agency's clients count too if they own or run the project.
• You can't resell Remotion or let customers upload their own Remotion projects to your render server.
• The Free License has the same features as the paid one; paid gets priority support.
• Your videos stay yours. Remotion puts no restrictions on generated media. Codec patent fees, if any apply, are your responsibility.
• Telemetry: rendering in the browser reports to Remotion and can't be turned off. Remotion says server telemetry becomes mandatory for Automators in version 5.0.
• The terms are moving. Its licence file says the licence will "slightly change" in version 5.0, so read the FAQ before you commit.

Make a video: what we ran

These are the official starter steps. We ran them on Linux, with a 4-core CPU and Node.js 24, on 2026-11-02.

npx create-video --yes --blank my-video
cd my-video
npm run dev

create-video took 76 seconds and put 340 MB in the project. npm run dev starts Remotion Studio for previewing. The blank starter only has an empty composition, so to see something, replace src/Root.tsx with this:

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

const Hello = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
  return (
    <AbsoluteFill style={{ background: "#0a0a0b", color: "#f4f4f5", fontSize: 120, justifyContent: "center", alignItems: "center", opacity }}>
      Frame {frame}
    </AbsoluteFill>
  );
};

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

Then render it:

npx remotion render src/index.ts Hello out.mp4

That made a 3-second MP4 here. With version 4.0.540, the 6-second clip above took 14 to 16 seconds and an 8-second clip about 16. Those are simple clips of text and shapes, so expect heavier videos to take longer.

Using Remotion with Claude Code

Remotion publishes its own Agent Skills, which teach an agent how to write Remotion well. Its docs give these steps:

npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

# in a second terminal, in the same folder
claude

Then describe the video you want. We ran the setup and confirmed the files were added to .claude/skills. Remotion warns to review them before use, as they run with your agent's permissions. We wrote our clips with Claude Code directly and didn't judge how much the skills change the result. Claude Code needs a paid Claude plan.

Templates

Remotion's template page listed 20 free and 3 paid templates on 2026-11-02. For a first project, Blank and Hello World are the simplest; others include TikTok (word-by-word captions), Audiogram, Code Hike (animated code), Stills (images), Prompt to Video and several SaaS starters. The paid ones are Editor Starter, Watercolor Map and a timeline component.

Remotion alternatives

• HyperFrames: HTML instead of React, Apache-2.0, no seat count. Slower than Remotion on our one test. It's what our free skills use, for example Kinetic Type Title.
• Motion Canvas: TypeScript animation with a live preview editor, MIT.
• Manim: Python, made for maths and explainer animation, MIT.
• Claude Motion: prompt to animation inside Claude, with nothing to install. Team and Enterprise only, in beta.

We haven't made the same video in Motion Canvas or Manim. Open-source projects lists more, with their licences.

What Remotion can't do

It doesn't film anything or generate realistic footage: it draws text, shapes and media you give it. For generated clips you need a video model, which can Claude make videos? compares. To make a vertical video with code, see our Shorts tutorial, which uses HyperFrames. You can't run Remotion on Glidezo: nothing here renders code online.