timscheuerai/content-vault

启动视频创建器

用于为 <YOUR_BRAND> 产品或功能端到端构建 30-60 秒动态图形启动视频：

• Remotion 4 React 合成，渲染为 MP4（1920×1080 + 1080×1080）
• ElevenLabs AI 旁白（默认使用 Bill 声音），每事件音效和背景音乐
• 节拍锚定时间线：每个视觉阶段从 script.timings.json 测量的音频持续时间内读取起始帧。编辑文案 → 重新生成音频 → 所有视觉自动调整，无需手动调整帧。
• 如果您的品牌有动态子系统（玻璃/光标/工具药丸组件），请从中继承。下述参考模式是一个有效的系统：一个磨砂动态子系统（聊天外壳、光标、工具药丸）叠加在干净的白色表格系统（结果表、仪表盘、跟踪）之上。

如果您的仓库有一个参考 Remotion 项目，请将该技能指向它。否则，下述模式可独立使用。源仓库中的参考实现路径：<YOUR_REFERENCE_VIDEO_PATH>。

---

何时使用

触发条件：

• "为 X 创建启动视频"
• "制作启动视频 / 产品视频 / 功能发布"
• "为 [功能] 渲染视频"
• 用户明确输入 /launch-video

跳过条件：

• 静态社交图形 → /graphics-designer
• 幻灯片 / 网络研讨会 → 使用您的幻灯片管道
• 短广告片段 < 8s → 通常可以用单个 Remotion 静态或单场景合成；该技能的完整管道过于复杂。
• 原始录制素材（讲解头部视频、网络研讨会录制、创始人视频、客户访谈、屏幕录制演示） → 改用 /video-use 技能。该技能根据 Scribe 转录在单词边界上剪辑，删除填充词，调色并烧录字幕。此技能用于从零开始在 Remotion 中构建的合成动态图形。两者可组合：/video-use 编辑可以产生用于品牌动画插入的 Remotion 覆盖插槽，但剪辑来自 /video-use。

---

架构一览

motion/<video-name>/
├── package.json              # remotion 4 + react 19 + tsx + dotenv + mp3-duration
├── remotion.config.ts        # publicDir → ../../brand/motion （单一资产源）
├── tsconfig.json
├── SCRIPT.md                 # 人类可读的旁白脚本（按节拍）
├── .env                      # ELEVENLABS_API_KEY （已 gitignore！）
├── .env.example
├── generate-audio.ts         # ElevenLabs 旁白运行器，按节拍哈希缓存
├── generate-sfx.ts           # ElevenLabs 声音生成运行器，哈希缓存
├── generate-music.ts         # ElevenLabs 音乐运行器 + 前导静音修剪
├── script.timings.json       # 旁白持续时间（生成）
├── sfx.timings.json          # 音效持续时间（生成）
├── music.timings.json        # 音乐持续时间（生成）
└── src/
    ├── Root.tsx              # registerRoot
    ├── Video.tsx             # 合成注册表 + LaunchVideoComposition 包装器
    ├── theme.ts              # fps + 持续时间 + 颜色（镜像 <YOUR_BRAND_TOKENS_PATH>）
    ├── script.ts             # 旁白节拍（id，阶段，文本）
    ├── timings.ts            # script.timings.json 加载器 + beatStartFrame()
    ├── sfx.ts                # 音效片段定义（锚定到帧）
    ├── music.ts              # 音乐提示 + 音量
    ├── Narration.tsx         # 仅旁白音序轨道
    ├── SoundDesign.tsx       # 旁白 + 音效 + 音乐组合
    └── scenes/
        ├── HeroBackground.tsx      # 循环 /video/hero-bg.mp4
        ├── OpeningScene.tsx        # 编排场景（锚定所有阶段）
        ├── GlassCursor.tsx         # 多人游戏风格的“你”光标
        ├── CompanyTable.tsx        # 填充数据表，逐列揭示
        ├── AgentDashboard.tsx      # Google Calendar 周视图
        ├── AgentRunDetail.tsx      # 工具调用跟踪视图
        ├── MemoryPanel.tsx         # 统计 + 迷你折线图仪表盘
        ├── Confetti.tsx            # 粒子爆发
        └── ClosingCard.tsx         # 结束聊天回调（“邀请”模式）

资产位于 brand/motion/：

• video/hero-bg.mp4 + 海报（您的品牌英雄背景循环，例如在 brand/motion/video/hero-bg.mp4 的环境视频）
• logos/{models,tools,companies,sequencers}/ — 第三方品牌标记
• audio/{launch-narration,sfx,music}/ — 生成的 mp3（为确保可重现渲染而提交）
• components/HeroChatMockup.tsx — 框架无关的聊天外壳

---

新启动视频的工作流程

1. 需求简报

从用户处获取：

