remotion-best-practices

When to use

Use this skill whenever you are writing or modifying Remotion code. It covers the fundamental patterns that every Remotion project needs — from animation primitives to render settings.

Critical Rules

1. ALL animations MUST use useCurrentFrame() — CSS transitions, CSS animations, and Tailwind animation classes are FORBIDDEN. They do not render correctly because Remotion renders each frame independently.
2. Use spring() for organic motion, not interpolate() with easing. Springs feel natural. Linear/eased interpolations feel mechanical.
3. Write timing in seconds, convert to frames — multiply by fps from useVideoConfig(). Never hardcode frame numbers without commenting the equivalent seconds.
4. Always clamp interpolations — use extrapolateLeft: 'clamp', extrapolateRight: 'clamp' to prevent values from going out of range.
5. 1920x1080 at 30fps is the standard. Design for this. All size guidelines assume this resolution.

Animation Fundamentals

The Frame Model

Remotion renders videos frame-by-frame. Each frame is an independent React render. There is no concept of "time passing" between frames — every frame must be calculable from just the frame number.

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

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps, durationInFrames, width, height } = useVideoConfig();

  // This is the ONLY way to animate in Remotion
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>Content</div>
  );
};

Interpolation

Maps a frame number to an output value.

// Basic: fade in over 1 second (30 frames at 30fps)
const opacity = interpolate(frame, [0, 1 * fps], [0, 1], {
  extrapolateRight: 'clamp',
});

// Multi-step: fade in, hold, fade out
const opacity = interpolate(
  frame,
  [0, 30, 120, 150],  // frames
  [0, 1,  1,   0],    // opacity values
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

// Map to any range
const translateY = interpolate(frame, [0, 30], [50, 0], {
  extrapolateRight: 'clamp',
});
const rotation = interpolate(frame, [0, 60], [0, 360]);
const scale = interpolate(frame, [0, 30], [0.5, 1], {
  extrapolateRight: 'clamp',
});

Spring Physics (preferred for most animations)

Springs produce natural-feeling motion. They output values from 0 to 1.

const progress = spring({
  frame,
  fps,
  config: { damping: 200 }, // smooth, no bounce
});

// Map spring output to any range
const translateY = interpolate(progress, [0, 1], [50, 0]);
const scale = interpolate(progress, [0, 1], [0.8, 1]);

Spring Configurations

Delayed Springs (staggered entrances)

// Delay by subtracting frames
const progress = spring({
  frame: frame - 15,  // starts 15 frames (0.5s) later
  fps,
  config: { damping: 200 },
});

// Or use the delay parameter
const progress = spring({
  frame,
  fps,
  delay: 15,
  config: { damping: 200 },
});

Enter + Exit Animation

const { durationInFrames, fps } = useVideoConfig();

const entrance = spring({ frame, fps, config: { damping: 200 } });
const exit = spring({
  frame,
  fps,
  delay: durationInFrames - 1 * fps,  // start exit 1s before end
  durationInFrames: 1 * fps,
});

const opacity = entrance - exit;  // springs are just numbers
const scale = interpolate(entrance - exit, [0, 1], [0.9, 1]);

Easing (when springs don't fit)

import { Easing } from 'remotion';

const value = interpolate(frame, [0, 60], [0, 1], {
  easing: Easing.inOut(Easing.quad),  // smooth acceleration/deceleration
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

// Common easings (least to most dramatic):
// Easing.linear        — constant speed
// Easing.quad          — subtle curve
// Easing.sin           — gentle wave
// Easing.exp           — dramatic acceleration
// Easing.circle        — very dramatic
// Easing.bezier(x1, y1, x2, y2) — custom curve

Composition Structure

Defining a Composition

// src/Root.tsx
import { Composition, Folder } from 'remotion';
import { MyVideo } from './compositions/MyVideo';

export const RemotionRoot = () => {
  return (
    <Folder name="Projects">
      <Composition
        id="MyVideo"
        component={MyVideo}
        durationInFrames={30 * 60 * 5}  // 5 minutes at 30fps
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          title: 'My Video',
        }}
      />
    </Folder>
  );
};

Scene Sequencing with Series

import { Series } from 'remotion';

export const MyVideo: React.FC = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={150}>
        <IntroScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={300}>
        <MainScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={150}>
        <OutroScene />
      </Series.Sequence>
    </Series>
  );
};

