Create a 30-second promotional video for prompts.chat
Required Assets
- https://prompts.chat/logo.svg - Logo SVG
- https://raw.githubusercontent.com/flekschas/simple-world-map/refs/heads/master/world-map.svg - World map SVG for global community scene
Color Theme (Light)
- Background: #ffffff
- Background Alt: #f8fafc
- Primary: #6366f1 (Indigo)
- Primary Light: #818cf8
- Accent: #22c55e (Green)
- Text: #0f172a
- Text Muted: #64748b
Font
- Inter (weights: 400, 600, 700, 800)
---
Scene Structure (8 Scenes)
Scene 1: Opening (5s)
- Logo appears
- Logo centered, scales in with spring animation
- After animation: "prompts.chat" text reveals left-to-right below logo using
clip-path
- Tagline appears: "The Free Social Platform for AI Prompts"
Scene 2: Global Community (4s)
- Full-screen world map (25% opacity) as background
- 16 pulsing activity dots at major cities (LA, NYC, Toronto, Sao Paulo,
London, Paris, Berlin, Lagos, Moscow, Dubai, Mumbai, Beijing, Tokyo,
Singapore, Sydney, Warsaw)
- Each dot has outer pulse ring, inner pulse, and center dot with glow
- Title: "A global community of prompt creators"
- Stats row: 8k+ users, 3k+ daily visitors, 1k+ prompts, 300+ contributors,
10+ languages
- Gradient overlay at bottom for text readability
Scene 3: Solution (2.5s)
- Three words appear sequentially with spring animation: "Discover." "Share."
"Collect."
- Each word in different color (primary, accent, primary light)
Scene 4: Built for Everyone (4s)
- 8 floating persona icons around screen edges with sine/cosine wave floating
animation
- Personas: Students, Teachers, Researchers, Developers, Artists, Writers,
Marketers, Entrepreneurs
- Each has 130x130 icon container with colored background/border
- Center title: "Built for everyone"
- Subtitle: "One prompt away from your next breakthrough."
Scene 5: Prompt Types (5s)
- Title: "Prompts for every need"
- Browser-like frame (1400x800) with macOS traffic lights and URL bar showing
"prompts.chat"
- A masonry skeleton screenshot scrolls vertically with eased animation (cubic ease-in-out)
- 7 floating pill-shaped labels around edges with icons:
- Text (purple), Image (pink), Video (amber), Audio (green), Workflows
(violet), Skills (teal), JSON (red)
Scene 6: Features (4s)
- 4 feature cards appearing sequentially with spring animation:
- Prompt Library (book icon) - "Thousands of prompts across all categories"
- Skills & Workflows (bolt icon) - "Automate multi-step AI tasks"
- Community (users icon) - "Share and discover from creators"
- Open Source (circle-plus icon) - "Self-host with complete privacy"
Scene 7: Social Proof (4s)
- Animated GitHub star counter (0 → 143,000+)
- Star icon next to count
- Badge: "The First Prompt Library — Since December 2022" with trophy icon
- Text: "Endorsed by OpenAI co-founders • Used by Harvard, Columbia & more"
Scene 8: CTA (3.5s)
- Background glow animation (pulsing radial gradient)
- Title: "Start exploring today"
- Large button with logo + "prompts.chat" text (gradient background, subtle
pulse)
- Subtitle: "Free & Open Source"
---
Transitions (0.4s each)
- Scene 1→2: Fade
- Scene 2→3: Slide from right
- Scene 3→4: Fade
- Scene 4→5: Fade
- Scene 5→6: Slide from right
- Scene 6→7: Slide from bottom
- Scene 7→8: Fade
Animation Techniques Used
- spring() for bouncy scale animations
- interpolate() for opacity, position, and clip-path
- Easing.inOut(Easing.cubic) for smooth scroll
- Math.sin()/Math.cos() for floating animations
- Staggered delays for sequential element appearances
Key Components
- Custom SVG icon components for all icons (no emojis)
- Logo component with prompts.chat "P" path
- FeatureCard reusable component
- TransitionSeries for scene management