Skip to main content

The fundamentals

React components​

The idea of Remotion is to give you a frame number and a blank canvas, to which you can render anything you want using React. This is an example React component that renders the current frame as text:

MyComposition.tsx
tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};
MyComposition.tsx
tsx
import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyComposition = () => {
  const frame = useCurrentFrame();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        fontSize: 100,
        backgroundColor: "white",
      }}
    >
      The current frame is {frame}.
    </AbsoluteFill>
  );
};

A video is a function of images over time. If you change content every frame, you'll end up with an animation.

Video properties​

A video has 4 properties:

  • width in pixels.
  • height in pixels.
  • durationInFrames: the number of frames which the video is long.
  • fps: framerate of the video.

You can obtain these values from the useVideoConfig() hook:

tsx
import {AbsoluteFill, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps, durationInFrames, width, height} = useVideoConfig();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 60,
        backgroundColor: 'white',
      }}
    >
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};
tsx
import {AbsoluteFill, useVideoConfig} from 'remotion';
 
export const MyComposition = () => {
  const {fps, durationInFrames, width, height} = useVideoConfig();
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 60,
        backgroundColor: 'white',
      }}
    >
      This {width}x{height}px video is {durationInFrames / fps} seconds long.
    </AbsoluteFill>
  );
};
note

A video's first frame is 0 and its last frame is durationInFrames - 1.

Compositions​

A composition is the combination of a React component and video metadata.

By rendering a <Composition> component in src/Root.tsx, you can register a renderable video and make it visible in the Remotion sidebar.

src/Root.tsx
tsx
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      component={MyComposition}
    />
  );
};
src/Root.tsx
tsx
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyComposition"
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
      component={MyComposition}
    />
  );
};
note

You can register multiple compositions in src/Root.tsx by wrapping them in a React Fragment:
<><Composition/><Composition/></>. See also: How to combine compositions?