Product Video Creation

Remotion Product Video Generator

Problem

Creating a compelling product demo video requires storytelling, visual design, voiceover narration, and video editing — typically spread across After Effects, script writers, and voice talent. This skill generates broadcast-quality narrated product videos entirely in code, using AI reasoning for storytelling and TTS for voiceover.

Architecture

Orchestrator (this skill — coordinates all phases)
├── product-video-storyteller (Opus agent — crafts narrative arc + scene scripts)
├── Screenshot capture (Playwright script — deterministic)
├── Scene components (Code generation — brand-aligned Remotion scenes)
├── product-video-narrator (Sonnet agent — generates TTS audio)
└── Composition wiring (Code — timing, audio sync, aspect ratio)

Quick Reference — Skill Scripts

All scripts are in ~/.claude/skills/product-video-creation/scripts/ and are standalone:

SKILL_DIR=~/.claude/skills/product-video-creation

# Scaffold a new project (no existing project needed)
$SKILL_DIR/scripts/scaffold-project.sh ~/dev/my-video --aspect 9:16

# Capture screenshots
$SKILL_DIR/scripts/capture-screenshots.sh ./public/screenshots --url https://myapp.com

# Generate voiceover
$SKILL_DIR/scripts/generate-voiceover.sh narration.json ./public/audio --provider openai --voice ash

# Render and preview
$SKILL_DIR/scripts/render-and-preview.sh --contact-sheet

# Task manifest
$SKILL_DIR/scripts/task-manifest.sh full-video

Progress Tracking (MANDATORY)

Create tasks from scripts/task-manifest.sh full-video before starting.

Phase 0: Project Setup & Voice Selection

Step 0a: Scaffold project (if no Remotion project exists)

If the user is NOT already in a Remotion project, scaffold one:

~/.claude/skills/product-video-creation/scripts/scaffold-project.sh <project-dir> --aspect 9:16
cd <project-dir>

The script creates a complete Remotion + Tailwind + Lucide project with Google Fonts pre-configured. If remotion.config.ts already exists in the CWD, it skips scaffolding.

Step 0b: Voice Selection Brainstorm (INTERACTIVE)

Before any work begins, present the user with voice options. This is a brainstorming conversation.

Step 1: Check TTS availability

# Check for OpenAI API key
echo "${OPENAI_API_KEY:+OpenAI TTS available}" || echo "No OpenAI key found"
# List voices
./scripts/generate-voiceover.sh --list-voices --provider openai
./scripts/generate-voiceover.sh --list-voices --provider macos

Step 2: Present options to the user

Ask the user to choose. Present it like this:

How would you like the voiceover narrated?

Option A: OpenAI TTS (recommended — natural, studio-quality voices with tone control)

Requires OPENAI_API_KEY. If not set, guide user:

export OPENAI_API_KEY=sk-...  # From https://platform.openai.com/api-keys

Option B: macOS Native Voice (free, no API key, works offline)

• Samantha (en_US) — clear, standard
• Daniel (en_GB) — British accent
• Karen (en_AU) — Australian accent
• Tara (en_IN) — Indian English

Option C: No voiceover — visual-only video with on-screen text

Wait for user selection before proceeding.

Phase 1: Story & Narrative (AI-Driven)

This is NOT a heuristic template fill. Launch the product-video-storyteller agent (Opus model) to craft the narrative.

What the Storyteller agent receives:

• Product description and copy from the user
• Brand guidelines (if provided — colors, tone, target audience)
• App screenshots (described, not raw images)
• Target duration and aspect ratio
• Voice selection from Phase 0

What the Storyteller agent returns:

A complete narrative with:

• Emotional arc: curiosity → discovery → desire → action
• Scene-by-scene headlines, copy, and voiceover scripts
• Pacing guidance: which scenes need silence, which need energy
• Full concatenated narration for TTS generation

Present the narrative to the user for approval before proceeding. Allow them to revise tone, adjust copy, or change the story arc.

Phase 2: Screenshot Capture (Script)

./scripts/capture-screenshots.sh ./public/screenshots \
  --url http://localhost:5173 \
  --shared-url https://app.example.com/shared/abc \
  --hide-selectors ".fixed,.theme-toggle" \
  --fullpage

Or write a custom Playwright capture script for the specific app flow.

Phase 3: Voiceover Generation

Save the storyteller's per-scene narration as JSON:

[
  { "scene": "hook", "text": "What if the hardest part was already done?", "instructions": "Speak with gentle curiosity, like asking a friend." },
  { "scene": "intro", "text": "A smarter way to get started.", "instructions": "Warmer now, confident but not pushy." }
]

Generate audio:

./scripts/generate-voiceover.sh narration.json ./public/audio \
  --provider openai --voice coral \
  --instructions "Speak warmly and calmly, like a thoughtful host."

