The fundamentals

The basic idea behind Remotion is that we'll give you a frame number and a blank canvas, and the freedom to render anything you want using React.

tsx
import { useCurrentFrame, AbsoluteFill } 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>
  );
};

tsx
import { useCurrentFrame, AbsoluteFill } 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: Frames per second. The duration in frames divided by FPS results in the duration in seconds.

These properties are variable and you can reuse a component multiple times with different properties.
Rather than hardcoding these values, we can derive them 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>
  );
};

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

Defining compositions

Using a composition you can define a video that should be rendered.

You define a composition by rendering a <Composition> component in src/Root.tsx, giving it an id, defining values for its height, width, fps and durationInFrames, and passing a React component to component.

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}
      />
    </>
  );
};

You can render as many compositions as you like in src/Root.tsx.