/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