brand-video

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

/brand-video

Create branded video content using Remotion compositions.

使用Remotion合成功能创建品牌化视频内容。

What This Does

功能说明

Chains brand tokens, voiceover generation, and Remotion rendering into branded video content. Consumes

tokens.ts

for consistent visual identity.

将品牌标识令牌、旁白语音生成和Remotion渲染流程串联，生成品牌化视频内容。通过

tokens.ts

确保视觉风格的一致性。

Prerequisites

前置条件

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

项目根目录下存在
```
brand.yaml
```
文件（运行
```
/brand-init
```
生成）
已编译的品牌标识令牌（运行
```
/brand-compile
```
完成编译）
项目中已安装Remotion或Remotion已全局可用

Process

流程

Phase 1: Script + Voiceover

阶段1：脚本与旁白

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

生成或导入视频脚本
运行
```
/voiceover
```
，通过ElevenLabs生成旁白音频
从ElevenLabs的返回结果中提取逐词时间戳

Phase 2: Scene Composition

阶段2：场景合成

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

将品牌标识令牌导入Remotion合成项目：

typescript

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

// 可用的品牌化场景：
// - TitleScene：品牌名称+标语，搭配强调色渐变
// - FeatureScene：功能标题+描述+截图
// - EndCard：带有品牌色调的行动号召（CTA）卡片
// - CaptionOverlay：利用旁白时间戳同步的字幕叠加层

Phase 3: Assembly

阶段3：视频组装

Compose scenes with voiceover sync:

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

结合旁白语音同步组装场景：

TitleScene（2-3秒）
FeatureScene序列（每个功能对应一个场景，与旁白同步）
屏幕录制片段（若为演示视频）
EndCard（3秒）

Phase 4: Render

阶段4：渲染

bash

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

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

类型	场景组成	时长
`demo` （演示型）	标题页 → 屏幕录制 → 功能展示 → 结尾页	60-90秒
`feature` （功能聚焦型）	标题页 → 功能深度解析 → 结尾页	30-45秒
`launch` （发布型）	标题页 → 问题阐述 → 解决方案 → 功能展示 → 行动号召	45-60秒

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

模板存储在项目的Remotion源码目录中，并导入

tokens.ts

：

带有主色调渐变的品牌化标题卡片
带有强调色高亮的功能提示框
使用品牌字体的字幕叠加层
包含行动号召和品牌Logo的结尾卡片

brand-video

Original

Translation

/brand-video

/brand-video

What This Does

功能说明

Prerequisites

前置条件

Process

流程

Phase 1: Script + Voiceover

阶段1：脚本与旁白

Phase 2: Scene Composition

阶段2：场景合成

Phase 3: Assembly

阶段3：视频组装

Phase 4: Render

阶段4：渲染

Video Types

视频类型

Scene Templates

场景模板

Related Skills

相关技能