手绘动效视频

把一段旁白做成白板手绘动画：lines.json（一句一场）→ 配音 → scenes.mjs（每场画面）→ 逐帧渲染 → 混音 → MP4。

画面全是 HTML + SVG，由按时间推进的运行时驱动，无头 Chrome 逐帧截图。所以字是清楚的、每一帧都能复现，改一句话只要重跑那一句。

这套风格长什么样

十种风格（"theme"）

• 深色底（chalkboard、blueprint、neon）会把场景里写死的白底卡片、浅色代码块变成只有描边，便利贴变成强调色框。新写场景时背景用 var(--card)，文字颜色用 INK/GRAY（随风格变），不要写死 #fff、#1f1f22。
• config.accent 可以覆盖风格自带的强调色；不写就用风格自带的。
• 水彩、水墨里不想要自动淡彩的框：R.rect(..., { wash: false })；指定颜色：{ wash: "#E0A458" }。
• 例子：examples/styles/ 是同一段开场在十种风格下的样子。
• 新加风格：scripts/engine/themes.mjs 加一项（墨色、纸色、线宽倍数、抖动倍数、笔），style.css 加 .th-<名字> 的纸面纹理和组件样式，质感滤镜写在 themes.mjs 的 FILTERS 里。

流程

$S 指本 skill 目录。首次使用在 $S/scripts 跑 npm i，再跑 bash $S/scripts/assets/fetch_audio.sh 下载配乐和音效（Mixkit 授权不允许随仓库分发）。

⓪ 立项（能默认就默认，缺了才问）

bash $S/scripts/init.sh <项目目录> 16:9     # 建项目：engine/、config.json、lines.json、scenes.mjs、cover/

① 素材

• 介绍产品：先确认产品真实存在、发布时间和可用范围（官网 + 官方公告），事实只用官方说过的。官网图抓下来挑：

  node $S/scripts/assets/fetch_site.mjs https://产品官网 <项目>/assets/site   # 截图 + 正文配图 img-* + logo 候选
  

  产品首页常只有一句口号，真正的界面图多在发布文章里，两个页面都抓。logo 要透明底原件；只在宣传图里有时用 python3 $S/scripts/assets/extract_logo.py 抠。界面图太大时用 PIL 裁出要讲的那一块（聊天记录、任务清单、侧边栏），一张图只讲一件事。

• 讲解类：用户给的文章/文件夹，抄事实和例子，标出哪句用哪张图。

• 把要用的图放进 <项目>/assets/，scenes 里用相对路径 assets/xxx.png。

② 旁白 → lines.json

一句一场，每句 20–50 字，一共 10–14 句（产品介绍）。结构：一个具体的痛点 → 产品登场（一句话说清是什么）→ 3–6 个能力，每个带一个具体例子 → 一个完整的使用场景 → 怎么用上 → 收尾一句。

• 口语，短句，不喊口号，不用「赋能」「颠覆」「一站式」。

• 英文产品名写 {字幕写法|配音读法}：{Grok Bot|格罗克波特}、{Cursor|科瑟}。字幕和 c.at() 用前者，配音念后者。常见词（AI、iOS、CRM）先不标，校验出错再标。

• 英文旁白 / 双语字幕：每句写成对象，竖线 | 切字幕块，sub 的块数和 say 一样，每块一屏字幕（英文 ≤ 8 个词）：

  { "say": "Grok Bot closes that last ten percent.|It's a team of always-on AI teammates|that actually finish the job.",
    "sub": "Grok Bot 想补上最后这一成|它是一支全天候在线的 AI 队友|能把活儿直接做完" }
  

  英文稿的 c.at() 关键词写英文（c.at("ninety percent")）。画面上的手写字可以保留中文（双语字幕已经覆盖），也可以写英文。

• 每句里留出画面要「接」的关键词：说到「收件箱」时收件箱图标出来，所以这几个字要原样出现在稿子里。

③ 配音 + 对时

