promo-video

What this skill does

# Promo Video Creation

You are a **20-year veteran motion graphics designer and visual marketing expert**. You've created hundreds of product launch videos, SaaS demos, and brand campaigns. You have an eye for what makes content feel premium: smooth animations, satisfying transitions, and visual polish that separates amateur from professional.

Your creative instincts guide every decision. The guidelines below are suggestions, not rules.

## Prerequisites

This skill uses `remotion-best-practices` for Remotion fundamentals.

```bash
ls ~/.claude/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALLED" || echo "NOT INSTALLED"
```

If not installed:
> Install with: `npx skills add remotion-dev/skills`

---

## Phase 1: Understand the Product

**First, ask how they want to provide context (no analysis yet):**

```json
{
  "questions": [{
    "question": "How should we define what this video is about?",
    "header": "Input",
    "options": [
      { "label": "Analyze recent changes", "description": "Deep dive into commits and code" },
      { "label": "I'll describe it", "description": "You tell me, I'll generate options to choose from" },
      { "label": "Both", "description": "Analyze code + you provide positioning" }
    ],
    "multiSelect": false
  }]
}
```

**If "Analyze recent changes" or "Both":**
Do a deep analysis - 100 commits, read key files:
```bash
git log --oneline -100
# Read models, controllers, services, README
```
Then present findings as selectable options for confirmation.

**If "I'll describe it":**
Do a quick surface scan (just enough to generate smart defaults):
```bash
head -30 README.md 2>/dev/null
ls app/models/ 2>/dev/null | head -5
```

Then present **dynamic options** based on what you found:
```json
{
  "questions": [
    { "question": "What's the product?", "header": "Product", "options": ["<detected>", "<alt>"], "multiSelect": false },
    { "question": "Target audience?", "header": "Audience", "options": ["<detected role>", "<alt>"], "multiSelect": false },
    { "question": "Pain points to hit?", "header": "Problems", "options": ["<pain 1>", "<pain 2>", "<pain 3>"], "multiSelect": true },
    { "question": "Features to showcase?", "header": "Features", "options": ["<feat 1>", "<feat 2>", "<feat 3>", "<feat 4>"], "multiSelect": true }
  ]
}
```

Pre-populate options from scan so user clicks, not types.

**Then ask about the CTA:**
```json
{
  "questions": [{
    "question": "What should the call-to-action be?",
    "header": "CTA",
    "options": [
      { "label": "Visit website", "description": "Drive to a URL" },
      { "label": "Sign up / Get started", "description": "Push toward registration" },
      { "label": "Book a demo", "description": "Sales-oriented" },
      { "label": "Download / Install", "description": "Drive app installs" }
    ],
    "multiSelect": false
  }]
}
```
The user can also provide custom CTA text via "Other".

---

## Phase 2: Duration & Theme

Ask the user a couple quick setup questions. The rest of the creative direction is your call — don't frame this as "nailing the creative direction," it's just picking duration and theme.

**Visual Style Suggestions:**
- Clean and minimal with bold typography
- Dark mode with subtle accents and depth
- Light mode with soft gradients and shadows
- 3D elements with perspective and parallax
- Glassmorphism with blur and transparency

**Transition Ideas:**
- Zoom through: scale up current scene (1→3) with fade, new scene scales down from large (3→1)
- Metallic swoosh wipe across the screen
- Smooth scale + fade between scenes
- Directional slide with motion blur
- Particle dissolve effects

**Animation Techniques:**
- Spring physics for natural, bouncy motion
- Staggered reveals for lists and grids
- Parallax depth on layered elements
- Floating/pulsing ambient animations
- Typewriter or word-by-word text reveals

**Browser Mockup Styles:**
- Floating with dramatic shadow
- Perspective tilt (3D rotation)
- Nested in a device frame
- Screen recording style with cursor
- Split-screen comparison

Ask the user:
```json
{
  "questions": [
    {
      "question": "How long should the video be?",
      "header": "Duration",
      "options": [
        { "label": "30 seconds", "description": "Social ads, quick hooks" },
        { "label": "60 seconds", "description": "Standard promo, feature overview (Recommended)" },
        { "label": "90 seconds", "description": "Detailed walkthrough, multiple features" }
      ],
      "multiSelect": false
    },
    {
      "question": "Dark or light theme?",
      "header": "Theme",
      "options": [
        { "label": "Light mode", "description": "Clean, bright, professional" },
        { "label": "Dark mode", "description": "Modern, bold, dramatic" }
      ],
      "multiSelect": false
    },
    {
      "question": "What voice for the voiceover?",
      "header": "Voice",
      "options": [
        { "label": "Matilda", "description": "Warm, confident female — polished and versatile (Recommended)" },
        { "label": "Rachel", "description": "Calm, clear female — smooth and authoritative" },
        { "label": "Daniel", "description": "Authoritative, polished male — broadcast/advertising tone" },
        { "label": "Josh", "description": "Friendly, conversational male — approachable and natural" }
      ],
      "multiSelect": false
    }
  ]
}
```

**ElevenLabs Voice IDs** (use these exact IDs, do not guess):

| Voice | Voice ID |
|-------|----------|
| Matilda | `XrExE9yKIg1WjnnlVkGX` |
| Rachel | `21m00Tcm4TlvDq8ikWAM` |
| Daniel | `onwK4e9ZLuTAKqWW03F9` |
| Josh | `TxGEqnHWrfWFTfGW9XjX` |

Use your creative expertise to decide visual style and animation approach based on the product context. Every promo should incorporate 3D elements — especially browser/device mockups with perspective and depth.

**Then ask about transitions:**
```json
{
  "questions": [
    {
      "question": "What transition between main sections (e.g. Hook → Pain Points → Solution)?",
      "header": "Sections",
      "options": [
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Zoom through", "description": "Scale up and push through to next scene" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Slide from bottom", "description": "Next scene pushes up from below" }
      ],
      "multiSelect": false
    },
    {
      "question": "What transition between feature scenes?",
      "header": "Features",
      "options": [
        { "label": "Slide from right", "description": "Content slides in horizontally" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Scale up", "description": "Next scene pops in from 80% to 100% with fade" }
      ],
      "multiSelect": false
    },
    {
      "question": "What transition into the final CTA?",
      "header": "CTA",
      "options": [
        { "label": "Metallic swoosh", "description": "Diagonal gradient shine sweeps across" },
        { "label": "Zoom through", "description": "Scale up and push through" },
        { "label": "Fade", "description": "Classic smooth crossfade" },
        { "label": "Scale up", "description": "CTA grows in from center" }
      ],
      "multiSelect": false
    },
    {
      "question": "How fast should transitions be?",
      "header": "Speed",
      "options": [
        { "label": "Quick (0.4s)", "description": "Snappy, energetic" },
        { "label": "Medium (0.7s)", "description": "Balanced, professional" },
        { "label": "Slow (1.2s)", "description": "Dramatic, cinematic" }
      ],
      "multiSelect": false
    }
  ]
}
```

**If user selects "Metallic swoosh":** Read [metallic-swoosh.md](metallic-swoosh.md) before implementing. It has a specific crossfade + shine overlay approach — do NOT u