Skip to content

Latest commit

 

History

History
57 lines (38 loc) · 2.85 KB

File metadata and controls

57 lines (38 loc) · 2.85 KB

Demo Video Storyboard (~30 seconds)

Concept

Rapid-fire montage: the same AI chat rendered in 13 wildly different design systems. Every cut shows the chat window already open with a conversation visible — no time for clicking bubbles. Maximum visual contrast between adjacent cuts.

Storyboard

Beat 1: Hook (0:00–0:02)

  • Landing page grid, all 13 cards visible at once
  • Text overlay: "One chat SDK."

Beat 2–8: Rapid Montage — 7 frameworks (0:02–0:16, ~2 sec each)

Each frame: dashboard in background + chat window open with messages visible. Hard cuts, no transitions.

Time Framework What's on screen
0:02 Primer GitHub repo browser + clean white chat window
0:04 Neobrutalism Bold yellow cards + chunky-bordered chat
0:06 Carbon IBM ops dashboard + enterprise blue chat
0:08 NES.css 8-bit RPG with HP bars + pixel speech balloon chat
0:10 Polaris Shopify orders table + green-accented chat
0:12 Retro Amber terminal + CRT-flickering chat
0:14 DaisyUI Cyberpunk neon dashboard + dark chat

Beat 9–14: Faster Montage — 6 frameworks (0:16–0:24, ~1.3 sec each)

Tempo increases. Same pattern: dashboard + open chat.

Time Framework Visual hook
0:16 Mantine Project cards + avatars
0:17 Win98 Teal desktop + beveled window
0:19 Chakra Analytics stats + blur backdrop
0:20 WinXP Bliss gradient + Luna blue chat
0:21 Paper CSS Sketchy hand-drawn borders
0:23 Pico Bare semantic HTML

Beat 15: Closing (0:24–0:30)

  • Return to landing page grid (0:24–0:26)
  • Text overlay: "13 design systems. Zero lock-in." (0:26–0:28)
  • Logo + "@tambo-ai/react-ui-base" (0:28–0:30)

Production Notes

Ordering principle: Maximize visual contrast between adjacent cuts. Enterprise → playful → enterprise → retro → commerce → terminal → neon. Never put two similar-looking frameworks back to back.

Pre-record tip: Have all 13 pages loaded in browser tabs with chat windows already open and a few messages visible. Screen-record each tab for 3-4 seconds, then edit down.

Audio: Short, punchy electronic track (think product launch trailer). Beat drops should align with cuts.

Text overlays (optional): Framework name in small type at bottom-left of each frame so viewers can identify them.

Key frame for thumbnail: Split-screen of NES (8-bit) vs Primer (clean) vs Retro (amber terminal) — shows the range instantly.