Scene Sequencing with Sequence (overlapping/parallel)

import { Sequence, AbsoluteFill } from 'remotion';

export const MyVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* Background runs the whole time */}
      <Sequence from={0}>
        <Background />
      </Sequence>

      {/* Scenes at specific frame offsets */}
      <Sequence from={0} durationInFrames={150}>
        <IntroScene />
      </Sequence>
      <Sequence from={150} durationInFrames={300}>
        <MainScene />
      </Sequence>

      {/* Overlapping: music fades in during intro */}
      <Sequence from={60}>
        <BackgroundMusic />
      </Sequence>
    </AbsoluteFill>
  );
};

Key difference: Series plays sequences one after another automatically. Sequence lets you place things at exact frame positions and overlap them.

Scene Template

Every scene should follow this structure:

import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

// Timeline markers (document what each frame range does)
const INTRO = 0;         // 0s
const TITLE_IN = 15;     // 0.5s
const CONTENT_IN = 45;   // 1.5s
const HOLD = 120;        // 4s
const FADE_OUT = 140;    // 4.67s

export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const titleProgress = spring({
    frame: frame - TITLE_IN,
    fps,
    config: { damping: 200 },
  });

  const contentProgress = spring({
    frame: frame - CONTENT_IN,
    fps,
    config: { damping: 20, stiffness: 200 },
  });

  return (
    <AbsoluteFill style={{
      backgroundColor: '#0A0A0F',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      {/* Title */}
      <div style={{
        opacity: titleProgress,
        transform: `translateY(${interpolate(titleProgress, [0, 1], [20, 0])}px)`,
        fontSize: 72,
        fontWeight: 700,
        color: '#E5E7EB',
      }}>
        Scene Title
      </div>

      {/* Content */}
      <div style={{
        opacity: contentProgress,
        transform: `translateY(${interpolate(contentProgress, [0, 1], [30, 0])}px)`,
        fontSize: 48,
        color: '#9CA3AF',
        marginTop: 24,
      }}>
        Supporting content
      </div>
    </AbsoluteFill>
  );
};

Stills (single-frame images)

import { Still } from 'remotion';

// For thumbnails, social cards, etc.
<Still id="Thumbnail" component={Thumbnail} width={1280} height={720} />

Dynamic Metadata

import { CalculateMetadataFunction } from 'remotion';

const calculateMetadata: CalculateMetadataFunction<Props> = async ({ props }) => {
  return {
    durationInFrames: Math.ceil(props.audioDurationSec * 30),
    props: { ...props, resolvedData: await fetchData() },
  };
};

Common Patterns

Staggered List Entrance

const items = ['First', 'Second', 'Third', 'Fourth'];
const STAGGER_DELAY = 4; // frames between each item

{items.map((item, index) => {
  const delay = index * STAGGER_DELAY;
  const progress = spring({
    frame: frame - delay,
    fps,
    config: { damping: 20, stiffness: 200 },
  });

  return (
    <div key={item} style={{
      opacity: progress,
      transform: `translateY(${interpolate(progress, [0, 1], [20, 0])}px)`,
    }}>
      {item}
    </div>
  );
})}

Typewriter Effect

const getTypedText = (frame: number, text: string, charsPerFrame = 0.5) => {
  const chars = Math.floor(frame * charsPerFrame);
  return text.slice(0, Math.min(chars, text.length));
};

// Usage
const visibleText = getTypedText(frame - startFrame, fullText, 0.5);

// With blinking cursor
const cursorOpacity = interpolate(
  frame % 16,
  [0, 8, 16],
  [1, 0, 1]
);
<span style={{ opacity: cursorOpacity }}>▌</span>

Pulsing/Breathing Effect

// Subtle breathing — use for ambient "alive" feeling
const pulse = Math.sin(frame * 0.08) * 0.15 + 0.85;

<div style={{ opacity: pulse }}>Breathing element</div>
<div style={{ transform: `scale(${pulse})` }}>Pulsing element</div>

Fade Between Sections

const SECTION_A_END = 100;
const SECTION_B_START = 100;
const CROSSFADE_DURATION = 30;

const sectionAOpacity = interpolate(
  frame,
  [SECTION_A_END - CROSSFADE_DURATION, SECTION_A_END],
  [1, 0],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

const sectionBOpacity = interpolate(
  frame,
  [SECTION_B_START, SECTION_B_START + CROSSFADE_DURATION],
  [0, 1],
  { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
);

Counter Animation

const countTo = 1000000;
const progress = spring({ frame, fps, config: { damping: 200 } });
const displayNumber = Math.floor(progress * countTo).toLocaleString();

Rotating/Spinning Element

const rotation = interpolate(frame, [0, 60], [0, 360]);
// Or continuous:
const continuousRotation = frame * 2; // 2 degrees per frame

Rendering

Codecs

Render Commands

# ProRes for editing (recommended workflow)
npx remotion render src/index.ts CompositionName out/video-prores.mov \
  --codec prores --prores-profile 4444 --jpeg-quality 100 \
  --width 1920 --height 1080 --concurrency 16

# H.264 max quality
npx remotion render src/index.ts CompositionName out/video-1080p.mp4 \
  --codec h264 --crf 10 --jpeg-quality 100 \
  --width 1920 --height 1080 --concurrency 16

# Quick preview (half resolution)
npx remotion render src/index.ts CompositionName out/preview.mp4 \
  --codec h264 --crf 23 --scale 0.5 --concurrency 16

CRF Reference (H.264)

Performance

• Set --concurrency to roughly your CPU thread count (e.g., 16 for 8-core)
• ProRes renders faster than H.264
• Use --scale 0.5 for previews to cut render time significantly

Assets

Images

import { Img, staticFile } from 'remotion';

// From public/ folder
<Img src={staticFile('images/photo.png')} style={{ width: 400 }} />

// Remote URL (will be downloaded during render)
<Img src="https://example.com/image.png" />

Video

import { OffthreadVideo, staticFile } from 'remotion';

<OffthreadVideo
  src={staticFile('video.mp4')}
  startFrom={30}           // trim start (frames)
  endAt={150}              // trim end (frames)
  volume={0.5}             // 0-1
  playbackRate={1.5}       // speed
  muted={false}
/>

Audio

import { Audio, staticFile } from 'remotion';

<Audio
  src={staticFile('music.mp3')}
  startFrom={0}
  volume={(f) => interpolate(f, [0, 30], [0, 0.8], { extrapolateRight: 'clamp' })}
/>

Fonts

import { loadFont } from '@remotion/google-fonts/Inter';
const { fontFamily } = loadFont();

// Or local fonts via CSS
const fontFace = `@font-face {
  font-family: 'CustomFont';
  src: url(${staticFile('fonts/CustomFont.woff2')}) format('woff2');
}`;

Folder Structure (recommended)

src/
├── Root.tsx                    # Composition definitions
├── components/
│   └── core/                   # Reusable across all projects
│       ├── AnimatedText.tsx     # Text with spring entrance
│       ├── SceneContainer.tsx   # Safe margins, backgrounds
│       └── effects/            # GlitchText, ShinyText, etc.
├── compositions/
│   └── ProjectName/
│       ├── index.tsx           # Main composition (Series of scenes)
│       ├── scenes/             # Individual scene components
│       ├── components/         # Project-specific components
│       └── constants/          # colors.ts, timing.ts, typography.ts
└── styles/                     # Shared style configs
    ├── colors.ts
    └── typography.ts

Anti-Patterns

Troubleshooting