# Video Renderer

Remotion-based video renderer for StemeDB marketing and pitch videos.

## Compositions

| Composition | Purpose | Aspect Ratio |
|-------------|---------|--------------|
| `ExpertConversation` | TikTok/Reels style product discovery videos | 9:16 |
| `PitchVideo` | Pitch presentations with slide → app demo transitions | 16:9 |

## Quick Start

```bash
# Install dependencies
pnpm install

# Open Remotion Studio (preview/edit)
pnpm studio

# Render PitchVideo
pnpm render:pitch
```

## Pitch Video Structure

The pitch video is built from "blocks" - each with its own MP3 audio file:

| Block Type | Visual | Example |
|------------|--------|---------|
| `stat` | Big number with count-up animation | "79% of FDA Warning Letters..." |
| `slide` | Full-screen headline with optional subheadline | "With AI making more decisions..." |
| `problem` | Problem statement with icon | "Sources disagree" |
| `feature` | Feature card with icon and description | "Conflict Visibility" |
| `app-demo` | Dashboard screenshot with animated callouts | Skeptic Query page |
| `closing` | CTA with animated button | "Schedule a Demo" |

## Assets

### Audio Files

Place MP3 voiceover files in `public/audio/`:

```
public/audio/
├── 01-hook-stat.mp3
├── 02-hook-reveal.mp3
├── 03-problem-1.mp3
...
├── 30-close.mp3
└── background-music.mp3 (optional)
```

### Screenshots

Place dashboard screenshots in `public/screenshots/`:

```
public/screenshots/
├── skeptic-query.png
├── weight-distribution.png
├── audit-trail.png
├── sources-page.png
├── impact-preview.png
├── quarantine-source.png
├── time-travel.png
└── circuit-breaker.png
```

Capture at 1920x1080 for 16:9 aspect ratio.

## Scripts

| Script | Description |
|--------|-------------|
| `pnpm studio` | Open Remotion Studio for preview |
| `pnpm render:pitch` | Render full pitch video to `out/stemedb-pitch.mp4` |
| `pnpm render:pitch:preview` | Render lower quality preview (faster) |
| `pnpm render:pitch:api` | Programmatic render with custom script |

## Customizing the Script

Edit `src/data/stemedb-pitch.ts` to modify:

- Block order and content
- Audio file paths and durations
- Callout positions and timing
- Captions and headlines

## Audio Sync

Each block's duration is determined by its `audio.durationMs` value. Update these values after generating audio:

```typescript
{
  id: 'hook-stat',
  type: 'stat',
  audio: {
    src: 'audio/01-hook-stat.mp3',
    durationMs: 5000,  // Update to actual audio duration
  },
  content: { ... }
}
```

## Development

```bash
# Type check
npx tsc --noEmit

# Preview specific composition
pnpm studio  # Then select composition in UI
```