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

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

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:

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

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

| Name | Config | Use Case | |------|--------|----------| | Smooth | { damping: 200 } | Default transitions | | Snappy | { damping: 20, stiffness: 200 } | Quick appearances | | Bouncy | { damping: 8, stiffness: 200 } | Playful elements (badges, icons) | | Gentle | { damping: 200, stiffness: 50 } | Large elements (product images) |

Typography Rules

| Role | Size | Weight | Timing on Screen | |------|------|--------|-----------------| | Hero number/stat | 120-200px | 800-900 | 3-5 seconds | | Section title | 64-80px | 600 | 2-4 seconds | | Subtitle | 36-48px | 500 | 2-3 seconds | | Body text | 24-32px | 400 | min 2 seconds | | Caption | 16-20px | 400 | min 1.5 seconds | | NEVER | 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

| Type | Frames @30fps | ms | |------|--------------|------| | Text fade in | 9-15 | 300-500 | | Text fade out | 6-12 | 200-400 | | Slide in | 12-18 | 400-600 | | Product appear | 18-30 | 600-1000 | | Scale pop | 6-12 | 200-400 | | Scene transition | 9-15 | 300-500 | | Item stagger | 2-4 | 67-133 |

Easing Reference

| Use Case | Easing | |----------|--------| | Element entering | Easing.out(Easing.cubic) | | Element exiting | Easing.in(Easing.cubic) | | Apple-style | Easing.bezier(0.25, 0.1, 0.25, 1.0) | | Dramatic enter | Easing.bezier(0.05, 0.7, 0.1, 1.0) | | Material Standard | Easing.bezier(0.4, 0.0, 0.2, 1.0) | | NEVER | linear (except progress bars) |

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

| Format | Total | Scenes | Frame Budget @30fps | |--------|-------|--------|-------------------| | 15s teaser | 450 frames | 5 | ~90 each | | 30s demo | 900 frames | 5 | ~180 each | | 60s launch | 1800 frames | 7 | ~260 each |

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

Cross-Fade Wrapper

const Fade: React.FC = 
  ({ 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 {children};
};

3D Integration

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

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

• Use ` (not `) 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

| Platform | Resolution | Aspect | Command | |----------|-----------|--------|---------| | YouTube | 1920x1080 | 16:9 | default | | TikTok/Reels | 1080x1920 | 9:16 | --width 1080 --height 1920 | | Instagram Square | 1080x1080 | 1:1 | --width 1080 --height 1080 |

# 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 ` from remotion (not `) 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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: AnastasiyaW
• Source: AnastasiyaW/claude-code-config
• License: MIT

Install and usage instructions live in the source repository linked above.