Setting Up Remotion + Claude Code

# Create a new Remotion project
npx create-video@latest my-video

# Navigate to the project
cd my-video

# Start the development studio
npx remotion studio

my-video/
├── src/
│   ├── Root.tsx           # Registers all compositions
│   ├── HelloWorld.tsx     # A video component
│   └── MyComposition.tsx  # Another video component
├── public/                # Static assets (images, fonts)
├── remotion.config.ts     # Remotion configuration
├── package.json
└── tsconfig.json

# Remotion Video Project

This is a Remotion video project using React and TypeScript.

## Key Files
- src/Root.tsx: Register all compositions here
- src/: Video components go here
- public/: Static assets (images, audio, fonts)

## Conventions
- Use TypeScript for all components
- Use useCurrentFrame() and interpolate() for animations
- Use spring() for physics-based motion
- Use <Sequence> to arrange scenes in order
- Videos are 1920x1080 at 30fps unless specified
- Export components from their own files
- Register compositions in Root.tsx

# In your project directory, run:
claude

# Then ask Claude Code:
"Create a Remotion component called TitleCard that
shows a centered title 'Hello AI Video' with a
fade-in animation over 1 second, then stays visible
for 2 seconds, then fades out over 0.5 seconds.
Use a dark gradient background. Register it as a
composition in Root.tsx with 30fps and the correct
duration."