/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

• Generate or accept video script

• Run /voiceover to generate audio with ElevenLabs

• 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:

• TitleScene (2-3s)

• FeatureScene[] (per feature, synced to voiceover)

• Screen capture segments (if demo)

• 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