Automated ingestion of prompt: prompts.chat Promotional Video using Remotion
This commit is contained in:
parent
9049b8fbe9
commit
408a1248fb
|
|
@ -0,0 +1,124 @@
|
|||
---
|
||||
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
|
||||
Loading…
Reference in New Issue