remotion-video

Remotion Video

Remotion turns React components into rendered video files. Every rule below exists because rendering happens frame by frame in headless browser instances: anything non-deterministic or time-based (instead of frame-based) produces flicker, desync, or broken renders.

Core mental model

• A video is a pure function of the current frame: frame -> pixels. The same frame number must always produce the same image, on any machine, at any time, in any order.
• Read the current frame with useCurrentFrame(). Read fps, duration, width, height with useVideoConfig().
• Never animate with wall-clock time, setTimeout, requestAnimationFrame, CSS transitions, or CSS animations. During rendering there is no continuous time — frames are captured independently and possibly in parallel. All motion derives from frame.

const frame = useCurrentFrame();
const { fps, durationInFrames, width, height } = useVideoConfig();
const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

Compositions

Register videos in the root file with <Composition>:

<Composition
  id="Promo"
  component={Promo}
  durationInFrames={30 * 10} // 10 s at 30 fps
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{ title: "Hello" }}
/>

• id must be unique and is what you pass to the render CLI.
• Express durations in terms of fps (fps * seconds), never magic frame counts.
• Use <Still> for single-frame outputs (thumbnails, OG images).
• For data-driven videos, use calculateMetadata on the composition to fetch data once and derive durationInFrames / props from it — do not fetch inside components per frame.

<Composition
  id="Podcast"
  component={Podcast}
  calculateMetadata={async ({ props }) => {
    const data = await fetchEpisode(props.episodeId);
    return {
      props: { ...props, data },
      durationInFrames: Math.ceil(data.durationSeconds * 30),
    };
  }}
  ...
/>