164 lines
4.6 KiB
Markdown
164 lines
4.6 KiB
Markdown
# 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
|