clawdbot-workspace/ghl-explainer-assets/STORYBOARD.md

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