Remotion Production Guide

Remotion Production Guide

Complete reference for creating production-quality videos with Remotion. Combines Apple-style design rules, motion design principles, and battle-tested animation patterns.

Quick Start

bashCopy code
mkdir -p src && npm init -y
npm install --save-exact remotion @remotion/cli react react-dom typescript @types/react
echo "node_modules/\ndist/\nout/\n.cache/" > .gitignore

Project Structure

Copy code
src/
  index.ts          # registerRoot
  Root.tsx           # Composition registration
  videos/
    ProductDemo/
      index.tsx      # Main composition
      scenes/        # One file per scene
      components/    # Reusable visual elements
  lib/
    constants.ts     # ALL editable values (colors, timing, fonts, sizes)
    animations.ts    # Reusable animation helpers
  public/            # Static assets (images, music, sounds)

Constants-First Design

ALWAYS define all values in constants.ts. Never hardcode in components:

tsxCopy code
export const COLORS = {
  bg: '#000000',
  text: '#FFFFFF',
  accent: '#007AFF',
  muted: '#8E8E93',
  cardBg: '#1C1C1E',
} as const;

export const TIMING = {
  fps: 30,
  fadeIn: 15,        // 500ms
  fadeOut: 12,       // 400ms
  stagger: 4,        // 133ms between items
} as const;

export const SIZES = {
  heroText: 120,     // px
  titleText: 72,
  subtitleText: 42,
  bodyText: 28,
  captionText: 20,   // NEVER below 16
} as const;

Animation Library

tsxCopy code
import { interpolate, spring, Easing } from 'remotion';

// --- Opacity ---
export const fadeIn = (frame: number, delay = 0, duration = 15) =>
  interpolate(frame, [delay, delay + duration], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
    easing: Easing.out(Easing.cubic),
  });

// --- Movement ---
export const slideUp = (frame: number, delay = 0, distance = 40) =>
  interpolate(frame, [delay, delay + 20], [distance, 0], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
    easing: Easing.out(Easing.cubic),
  });

// --- Scale ---
export const scalePop = (frame: number, fps: number, delay = 0) =>
  Math.min(spring({ frame: frame - delay, fps, config: { damping: 12, mass: 0.5 } }), 1);

// --- Stagger ---
export const stagger = (index: number, base = 0, gap = 4) => base + index * gap;

// --- Counter ---
export const countTo = (frame: number, target: number, delay = 0, duration = 30) =>
  Math.round(target * interpolate(frame, [delay, delay + duration], [0, 1], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
    easing: Easing.out(Easing.cubic),
  }));

Spring Presets

Typography Rules

Rules:

• Letter-spacing: -1 to -2px for large text (>48px)
• Line-height: 1.1-1.2 for headings, 1.4 for body
• Max 7 words on screen simultaneously
• NEVER animate text while expecting reading
• Font: Inter, Geist Sans, or system-ui

Animation Timing

Easing Reference

Color Palettes

Dark theme (premium/tech): bg #000/#0A0A0A, text #FFF, accent from brand Light theme (consumer/clean): bg #F5F3EF/#FFF, text #1D1D1F, accent from brand

• Max 3 colors + black/white/gray
• Background:text contrast min 7:1
• Use linear-gradient for premium text (WebkitBackgroundClip: 'text')

Scene Pacing

Breathing rule: After 3+ fast cuts, add one slow shot (5-8s). Alternate rhythm: FAST→SLOW→MEDIUM.

Cross-Fade Wrapper

tsxCopy code
const Fade: React.FC<{ children: React.ReactNode; dur: number; fade?: number }> = 
  ({ children, dur, fade = 15 }) => {
  const frame = useCurrentFrame();
  const inVal = interpolate(frame, [0, fade], [0, 1], { extrapolateRight: 'clamp' });
  const outVal = interpolate(frame, [dur - fade, dur], [1, 0], {
    extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
  });
  return <AbsoluteFill style={{ opacity: Math.min(inVal, outVal) }}>{children}</AbsoluteFill>;
};

3D Integration

bashCopy code
# React Three Fiber in Remotion:
npm install @remotion/three @react-three/fiber three @types/three

# Lottie animations:
npm install @remotion/lottie lottie-web

• Use <ThreeCanvas> (not <Canvas>) for R3F in Remotion
• Use useCurrentFrame() instead of R3F's useFrame()
• Spline: design in spline.design, export to R3F, import via @remotion/three

Export Settings

bashCopy code
# High quality master
npx remotion render src/index.ts CompositionId out/video.mp4

# Custom quality (CRF 18 = high, 28 = web preview)
npx remotion render src/index.ts CompositionId out/video.mp4 --crf 18

Universal: MP4 container, H.264, AAC audio, yuv420p.

Critical Rules

• NEVER use CSS transitions/animations - won't render during export
• ALWAYS use useCurrentFrame() + interpolate() or spring()
• ALWAYS extrapolateRight: 'clamp' to prevent overshoot
• spring() never reaches exactly 1.0 - use Math.min(spring(...), 1) for scale
• Use <Img> from remotion (not <img>) for reliable image loading
• First render downloads Chrome Headless Shell (~108MB), subsequent use cache
• Google Fonts: use @remotion/google-fonts for reliable loading

DON'T List

• Don't rotate text
• Don't bounce text (unless playful brand)
• Don't animate 3+ elements simultaneously
• Don't use more than 2 animation styles per video
• Don't use star wipes or random transitions
• Don't put more than 7 words on screen at once
• Don't start with a logo (start with the hook)
• Don't commit node_modules