Introduction to Remotion

Creating Videos with Code

Imagine creating a video not with a timeline editor, but with lines of code. Instead of dragging and dropping clips, you write components. This is the world of programmatic video, and it's where Remotion shines. It lets you use the web development skills you already have, specifically React, to build dynamic, data-driven videos.

Remotion is a framework for creating videos programmatically using React.

By using React, you can leverage its component-based architecture, state management, and the entire JavaScript ecosystem to create animations, data visualizations, and personalized videos on a massive scale. Let's get a project set up.

Getting Started

Setting up a new Remotion project is simple. You don't need to install anything globally. Just open your terminal and run the following command. It will guide you through a setup wizard to create a new project folder with all the necessary files.

npm init video

Once the setup is complete, navigate into your new project directory and start the Remotion Studio with npm start. The Studio is a live preview environment that runs in your browser. It lets you see your video, scrub through the timeline, and adjust your code with hot-reloading, making the development process fast and interactive.

Core Building Blocks

A Remotion project is built around a few key concepts. The first is the Composition.

Composition

noun

In Remotion, a Composition is the top-level entry point for a video. It defines fundamental properties like its dimensions, duration in frames, and frame rate (FPS).

You define compositions in the main entry file of your project, typically src/Root.tsx. Here's what a basic composition looks like:

import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="HelloWorld"
        component={MyVideo}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Inside your video component, you'll often use a Sequence. A Sequence is a wrapper that makes its children appear only during a specific time window. This is how you orchestrate animations and time different elements to appear and disappear.

Think of a Composition as the entire movie, and a Sequence as a specific scene within it.

Here’s how you might use a sequence to show a title for the first two seconds of a 30 FPS video:

import { Sequence } from 'remotion';
import { Title } from './Title';

export const MyVideo = () => {
  return (
    <div>
      {/* This sequence starts at frame 0 and lasts 60 frames */}
      <Sequence from={0} durationInFrames={60}>
        <Title text="Hello World" />
      </Sequence>
    </div>
  );
};

Rendering Your Video

After you've coded your video and are happy with the preview in the Remotion Studio, the final step is to render it into a video file. This is done using the Remotion CLI. To render the HelloWorld composition we defined earlier into an MP4 file, you would run this command:

npx remotion render src/index.ts HelloWorld out/video.mp4

This command tells Remotion to:

render a video.
Use src/index.ts as the entry point.
Find the composition with the ID HelloWorld.
Save the output to out/video.mp4.

Remotion will then use a headless browser to capture each frame and stitch them together into a high-quality video file using FFmpeg.

Quiz Questions 1/5

What web development library is Remotion built upon, allowing developers to use their existing skills to create videos?

Quiz Questions 2/5

Which command should you run in your terminal to start the Remotion Studio and see a live preview of your video?

You now have the basic building blocks to start creating videos with Remotion. From here, you can explore adding animations, fetching data, and creating truly dynamic visual content with code.

SaaS Video Marketing with Remotion