Design and build high-impact product launch, promo, and feature announcement videos with Remotion and story-driven motion.
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# Product Launch Video Design and build cinematic, high-impact product launch videos that make viewers *feel* the product before they ever touch it. This skill is not locked to one aesthetic. The visual style adapts to the product's DNA — what matters is that whatever direction is chosen, the execution reflects absolute top-tier standards in motion, lighting, composition, and visual storytelling. ## Core Philosophy Three principles govern every decision: **Intentionality Over Decoration.** Every visual element, movement, and light source must have a purpose. Whether minimalist or maximalist, nothing exists merely to fill space. Everything drives the narrative, highlights a feature, or evokes a specific emotion. **Sensory Translation.** A great launch video makes the viewer *feel* the product. Translate abstract concepts (speed, security, comfort) and physical traits (weight, texture, responsiveness) into visual and auditory experiences. If the product is fast, the viewer should feel velocity. If it's elegant, the viewer should feel refinement in every frame. **Mastery of Contrast.** Great video thrives on juxtaposition. Use contrast in scale (macro detail vs. sweeping wide shots), pacing (frenetic energy vs. slow-motion reveals), lighting (shadow vs. highlight), and audio (silence vs. heavy beats) to create dynamic tension that holds attention. ## When to Use - Creating a product launch or announcement video - Building a demo or feature walkthrough with cinematic quality - Making a brand reveal or teaser trailer - Producing animated product showcases with motion graphics - Storyboarding and planning video structure for any product - Turning product visuals, photos, or concepts into video narratives --- ## Phase 0: Understand the Product Before any visual work, deeply understand what you're showcasing. This shapes everything. Ask the user (all at once, don't drip-feed questions): 1. **Product** — What is the product? What does it do? What problem does it solve? 2. **Audience** — Who watches this video? Developers? Consumers? Investors? Internal team? 3. **Core Message** — What's the ONE thing the viewer should remember after watching? 4. **Tone** — What should the viewer *feel*? (Impressed / Excited / Calm / Inspired / Empowered) 5. **Duration** — How long? (15s teaser / 30s spot / 45-60s full launch / 90s+ deep dive) 6. **Assets** — Do you have logos, product photos, screenshots, recordings, brand colors, or fonts? 7. **Voiceover** — Should the video have narration? If yes, what language? Any preference on voice character (gender, tone, energy level)? 8. **Reference** — Any videos you admire? (Apple keynote style, Nike product films, Stripe developer aesthetic, playful Notion vibes, luxury watch commercials, etc.) 9. **Publishing Context** — Where will this video be posted? (Landing page, X/Twitter, LinkedIn, YouTube, Shorts/Reels/TikTok, investor deck, internal demo.) Aspect ratio, captions, and pacing depend on this. If the user already provided context in the conversation, extract answers from what's there and confirm gaps. **GATE: Do not proceed to Phase 1 until you have answers (from the user or inferred from context) for all 9 questions above. If assets are provided, audit them — list every available asset and plan to use each one where it strengthens the narrative. Not every asset must appear, but none should be ignored without reason.** --- ## Phase 1: Establish the Aesthetic **This is the most important creative decision.** The aesthetic must feel like it was designed *for this specific product* — not a generic template with the logo swapped in. ### Step 1.1: Choose a Visual Direction Based on the product's personality and the user's tone preference, propose 2-3 distinct aesthetic directions. Each direction should include: - **Name** — A short evocative label (e.g., "Midnight Precision," "Warm Analog," "Electric Pulse") - **Mood** — 2-3 sentence description of the emotional atmosphere - **Color Palette** — 4-5 colors with hex codes and roles (background, primary, accent, text, highlight) - **Typography** — Display + body font pairing from Google Fonts or Fontshare (never Inter, Roboto, Arial, or system fonts). The typeface must embody the product's personality: - Elegant serifs (e.g., Playfair Display, Cormorant) → luxury, editorial, premium - Bold grotesque sans-serifs (e.g., Space Grotesk, Satoshi) → tech, bold, modern - Geometric sans-serifs (e.g., Plus Jakarta Sans, General Sans) → clean, trustworthy, SaaS - Kinetic or variable fonts (e.g., Syne, Cabinet Grotesk) → youth culture, creative, playful - Monospace or code fonts (e.g., JetBrains Mono, Fira Code) → developer tools, terminal aesthetic The font *is* the brand voice made visible. A mismatch between product personality and typeface undermines every other design decision. - **Motion Character** — How things move (snappy springs, smooth glides, elastic bounces, cinematic slow reveals) - **Signature Eleme …