Remotion

Remotion Best Practices

Video creation in React using Remotion.

When to Use

• Creating video compositions
• Adding animations to video
• Working with subtitles/captions
• Embedding media (videos, images, audio)
• Sequencing and timing

Core Concepts

Compositions

Define video dimensions, duration, and frame rate:

import { Composition } from 'remotion';

<Composition
  id="MyVideo"
  component={MyComponent}
  durationInFrames={150}
  fps={30}
  width={1920}
  height={1080}
/>

Animation with useCurrentFrame

import { useCurrentFrame, interpolate } from 'remotion';

const MyComponent = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return <div style={{ opacity }}>Hello</div>;
};

Sequencing

import { Sequence } from 'remotion';

<Sequence from={0} durationInFrames={60}>
  <Scene1 />
</Sequence>
<Sequence from={60} durationInFrames={60}>
  <Scene2 />
</Sequence>

Detailed Rules

Load specific rules for detailed guidance:

Quick Reference

Interpolation

// Linear interpolation
const value = interpolate(frame, [0, 100], [0, 1]);

// With easing
const value = interpolate(frame, [0, 100], [0, 1], {
  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
});

// Clamped (default extrapolateLeft/Right: 'clamp')
const value = interpolate(frame, [0, 100], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

Spring Animation

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const { fps } = useVideoConfig();
const scale = spring({
  frame,
  fps,
  config: { damping: 200 },
});

Media

import { Video, Audio, Img, staticFile } from 'remotion';

// Local file
<Video src={staticFile('video.mp4')} />

// With controls
<Video
  src={src}
  volume={0.5}
  startFrom={30}
  endAt={120}
/>

Integration Notes

• Works with React 18+
• Use staticFile() for assets in /public
• Frame-based timing (not time-based)
• SSR-compatible components

Source: remotion-dev/skills

Proving the run

Observable: the composition renders end to end, and a still from the middle of the timeline exists and is not blank.

npx remotion still <CompositionId> out/frame.png --frame=<mid>
npx remotion render <CompositionId> out/video.mp4

A composition that type-checks can still render black — a mistimed Sequence, an asset that 404s, a useCurrentFrame off by a factor of fps. Render a still from the middle rather than frame 0, which is often legitimately empty, and look at it. Report the frame count and duration actually produced, not the ones configured.