text-motion-skilllisted

# Text Motion Video（v2 · 独立网页 + 自动化 MP4） > 🔀 **导航入口**：接到任务先看 [SKILL_INDEX.md](SKILL_INDEX.md)——总入口文件，按模式/阶段找"读什么、跑什么"，不迷路。 ## 一句话说清这个技能 **给我一个主题（或 SRT），我给你一个"网页版视频"**： - 一个能在浏览器里播放的独立网页（`index.html` + `assets/` + `scenes/` + `audio.mp3`） - 口播由 AI 克隆声音生成，画面由 AI 按详细口播稿设计 - **RAF 咬合齿轮**：每一帧读 `audio.currentTime`，画面元素跟着口播节奏出场 - 可选：一行命令导出 MP4（两种 CDP 方案：管道省磁盘 / 写文件更小） ## 核心原理：RAF 咬合齿轮 ``` 上齿轮：audio.mp3 的 currentTime ← 时间轴绝对真理 ↓ 每帧咬合 下齿轮：CSS class 揭示（.reveal-XX） ← 画面跟着口播出场 ``` `main.js` 每一帧读 `currentTime`，到点了就给 `#mount` 加上对应的 `reveal-*` class，CSS 里 `#mount.reveal-XX .element { animation: ... }` 命中，动画就跑。**自成一体，不依赖任何外部引擎**。 ## 交付形态（按优先级） | # | 交付物 | 状态 | |---|---|---| | 1 | **独立网页**（永远产出） | 打开 index.html 就能播 | | 2 | **CDP 逐帧精确 MP4** | `scripts/render-mp4-seek.mjs` 逐帧 seek+截图（推荐，音画零漂移） | | 3 | **CDP 管道实时截帧 MP4** | `scripts/render-mp4-pipe.mjs` 实时截帧走管道（快速，长视频有漂移风险） | | 4 | **CDP 写文件 MP4** | `scripts/render-mp4.mjs` 截图写磁盘（同上原理，兜底） | | 5 | **FFmpeg 自动录屏** | `scripts/render-mp4-gdigrab.mjs` 弹窗录屏（需可见窗口） | | 6 | **OBS 手动录屏**（兜底） | 见 `references/RENDER_MP4_MANUAL.md` | ## 入口流程（强制，技能触发后第一件事） ``` 技能触发 ↓ 🔴 **CHECKPOINT · 第一步：选布局模式（必须问用户）** ├── 1. 全屏模式（fullscreen）— 纯内容画面，无人像 └── 2. 人像模式（portrait-center）— 有真人出镜视频，居中全屏背景 + 左右玻璃浮层 ↓ 🔴 **CHECKPOINT · 第二步：选风格主题（必须问用户；仅全屏模式，人像模式跳过）** ├── 自动匹配 — 根据内容关键词 AI 推荐 ├── 用户指定 — 如"我要科技风""暖色系" └── 候选展示 — 列出 2-3 个匹配主题让用户挑 （人像模式背景是用户视频、画面不固定，不套主题——文字颜色按背景自适应，辉哥 2026-08-04 定） ↓ 第三步：内容来源（🛑 必须问用户"你手上