remotion

Remotion Video Framework Skill

Deep expertise in creating programmatic videos with Remotion framework.

Overview

Remotion is a framework for creating videos programmatically using React. Instead of traditional video editing, you write React components that describe each frame of your video.

Core Concepts

Compositions

A composition is a complete video with defined parameters:

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={300}  // 10 seconds at 30fps
  fps={30}
  width={1920}
  height={1080}
/>

Frames and Time

Everything in Remotion is frame-based:

• Use useCurrentFrame() to get current frame number
• Convert seconds to frames: seconds * fps
• Frame 0 is the start of the video

const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const seconds = frame / fps;

Sequences

Sequences allow you to compose multiple components with specific timing:

<Sequence from={0} durationInFrames={90}>
  <Intro />
</Sequence>
<Sequence from={90} durationInFrames={180}>
  <Main />
</Sequence>
<Sequence from={270} durationInFrames={30}>
  <Outro />
</Sequence>

Animation

Interpolation

Transform values smoothly over time:

import { interpolate } from 'remotion';

const opacity = interpolate(
  frame,
  [0, 30],           // Input range (frames)
  [0, 1],            // Output range (opacity)
  {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  }
);

Spring Animations

Natural, physics-based animations:

import { spring } from 'remotion';

const scale = spring({
  frame,
  fps,
  config: {
    damping: 100,      // How quickly it settles
    stiffness: 200,    // How bouncy
    mass: 0.5          // Weight
  }
});

Common Animation Patterns

Fade In:

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

Slide In:

const translateY = interpolate(frame, [0, 30], [100, 0], { extrapolateRight: 'clamp' });