remotion-production-guidelisted
Install: claude install-skill AnastasiyaW/claude-code-config
# 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