• 受众：这是为谁准备的（GTM 团队？工程师？投资者？）
• 时长：目标秒数（默认 30-45s；60s+ 对于 hype 视频来说感觉太长）
• 关键信息：4-8 个要传达的内容，按叙述顺序排列
• 输出格式：横版（网页/LinkedIn），方版（IG/信息流），或两者

2. 大纲节拍

每个节拍 = 一个旁白句子，在一个视觉阶段内落地。通常 6-8 个节拍。所有节拍音频长度之和 = 总运行时。每个节拍的目标长度应为 3-7s。

对于每个节拍，捕获：id，phase（一行视觉描述），text（口语台词，10-20 个词）。

3. 编写 SCRIPT.md

将脚本保存为 package.json 的同级文件，以便人工审查。格式：

## 节拍 N — 阶段名称
**帧** ~开始–结束（秒） · **目标 ~N 个词**

> "口语台词。"

**视觉同步：** 屏幕上发生了什么。

4. 构建 src/script.ts

镜像 SCRIPT.md 作为数据。旁白生成器和合成都导入 SCRIPT。这里没有 Remotion 导入，以便生成器可以在纯 Node 中运行：

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. 生成旁白

cd motion/<video-name>
cp .env.example .env  # 粘贴 ELEVENLABS_API_KEY
npm install
npm run generate-audio

这将创建 brand/motion/audio/launch-narration/{beat-id}.mp3 并将持续时间写入 script.timings.json。根据节拍文本进行哈希，因此后续运行时未更改的节拍将被跳过（低成本迭代）。

6. 构建视觉场景

在 OpeningScene.tsx 中：

1. 在模块加载时计算节拍开始：

   const HERO_BEAT     = beatStart("hero", 0);        // → 0
   const DATABASE_BEAT = beatStart("database", 0);    // → 171（hero 结束后）
   // ... 等等
   

2. 将每个动画帧表示为 BEAT_X + offset：

   const BADGE_IN     = HERO_BEAT + 6;
   const TYPE_START   = HERO_BEAT + 38;
   const TOOLS_START  = HERO_BEAT + 115;  // 与“GTM stack”歌词同步
   const CURSOR_PRESS = HERO_BEAT + 165;
   

3. 使用每个节拍的不透明度门控在阶段场景之间淡入淡出。

7. 生成音效（可选但影响大）

在 src/sfx.ts 中定义点击/过渡时刻。使用相同的 beatStartFrame() 助手将每个片段锚定到特定的 fromFrame。值得添加的片段示例：

• 提示动画下的打字纹理
• 光标按下时的清脆点击
• 完成时刻的庆祝弹出声
• 结束卡片显示时的微妙增强声

npm run generate-sfx

8. 生成音乐

在 src/music.ts 中定义一个提示 + 持续时间。generate-music.ts 会自动修剪前导静音（ElevenLabs 音乐通常以一个安静的节拍开始，在旁白下听起来像“没有音乐”）。

npm run generate-music

9. 通过渲染进行迭代

npm run render:landscape

渲染需要约 30-90 秒。始终将输出重新编码为 yuv420p TV 范围，以确保 QuickTime 兼容性 — 背景视频是 yuvj420p（JPEG 范围），这种传播会破坏某些播放器的播放：

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

使用 ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg 在不观看整个渲染的情况下抽查特定时间戳。

---

设计规则

语音（视觉 + 口语）

• 永远不要使用破折号。仅使用句号、逗号、冒号、括号、中间点。
• 任何地方禁用词：leverage、synergy、robust、world-class、seamless、intuitive、powerful、innovative。
• 数字优于形容词（“8 tools”而不是“many tools”）。
• 简洁、具体。不模棱两可。
• 结束语：以品牌为主导，而非“恭喜。” 这里发现的最强结束模式：“邀请”引子 → 聊天输入框，输入新提示 → URL 签名。每次都会对开始的节拍进行庆祝性聊天回调。

颜色（示例令牌 · 根据您的品牌调整）

浅色、中性。仅一个强调色，每个场景使用一次，用于具有意义的元素（活动点、高亮、成功状态）。

令牌	十六进制	用途
--bg	#fafafa	页面背景
--surface	#ffffff	卡片、仪表盘
--ink	#0a0a0a	主要文本 + 数字
--muted	#71717a	次要文本
--line	#e4e4e7	边框
--accent	#10b981	唯一强调色

排版

• 字体栈：'Helvetica Neue', Helvetica, Arial, sans-serif
• 等宽字体（引子、代码、标签）：ui-monospace, 'SFMono-Regular', Menlo
• 英雄排版：字重 450，紧排（-0.05em）
• 等宽引子样式：11-14px，大写，字间距 0.16-0.18em，颜色 #71717a 或 #a1a1aa
• 灰色主体文本中的粗体/中等部分镜像品牌模式：<span style={{ color: "#0a0a0a", fontWeight: 500 }}>bold</span> 对比周围的 #71717a 文本。

