/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.yamlin 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
/voiceoverto 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 timestampsPhase 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