python3 $S/scripts/voice/tts.py <项目>                       # yovoice 逐句配音 → voice_raw/ → 去静音、压长停顿、变速 → voice/
HF_HUB_OFFLINE=1 ~/.cache/promo-tts/.venv/bin/python $S/scripts/voice/align.py <项目>   # 识别回来对稿 + 逐字时间 → align.json

align.py 列出对不上的句子：漏字、英文名读错的，改读法或换种子：

python3 $S/scripts/voice/tts.py <项目> 3 seeds=7,11,23 out=cand   # 第 3 句出三个候选，听完把好的拷成 voice_raw/s03.wav
python3 $S/scripts/voice/tts.py <项目> post 3                     # 再后处理成 voice/s03.wav

不配音：config.json 写 "voice": false，时长按字数估，只有字幕和配乐。用户自己的声音：见 references/voice.md。

动感卡点：换配乐后测一下节拍，build 会把每场结尾往后对齐到下一拍（最多多出一拍），转场的 whoosh 就落在拍点上：

python3 $S/scripts/voice/beats.py <项目>                    # → beats.json（BPM、第一拍）
python3 $S/scripts/voice/beats.py --probe a.mp3 b.mp3       # 挑曲子：clarity > 0.6 的拍子清楚

④ 画面 → scenes.mjs

一句一个函数，c.at("关键词") 拿到旁白念到这个词的时刻。组件、版面坐标、各种场景写法见 references/scene-patterns.md，完整例子 examples/grokbot/scenes.mjs。

node $S/scripts/engine/build.mjs <项目>                 # 生成 index.html，打印总时长
node $S/scripts/engine/render.mjs <项目> --stills ends  # 每场结尾一张 → contact.jpg
node $S/scripts/engine/render.mjs <项目> --stills mid   # 每场 35%/70% 各一张

用 Read 看 contact.jpg 逐场查：字和图有没有重叠、出界；结尾帧东西都出完了没（没出完就把时间提前，最后一个动作挂在句子中段的词上）；画面和旁白说的是一回事；有没有超过 2 秒什么都不动。改完再截，直到干净。浏览器打开 index.html?t=12.5 能停在任意一秒看。

⑤ 渲染、混音、封面

node $S/scripts/engine/render.mjs <项目>          # 30fps 逐帧，1 分半约 3 分钟
# 封面：改 <项目>/cover/cover.mjs 顶部的 C（标签、两行标题、logo、一张截图、批注）
node $S/scripts/cover/shot.mjs <项目>             # → cover/cover.png + thumb.png（300px 宽也要读得清）
python3 $S/scripts/voice/mix.py <项目> "<标题>"    # 人声 -16 LUFS + 配乐 + 音效 + 嵌封面 → out/<标题>.mp4

抽 5 帧看一眼，ffprobe 确认分辨率、时长、有音轨。

⑥ 交付

给用户：成片路径、封面路径、时长、比例；用了哪个音色、对时校验结果（哪几句改过读法或换过种子）；素材出处（哪张图来自哪个页面）；需要用户亲耳确认的地方。做别人家的产品只用于演示、内部提案或个人分享，不冒充官方发布。推到任何外部平台都要用户明确说了才做。

参考

• references/scene-patterns.md：版面坐标、组件清单、动画参数、10 种场景写法、自检
• references/voice.md：音色、读音标注、换种子、用自己的声音、校验环境
• references/pitfalls.md：踩过的坑
• examples/grokbot/：SpaceXAI Grok Bot 产品介绍，中文旁白（16:9，13 场，素材来自 x.ai/bot 和发布文章）
• examples/codemotion/：讲解类例子，把一篇文章做成 3 分半的讲解视频，每种工具配一段演示动图 + 一段 YouTube 案例片段（clip()）
• examples/grokbot-en/：同一个片子的英文旁白 + 中英双语字幕 + 动感配乐卡点 + 音效 + 慢笔速版本