Audio Integration in Remotion

Add <Audio> components in the Composition, synced to scene <Sequence> timing:

import { Audio, staticFile } from "remotion";

<Sequence from={0} durationInFrames={150}>
  <Audio src={staticFile("audio/01-hook.mp3")} />
  <HookScene />
</Sequence>

Adjust scene durationInFrames to match audio duration:

const audioDurationFrames = Math.ceil((audioDurationMs / 1000) * fps);

Phase 4: Scene Components (AI-Generated Code)

Create scenes using the storyteller's output — not hardcoded templates. Each scene's headlines, copy, bullet points, and step descriptions come from the narrative.

See references/scene-architecture.md for:

• Phone mockup components (PhoneMockup, AnimatedPhone, ScrollingPhone)
• Animation patterns (spring entries, crossfades, scroll easing)
• Aspect ratio layout rules

Key components to create:

• src/scenes/HookScene.tsx — dramatic text reveal
• src/scenes/IntroScene.tsx — product name + value prop
• src/scenes/AppShowcaseScene.tsx + AnimatedPhone.tsx — cycling screenshots
• src/scenes/VibesScene.tsx — Lucide icon feature cards
• src/scenes/HowItWorksScene.tsx — numbered step process
• src/scenes/ResultsScene.tsx + ScrollingPhone.tsx — scrolling results
• src/scenes/CtaScene.tsx — closing headline + CTA

Phase 5: Brand Application

If brand guidelines provided, extract and apply:

1. Colors → background, accent, secondary, text, muted
2. Typography → heading font, accent font, body font (via Google Fonts)
3. Tone → inform both visual style and voiceover instructions

Phase 6: Background Music (AI-Curated)

Launch product-video-music-curator agent to find royalty-free background music.

What the curator receives: narrative arc, brand tone, video duration, voiceover characteristics What it returns: 3-5 track recommendations from Pixabay/Mixkit/FMA with download URLs

After user selects a track:

1. Download to public/audio/bg-music.mp3
2. Process with ffmpeg for fade-in/fade-out:

ffmpeg -i public/audio/bg-music-raw.mp3 \
  -af "afade=t=in:st=0:d=3,afade=t=out:st=<end-3>:d=3" \
  public/audio/bg-music.mp3

Phase 7: Audio Mixing & Composition

Launch product-video-audio-mixer agent OR use Remotion-native mixing (recommended).

Remotion-Native Approach (simpler)

Add background music as a separate <Audio> spanning the full video:

<Audio src={staticFile("audio/bg-music.mp3")} volume={0.10} startFrom={0} />

Volume guidelines:

• Background music during voiceover: 0.08–0.12 (~-18dB)
• Music during scene transitions (no voice): 0.20–0.30 (~-12dB)
• Use Remotion's volume callback for dynamic ducking

Wire scene <Sequence> timing from audio durations. Overlap by 10-15 frames for crossfades.

Phase 8: Render & Preview

Use scripts/render-and-preview.sh for the full render → verify → preview pipeline:

# Render, show specs, and open in video player
./scripts/render-and-preview.sh

# Render with contact sheet for visual verification
./scripts/render-and-preview.sh --contact-sheet

# Custom output path
./scripts/render-and-preview.sh --output out/reel-v2.mp4

# Render without opening player (CI/headless)
./scripts/render-and-preview.sh --no-open --contact-sheet

# See all options
./scripts/render-and-preview.sh --help

The script:

1. Runs eslint + tsc (fails fast on errors)
2. Auto-detects the composition ID from Root.tsx
3. Renders to MP4 via npx remotion render
4. Prints video specs (resolution, duration, size, codec)
5. Optionally generates a 7-frame contact sheet for visual verification
6. Opens the rendered video in the system player

Contact Sheet Preview (for inline review)

After rendering with --contact-sheet, use the Read tool to display the contact sheet image to the user:

Read: out/video-contact-sheet.png

Remotion Studio (for live iteration)

For frame-by-frame scrubbing during development:

npx remotion studio  # Opens at http://localhost:3000

Agent Definitions

Critical Rules

• Never use CSS transitions in Remotion — causes flickering. All animations from useCurrentFrame()
• Use <Img> from remotion, not <img>; use staticFile() for public/ assets
• Audio must sync — scene durations derived from audio file lengths, not arbitrary frame counts
• Phone frames use Dynamic Island (pill-shaped), not old-style wide notch
• Present story to user for approval before generating code or audio
• Disclose AI voice — OpenAI requires disclosure that TTS is AI-generated

See Also

• remotion-best-practices — general Remotion coding patterns
• smart-screen-recorder — alternative: record real screen + AI post-processing
• references/scene-architecture.md — scene templates, animation patterns, phone mockups