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 ```bash 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: ```tsx 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 ```tsx import { interpolate, spring, Easing } fr...