This prompt guides the creation of a 30-second promotional video for HalaGPT.io using Remotion. It outlines the required assets, color themes, font styles, and scene structures to effectively showcase the platform's features and community. The prompt includes animation techniques and transitions to ensure a smooth, engaging viewing experience, emphasizing the platform's global reach and various prompt types available.
Create a 30-second promotional video for HalaGPT.io
Required Assets
- https://halagpt.io/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: "HalaGPT.io" 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
"HalaGPT.io"
- 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 + "HalaGPT.io" 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 HalaGPT.io "P" path
- FeatureCard reusable component
- TransitionSeries for scene management