# GHL Connect MCP - Kurzgesagt Style Explainer Storyboard

## Style Guide
- **Art Direction:** Kurzgesagt flat vector style
- **Color Palette:** Deep navy (#0a1628), Teal (#14b8a6), Cyan (#06b6d4), Orange (#f97316), Purple (#a855f7), Pink (#ec4899)
- **Animation:** Smooth easing, Lottie assets, purposeful motion
- **Typography:** Clean sans-serif, bold headlines, soft shadows
- **Duration:** 35-40 seconds total

---

## Scene 1: THE OVERWHELM (0-7s)
**Visual:** Kurzgesagt blob character drowning in floating notifications

**Assets:**
- `scene1-stressed.png` - Main illustration
- `notification.json` - Lottie notification bells popping up
- `clock.json` - Time ticking away

**Motion:**
- Character floats center, gentle bob animation
- Notifications fly in from edges with spring physics
- Subtle parallax on background elements
- Slow zoom in to increase tension

**Text:** 
- "Managing your CRM manually?" (fade in at 2s)
- "It's... a lot." (fade in at 5s)

**Sound cues:** (if adding audio later)
- Soft ping sounds for notifications

---

## Scene 2: THE COST (7-14s)
**Visual:** Hourglass with time/money flowing away

**Assets:**
- `scene2-time-money.png` - Main illustration
- `clock.json` - Animated clock
- Custom number counters

**Motion:**
- Hourglass gently tilts
- Dollar signs/hours float upward and fade out
- Animated counters: "15+ hours/week" → "Revenue slipping away"
- Smooth transition from warm to cool colors

**Text:**
- "15+ hours lost weekly" (counter animation)
- "Leads falling through the cracks" (slide in)
- "There's a better way." (fade in with glow)

---

## Scene 3: THE DISCOVERY (14-21s)
**Visual:** Character discovering glowing AI orb

**Assets:**
- `scene3-discovery.png` - Main illustration
- `robot.json` - Lottie AI/robot animation
- `success-stars.json` - Sparkle effects

**Motion:**
- Character turns toward light source
- Orb pulses with soft glow
- Camera pulls back to reveal full scene
- Particles drift toward the orb

**Text:**
- "What if AI could handle it?" (typewriter effect)
- "GHL Connect" (logo reveal with glow)
- "400+ tools. One command." (fade in)

---

## Scene 4: THE MAGIC (21-32s)
**Visual:** Robot + dashboard connection, data flowing

**Assets:**
- `scene4-connection.png` - Main illustration
- `data-flow.json` - Lottie data streams
- `chat-bubble.json` - Message animations
- `checkmark.json` - Success checkmarks

**Motion:**
- Split composition: User prompt on left, AI response on right
- Data streams flow between elements
- Checkmarks pop in sequence: ✓ Contact ✓ Calendar ✓ Pipeline
- Smooth camera pan across the scene

**Text (Chat mockup):**
- User: "Add John to my pipeline and schedule a call"
- AI: "Done! Contact created, call scheduled for 2pm"

**Feature callouts:** (animate in sequence)
- Contacts • Calendar • Pipeline • Messages • Invoices • Workflows

---

## Scene 5: THE RESOLUTION (32-40s)
**Visual:** Happy character with AI assistant, everything calm

**Assets:**
- `scene5-happy.png` - Main illustration
- `happy-person.json` - Lottie celebration
- `success-stars.json` - Sparkles
- `bg-abstract.png` - Clean background

**Motion:**
- Zoom out to wide shot
- Character and robot do subtle celebration
- Particles/confetti drift gently
- Logo scales up with satisfying bounce

**Text:**
- "Stop managing." (fade in)
- "Start commanding." (fade in, emphasized)
- **"GHL Connect"** (big logo with glow)
- "Get Started Free →" (CTA button pulse)
- "github.com/ghl-connect" (subtle footer)

---

## Transitions

| From → To | Transition Style |
|-----------|-----------------|
| Scene 1 → 2 | Cross-dissolve with color shift (warm → cool) |
| Scene 2 → 3 | Wipe from right with light streak |
| Scene 3 → 4 | Zoom through the glowing orb |
| Scene 4 → 5 | Fade to white, then reveal |

---

## Lottie Assets Available

| File | Use Case |
|------|----------|
| `notification.json` | Flying alerts in Scene 1 |
| `clock.json` | Time pressure in Scene 1-2 |
| `robot.json` | AI assistant in Scene 3-5 |
| `data-flow.json` | Connection streams in Scene 4 |
| `checkmark.json` | Success indicators in Scene 4 |
| `chat-bubble.json` | Message UI in Scene 4 |
| `happy-person.json` | Celebration in Scene 5 |
| `success-stars.json` | Sparkles throughout |
| `confused-person.json` | Backup for Scene 1 |
| `loading.json` | Transition element |

---

## Ready to Build?

All assets are in:
- `/public/kurzgesagt/` - Custom illustrations
- `/public/lottie/` - Lottie animations

Composition will use:
- `lottie-react` for JSON animations
- Remotion's `spring()` for bouncy physics
- Smooth `interpolate()` for all transitions
- Ken Burns on static images for life