Skip to main content

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.