brand-video

Original：🇺🇸 English

Translated

Generate branded video content with Remotion. Combines brand tokens, voiceover, and screen captures into polished product videos.

8installs

Sourcephrazzld/claude-config

Added on2026-03-01

NPX Install

npx skill4agent add phrazzld/claude-config brand-video

SKILL.md Content

View Translation Comparison →

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

typescript

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

bash

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