/brand-video

Create branded video content using Remotion compositions.

What This Does

Chains brand tokens, voiceover generation, and Remotion rendering into branded video content. Consumes tokens.ts for consistent visual identity.

Prerequisites

• brand.yaml in project root (run /brand-init)
• Compiled tokens (run /brand-compile)
• Remotion installed in project or available globally

Process

Phase 1: Script + Voiceover

1. Generate or accept video script
2. Run /voiceover to generate audio with ElevenLabs
3. Extract word-level timestamps from ElevenLabs response

Phase 2: Scene Composition

Import brand tokens into Remotion compositions:

import { brand } from "./brand-output/tokens.js";

// Available branded scenes:
// - TitleScene: Brand name + tagline with accent gradient
// - FeatureScene: Feature title + description + screenshot
// - EndCard: CTA with brand colors
// - CaptionOverlay: Synced captions using voiceover timestamps

Phase 3: Assembly

Compose scenes with voiceover sync:

1. TitleScene (2-3s)
2. FeatureScene[] (per feature, synced to voiceover)
3. Screen capture segments (if demo)
4. EndCard (3s)

Phase 4: Render

npx remotion render src/video/BrandVideo.tsx brand-video.mp4 \
  --props '{"brandTokens": "./brand-output/tokens.ts", "voiceover": "./voiceover.mp3"}'

Video Types

Type	Scenes	Duration
demo	Title → Screen capture → Features → End	60-90s
feature	Title → Feature deep-dive → End	30-45s
launch	Title → Problem → Solution → Features → CTA	45-60s

Scene Templates

Templates live in the project's Remotion source and import tokens.ts:

• Branded title cards with primary color gradient
• Feature callouts with accent highlights
• Caption overlays with brand typography
• End cards with CTA and brand logo

Related Skills

• /brand-compile — Compile tokens (prerequisite)
• /voiceover — Generate voiceover audio
• /demo-video — Legacy demo video (enhanced by brand-video)
• /ai-video-generation — AI-native video (Veo 3.1, Seedance, OmniHuman for avatars/lipsync) when React-based composition isn't needed
• /remotion-render — Cloud render Remotion components via inference.sh
• /remotion-best-practices — Remotion component structure, timing, and sequence patterns