No history yet

Composition Architecture

Defining Your Video's Blueprint

In Remotion, every video starts with a Composition. Think of it as the main blueprint for your video. It's a React component where you define the most critical properties of your final output: its dimensions, frame rate, and total length. Since you're familiar with React, you can think of it as the root component for a specific video render.

This all happens in your entry file, typically remotion/index.ts. You'll use the <Composition /> component to register each video you want to create. Here’s what a basic registration looks like:

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

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

Let's break down these properties. id is a unique identifier for your video, and component is the React component that contains your animation logic. The other four props define the technical specifications of your video canvas.

• width & height: The dimensions of your video in pixels. 1920 by 1080 is standard for high-definition video. • fps: Frames per second. This determines the smoothness of the motion. Common values are 30 or 60. • durationInFrames: The total length of the video, measured in frames, not seconds.

The switch to thinking in frames with is a crucial mental shift. In traditional UI development, we think in seconds or milliseconds. In video production, everything is tied to the frame. This ensures your animations are perfectly synchronised and your output is deterministic, meaning it will render identically every single time.

You can easily calculate the video's length in seconds by dividing the duration in frames by the frames per second.

Duration (seconds)=durationInFramesfps\text{Duration (seconds)} = \frac{\text{durationInFrames}}{\text{fps}}

Organising Your Project

A single Remotion project can contain multiple compositions. This is incredibly useful for creating different scenes, variations of an animation, or even separate videos that share common components. To keep things tidy, you can group related compositions together using the <Folder /> component.

This organisational structure is reflected in the , a browser-based interface that provides a live preview of your animations. Folders help you navigate your project as it grows more complex.

import {Composition, Folder} from 'remotion';
import {Scene1} from './Scene1';
import {Scene2} from './Scene2';

// ... inside RemotionRoot
<>
  <Folder name="Main Story">
    <Composition
      id="Scene-1"
      component={Scene1}
      durationInFrames={120}
      // ... other props
    />
    <Composition
      id="Scene-2"
      component={Scene2}
      durationInFrames={180}
      // ... other props
    />
  </Folder>
</>

In this example, two separate compositions, Scene-1 and Scene-2, are grouped under a folder named "Main Story". This doesn't affect the final video output, but it makes your development environment much easier to manage, especially when you start building longer, multi-part videos.