Build a AI-Powered Video Creator

Build a programmatic video creation system using Remotion + Claude Code:

**Project Setup:**
1. Initialize Remotion in a Next.js project:
   ```bash
   npx create-video@latest
   ```

2. Create a design system for your videos:
   - Define brand colors in a `colors.ts` file
   - Set up fonts (Playfair Display for headlines, Manrope for body)
   - Create reusable animation utilities

**Core Architecture:**

### 1. Scene Components
Create modular scene components that handle their own animations:

```tsx
const HookScene: React.FC = () => {
  const frame = useCurrentFrame();

  // Word cycling with acceleration
  const words = ["anxious", "curious", "overwhelmed"];

  // Animate based on frame
  const opacity = interpolate(frame, [0, 15], [0, 1]);
  const scale = interpolate(frame, [0, 15], [0.9, 1], {
    easing: Easing.out(Easing.cubic)
  });

  return (
    <AbsoluteFill style={{ backgroundColor: colors.cream }}>
      {/* Scene content */}
    </AbsoluteFill>
  );
};
```

### 2. Transition System
Build a reusable TransitionWrapper component:

```tsx
type TransitionType =
  | "zoom-fade"      // Scene zooms in while fading
  | "crossfade-scale" // Cross-fade with scale
  | "slide-left"     // Slide out left, in from right
  | "slide-up"       // Slide up and out
  | "zoom-through";  // Zoom through to next scene

const TransitionWrapper: React.FC<{
  children: React.ReactNode;
  entryTransition?: TransitionConfig;
  exitTransition?: TransitionConfig;
  sceneDuration: number;
}> = ({ children, entryTransition, exitTransition, sceneDuration }) => {
  const frame = useCurrentFrame();
  // Handle entry/exit animations
};
```

### 3. Scene Orchestration
Sequence scenes with overlaps for smooth transitions:

```tsx
export const MainVideo: React.FC = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={171}>
        <HookScene />
      </Sequence>
      <Sequence from={161} durationInFrames={70}>
        <ResponseScene />
      </Sequence>
      {/* Overlap creates smooth transitions */}
    </AbsoluteFill>
  );
};
```

### 4. Animation Patterns

**Word-by-word reveal:**
```tsx
const WordReveal = ({ text, startFrame }) => {
  const frame = useCurrentFrame();
  const words = text.split(" ");

  return words.map((word, i) => {
    const wordStart = startFrame + i * 6;
    const opacity = interpolate(frame, [wordStart, wordStart + 10], [0, 1]);
    const y = interpolate(frame, [wordStart, wordStart + 10], [35, 0]);
    return <span style={{ opacity, transform: `translateY(${y}px)` }}>{word}</span>;
  });
};
```

**Staggered card entrances:**
- Cards enter from different directions (left, right, bottom)
- Add rotation during entry for dynamic feel
- Overlap timing for cascade effect

### 5. Audio Integration
```tsx
<Audio src={staticFile("sound/background.mp3")} volume={0.125} />
<Sequence from={55}>
  <Audio src={staticFile("sound/voiceover.mp3")} volume={0.5} />
</Sequence>
```

### 6. Export Configuration
```tsx
// Root.tsx
<Composition
  id="MainVideo"
  component={MainVideo}
  durationInFrames={986}
  fps={30}
  width={1920}
  height={1080}
/>
```

**Export command:**
```bash
npx remotion render MainVideo output.mp4
```

**Key Design Principles:**
1. Use `interpolate()` for all animations with proper easing
2. Clamp extrapolation to prevent animation overflow
3. Layer scenes with overlapping Sequences for transitions
4. Keep scene components pure—no side effects
5. Use `staticFile()` for all assets (audio, images)

**Output:**
- 1080p video at 30fps
- Professional transitions between scenes
- Synchronized audio
- Export-ready for YouTube, social media, ads