合成视频 3D (Remotion + Three.js + PiP)

技能：3D 动态视频 (Remotion + Three.js + PiP)

何时使用

• "制作一个 3D 视频，我的视频在角落说话"
• "TikTok 电影风格视频，主题为 [主题]"
• "具有 3D 背景和动画字幕的视频"
• "使用 [我的音频/我的视频] 谈论 X 的视频"

核心理念 (黄金法则)

视频必须具有创意并且与主题上下文相关。 仅仅有通用的 3D 是不够的。脚本的每一句都应激发一个独特的视觉元素，以传达概念。例如：

• 句子 "8 分 20 秒" → 数字里程表 滚动到 8:20
• 句子 "300,000 km/s" → 科幻 HUD 速度计 带指针
• 句子 "飞机可以绕 3 圈" → 飞机绕地球飞行 带轨迹
• 句子 "光从太阳到达地球" → 光子带镜头光晕 正在旅行

用户要求这种级别的上下文创意。切勿只做带有淡入效果的静态文本。

前提条件 (开始前检查)

1. Node.js + npm 已安装
2. FFmpeg 已安装 (brew install ffmpeg)
3. Whisper-cpp 已安装 (brew install whisper-cpp) — 用于同步单词
4. FREESOUND_API_KEY 在 ~/.zshrc 中 (必需的 SFX API)
5. 解说员视频/音频 在 public/eu.mp4 或 public/audio/*.mp3 中

如果缺少任何一项，停止 并通知用户。

1. 项目结构

~/Documents/[项目名称]/\n├── public/\n│ ├── eu.mp4 # 解说员视频（若有 PiP）\n│ ├── audio/*.mp3 # 纯音频（若无视频）\n│ ├── images/[主题]/ # 下载的图片（附带 credits.json）\n│ └── sfx/ # 从 Freesound 下载的 SFX\n├── src/\n│ ├── three/ # 3D 场景 (Three.js)\n│ ├── components/ # 字幕、HUD、覆盖层\n│ ├── timeline.json # 所有时间信息（唯一真理）\n│ └── Root.tsx\n├── scripts/\n│ ├── align-words.py # Whisper → 单词时间戳\n│ ├── gen-sfx.mjs # 本地合成（pad、drone）\n│ ├── fetch-freesound.mjs# 必需：从 API 下载 SFX\n│ ├── finalize.sh # -14 LUFS + faststart\n│ └── contact-sheet.sh # 带安全区域的联系表\n├── out/\n│ ├── final_[主题].mp4\n│ ├── thumbnail.png # 封面 1080x1920\n│ └── contact_sheet.png\n└── timeline.json

2. 必需的工作流程 (按顺序)

阶段 0：简报

与用户确认：

• 主题 视频
• 实际时长 音频（切勿切断高潮部分）\n- 调色板 (默认：深黑色 + 与主题一致的重色)\n- 3D 背景样式 (见第 3 节)\n- PiP (如果有视频)：右下角位置，x ≤ 940\n- 字幕：动态排版 (见第 5 节)\n

阶段 1：设置 + Whisper\n1. 初始化/检查 Remotion + @remotion/three + @react-three/fiber + three\n2. 运行 scripts/align-words.py 来转录音频\n3. 创建 timeline.json，包含每个单词的 精确 时间\n4. 停下来等待批准，然后再开始编写场景代码\n

阶段 2：主题 3D 背景 (见第 3 节)\n

阶段 3：PiP (如果有) + 字幕 + HUDs (见第 4 和第 5 节)\n

阶段 4：通过 Freesound 获取 SFX (见第 6 节) — 必需\n

阶段 5：渲染 + 混音 + 联系表 + 缩略图\n

3. 动态 3D 背景 (创意是必需的)

规则： 背景 不能 是静态的。它必须有持续运动以及漂浮元素。使用主题来决定风格：

| 主题 | 3D 背景 |\n|------------------|---------------------------------------|\n| 太空 / 宇宙 | 3 层视差星星、微妙的星云、地平线上的行星 |\n| 编程 / 科技 | 浮动代码矩阵、"位"粒子、线框电路、动画网格 |\n| iPhone / 极简 | 浮动的灰尘粒子（缓慢、大小各异）、柔和体积光、怪奇物语颠倒世界风格 |\n| 自然 | 飘浮的有机叶子/粒子、过滤的阳光、视差深度 |\n| 城市 / 都市 | 远处的霓虹灯、雨粒子、视差天际线 |\n| 科学 / 实验室 | 浮动分子、线框试管、明亮粒子 |\n 始终包含：

• 视差 (至少 3 层，速度不同)\n- 摄像机运动 (整个视频持续微漂移)\n- 体积光照 (柔和光，非平面光)\n- 后期处理 (泛光、微妙的暗角)\n- 与主题一致的颜色 (不使用通用调色板)\n

4. PiP (说话脑袋) — 如果有视频

• 使用 Remotion 的 <OffthreadVideo>
• 精确宽高比 (不扭曲面部)\n- 位置： 右下角，但 遵守安全区域 (x ≤ 940)\n- 样式： 圆角 24px，柔和阴影，细边框\n- 切勿 更改原始视频的颜色、背景、宽高比或音频\n- 仅在关键时刻 放大（例如 1.12 倍）\n- 如果只有音频： 在 PiP 位置添加一个随声音脉动的 "音频可视化 HUD"\n

5. 字幕 (动态排版 + 无 "矩形")

动画规则：

• 逐字显示 (非逐句) — 每个单词在说话的确切帧上显示\n- 缓出并带有弹性 (~0.15 秒/单词)\n- 关键词： 白色闪烁 → 稳定为强调色 + 发光 + 短暂放大\n- 预先排好行 (不让单词 "跳跃" 换行)\n

⚠️ 关键规则：无矩形

不要 在文本后面使用纯色背景色。\n为了可读性，仅 使用：

• text-shadow: 4px 4px 8px rgba(0,0,0,0.9)
• filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8))
• 可选：单个单词后面可以有 ≤ 15% 不透明度的径向渐变\n- 绝不：用 <div style="background: rgba(0,0,0,0.7)"> 包裹整句\n 文本必须 浮动 在背景之上，而不是像卡片一样。

位置：

• 水平居中\n- Y 在 1400-1550 之间\n- 最小尺寸：72px (手机上可读)\n

6. 通过 Freesound API 获取 SFX (必需)

用户要求 从 Freesound API 下载声音。不要仅使用本地合成。

流程：

1. 检查 ~/.zshrc 中的 FREESOUND_API_KEY
2. 创建/使用 scripts/fetch-freesound.mjs 搜索并下载\n3. 最低限度 SFX 地图 (根据主题调整)：

| 时间 | 类型 | Freesound 查询词 |\n|-------------------|-----------------|-----------------------------------|\n| 开场 | 柔和数字启动 | "soft digital boot" |\n| 文本冲击力 | 电影感打击 | "cinematic impact hit" |\n| 计数器 | 时钟滴答 | "digital counter tick" |\n| 速度计 | 速度表呜呜声 | "engine whine pitch up" |\n| 物体飞过 | 喷射嗖嗖声 | "jet flyby whoosh" |\n| 3D 揭示 | 渐强上升音 | "cinematic riser" |\n| 到来 / 高潮 | 轰鸣 + 铃声 | "cinematic boom chime" |\n| 最终 CTA | 柔和铃声 | "soft notification chime" |

4. 首选 CC0；备选 CC-BY (在 public/sfx/CREDITS.json 中注明)\n5. 保存到 public/sfx/\n6. 仅在本地合成 持续音 (space pad, drone, 长 riser) 通过 scripts/gen-sfx.mjs

混音：

• 人声：绝不处理 (仅提高增益以达到 -14 LUFS，限幅器 -1 dBTP)\n- SFX：闪避 -3dB (whooshes)，-8dB (booms) — 意味着降低人声上的 SFX，而不是人声本身\n- Space pad：-24dB 持续，1 秒淡入，2 秒淡出\n- 最终响度：-14 LUFS，峰值最高 -1 dBTP

7. TikTok 安全区域 (必需)

• 画布：1080×1920，60fps
• 安全区域： x ∈ [60, 1020], y ∈ [120, 1670]
• 操作栏 (右侧)： 不要侵入 x > 960
• 顶部栏： y < 120
• 底部 (字幕)： y > 1670
• PiP： 切勿覆盖 x > 940
• 始终 通过带安全区域叠加的联系表进行验证

8. 最终检查清单

• 时长 = 音频实际时长 (不切断高潮部分) \n- [ ] Whisper 已转录并逐字同步\n- [ ] 3D 背景具有主题性、动态性、带视差\n- [ ] 字幕使用动态排版，无矩形背景\n- [ ] PiP 遵守安全区域 (x ≤ 940) — 如果有\n- [ ] 至少 5 个上下文创意元素 (HUD、飞行物体)\n- [ ] SFX 从 Freesound API 下载 (不仅仅是合成)\n- [ ] 混音 -14 LUFS / -1 dBTP\n- [ ] 联系表带有安全区域叠加\n- [ ] 已生成缩略图 (out/thumbnail.png)\n- [ ] 3 秒钩子已验证 (3D 元素 + 文本 + SFX + 摄像机)\n- [ ] ffprobe 验证 1080x1920，60fps，H.264 + AAC

9. 处理 macOS 沙盒卡住

如果 Claude Code 因 "Operation not permitted" 而失去对文件夹的访问权限：\n1. 将所有文件准备到 scratchpad\n2. 生成单个脚本 finish-v2.sh 用于安装和渲染\n3. 用户在终端手动运行\n4. 然后 Claude Code 读取用户粘贴回来的 ffprobe 输出\n 始终 在最后包含手动备用方案。

10. 关于图片许可证 (如果下载)

• 首选 Wikimedia Commons (CC0/CC-BY/CC-BY-SA) — 务必检查许可证\n- 首选 苹果/官方公司 (编辑合理使用)\n- 避免 随机网站 / Pinterest / stock\n- 保存 credits.json，包含 {filename, source_url, author, license}\n- 在下载之前创建 LICENSE_CHECK.md，逐条审核\n- 如果没有明确许可证，使用 Three.js 生成程序化替代方案\n

---

总结： 此技能将任何脚本转化为电影级 TikTok 视频，包含主题 3D、动态排版、创意 HUD、PiP (可选) 以及通过 Freesound 实现的专业音效设计。上下文创意是 必需的 — 脚本的每一行都应激发一个独特的视觉元素。