两种视觉模式

每个场景选择一种；不要混合：

1. 磨砂 / 产品内 — 聊天外壳、光标、工具药丸，叠加在英雄背景视频上。白色磨砂，带 backdrop-filter: blur(28px)，rgba(255,255,255,0.45)。
2. 干净白色 / 表格 — 表格、仪表盘、跟踪、内存面板。bg #ffffff，1px solid #e4e4e7，微妙阴影。

模式之间的背景淡入淡出过渡是最电影化的时刻之一；为此预算约 20-30 帧，并使用 Easing.bezier(0.4, 0, 0.2, 1)（Material 标准）以获得平滑效果。

---

动画规则

1. 弹簧阻尼 22-28。低于 20 会产生弹跳，看起来业余。仅在有意制造“弹出”效果时使用 14-18。
2. 更紧的错开 > 更慢。第一直觉总是放慢速度；第二轮通常涉及将错开减半。级联项之间的默认错开：3-6 帧。
3. 在关键位置将视觉与歌词同步。如果旁白说“GTM stack”，工具药丸应该在那个词上飞入 — 而不是 3 秒前。使用 ElevenLabs 的 with_timestamps 进行词级同步，或者如果不要求精确，则根据节拍持续时间/词数估算。
4. 保留行高。当表格/卡片动画显示文本时，行上的 minHeight 可以防止布局在内容填充时跳跃。如果在级联过程中行的高度发生变化，看起来会很糟糕。
5. 条件渲染而不是 0 不透明度（如果会创建高的空矩形）。尚未开始显示的卡片不应占用空间。
6. 场景模式之间淡入淡出，而不是硬切。每个主要场景都有一个通过 interpolate + 缓动曲线动画化的 opacity 门控。

---

ElevenLabs 注意事项

• 默认声音 + 模型：generate-audio.ts 默认为 Bill（pqHfZKP75CvOlQylNhV4）使用 eleven_multilingual_v2。Bill 是 ElevenLabs 库中的 advertisement 用例声音：睿智、成熟、清晰。读起来像真正的广告配音，而不是“社交媒体上的 AI 人”。multilingual_v2 是生产旁白最稳定 + 最逼真的模型。不要为启动视频使用 eleven_turbo_v2_5 — 这是快速/便宜的模型，在英雄背景视频的对比下差异明显。Turbo 适用于预览 / 音效定时检查，但不适用于最终渲染。
• 语音设置内置于脚本中：stability 0.40、similarity_boost 0.75、style 0.30、use_speaker_boost true。根据 ElevenLabs 最佳实践：稳定性低于 0.30 不稳定，高于 0.60 单调；similarity 0.75 是文档中的最佳点；style 0.20–0.40 在不漂移的情况下增加表现力。不要将 style 推至 0.4 以上，除非您想要明显的语调波动。
• 语音缓存键包括声音 + 模型 + 设置。更改其中任何一个（或编辑节拍文本）会使缓存的 MP3 失效并重新渲染该节拍。只需编辑 .env（VOICE_ID=... MODEL_ID=...）或 generate-audio.ts 并重新运行 npm run generate-audio。
• 其他适合旁白的声音（如果 Bill 不合适）：
  • Eric cjVigY5qzO86Huf0OWal — 流畅、值得信赖、现代 SaaS 感觉
  • Chuck Miller HIGUfNOdjuWQwwapnTRW — 专业克隆版，深沉沙哑，电影感
  • George JBFqnCBsd6RMkjVDRZzb — 英国说书人，叙事故事
  • Logan jD4PjnscE4XmlzgsuqY0 — 专业克隆版，年轻说书人
  • Brian nPczCjzI2devNBz1zQrb — 旧版默认；标记为 social_media，读起来比 Bill 更像“AI”
  • 在您的参考 Remotion 项目中 A/B 测试这些声音，然后再决定
• 列出声音需要 voices_read 权限。某些密钥没有此权限；如果您无法 GET /v1/voices，请回退到已知 ID。
• 音乐 API 拒绝提示中的品牌名称。“Apple keynote”、“Linear launch trailer”等会触发 TOS 违规。在不命名品牌的情况下描述氛围（“现代技术发布预告片的电影化器乐”、“带有琶音合成器旋律的脉动电子节拍”）。
• 音乐默认以前导静音开始（约 1-2 秒）。生成器的 silenceremove ffmpeg 通道会将其去除，因此播放会在第 0 帧开始。请保留该滤镜。
• 音效最短持续时间为 0.5 秒。低于此值 API 会报错。请向上取整。
• 音乐音量：0.10 在旁白下听起来像静音；0.15-0.18 是最佳点 — 清晰可辨但不会与语音争抢。

---

要避免的陷阱

1. 添加 <Audio> 而没有 <Sequence>：它会在所有时间播放

…

[已截断以进行翻译]