125 lines
9.2 KiB
Markdown
125 lines
9.2 KiB
Markdown
|
---
|
||
|
|
title: "prompts.chat Promotional Video using Remotion"
|
||
|
|
contributor: "@f"
|
||
|
|
tags: #coding, #f
|
||
|
|
---
|
||
|
|
|
||
|
|
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
|