Continuum Walkthrough
基准是 examples/po-desk/walkthrough.html（PO Desk Walkthrough v4.1，10/10）。Jason：“我爱那些动画、音效等等，以及连续性力学的感觉”。每一段新内容都必须超越它。在写任何新东西之前，先打开基准并复制它的运动方式。
流水线（≈ 3–4 小时代理时间；渲染约 1 小时，可脱离）
| # | 步骤 | 工具 | 栅格 |
|---|---|---|---|
| 1 | 需求问答：使用问题工具（每次 4 个，推荐选项优先）询问 references/intake-qa.md 中的每一个问题 | AskUserQuestion | 答案未到位前不开始构建 |
| 2 | 分镜表 + 脚本：为这个产品填写 references/beat-sheet.md；每个分镜一句 VO 台词，对话风格 | write script.json | 用户批准分镜表 |
| 3 | 语音：每句台词录制两遍 | scripts/vo_gen.mjs | 免费计划额度足够（见 语音部分） |
| 4 | 验证 + 单词时间 | scripts/vo_verify.sh (whisper.cpp) | 每条选定台词与其台词逐字匹配 |
| 5 | 画面：复制 engine/starter.html，然后逐场景构建；将每个 T.* 键放在命名该词的单词起始处 | engine/engine.js | 每个分镜的画面在两种格式下都看起来正确 |
| 6 | 音效：为每个可见事件编写一个 cue sheet（见 references/sound-map.md） | scripts/mix.py cues.json | −14 LUFS, −1 dBFS，语音台词不重叠 |
| 7 | 栅格检查 | scripts/ghost_audit.mjs 用于 v 和 h | PASS。FAIL 则阻止渲染 |
| 8 | 渲染，脱离终端 | nohup zsh scripts/render.sh … & disown | 两种格式的帧数 = LEN × 60 |
| 9 | 交付 | 4 个 MP4：9×16 和 16×9，分别带语音+音乐和语音+音效 | 联系单（每 2 秒一帧）需人工检查 |
| 10 | 评分：询问 /10 分数，记录下来，并将每条意见转化为账本行和一条栅格 | references/lessons.md | — |
环境要求：node 20+, ffmpeg, python3（带 numpy）, npm i playwright-core（或设置 PW_DIR）, Chrome（可选设置 CHROME=…）, whisper-cli + ggml-small.en-q5_1.bin。
故事结构（不可重新排序）
- 钩子（0–5 秒）：一个个人化的、随性的开场白，叠加在一条来自发送者、看起来真实的 iMessage 上，带有其真实头像和名字：“嘿，这有点突然……但我瞥见了你业务中一件可能有趣的事”。还没有 Logo，也没有推销。
- 对象出现（5–10 秒）：一堆看起来很逼真的通知。其中一个（真实文档）变形为一张完整、可信的页面：信头、PO 编号、表格、合计、签名。
- 痛点，展示出来（10–18 秒）：一个命名的人（“Maria”）将其重新输入到每个目标系统：ERP（真实 Logo）、CRM（真实 Logo）、文件夹、电子邮件。她的时钟在走，按键在响。画外音中会说出每个目标的名称。
- 痛点，标价（18–26 秒）：费率 × 小时 × 工作日，一个计数器滚动到年度成本，使用红色数字。数学公式以小字保持在屏幕上。说出金额。
- 转折（26 秒）：“当这一切为你处理好了，它看起来是这样的。”同一个对象回到画面中央。连续性就是诀窍。
- 解决方案（28–42 秒）：扫描仪读取它，字段飞入一张卡片，勾选记号打勾，一个异常被标记并解释（“是平时的 10 倍”），然后一键修复，一键批准。
- 证明（42–51 秒）：它被归档到所有 4 个位置，带有真实 Logo 和勾选标记，然后是一张带时间戳的回执（“1 分 44 秒，从邮件到归档”）。
- 行动号召（51–53 秒）：温和且低压：“值得一看？回复即可。”
- Logo 单独（53.8–58 秒）：字标独自出现在空舞台上，逐渐淡出。屏幕上没有其他任何东西。
连续性规则（这就是视觉效果）
- 一个持续存在的对象（文档）使用
track()弹簧在布局之间移动。它从不被切换和重新创建。 - 每个场景都由前一个场景衍生而来：通知变成页面，页面缩小到旁边，窗口堆叠，页面又回来。
- 退场元素变为透明度 0 和
visibility:hidden。 永远不要将一个已完成元素以 20–50% 的透明度停放作为“背景”。那个幽灵元素毁了 v4 的轮廓（“在 0:18 之后，整个时间里都有一个轮廓被显示”）。ghost_audit.mjs现在会令任何半透明保持超过 3 秒的元素失败。 - 仅使用弹簧：
step()参数 z 0.88–1.0，无反弹。在进入/退出时使用模糊入/模糊出，60fps，8 子帧，180° 快门。 - 屏幕上：一次一个想法，大字号，无边框 iOS 卡片，暖白
#F4F2EE，墨水色#0E0E0E，每个含义一个强调色（红色 = 成本/问题，绿色 = 已完成）。 - 布局对
v（1080×1920）和h（1920×1080）是分开的。先设计 9:16；手机是主要屏幕。
真实感检查清单
- iMessage：真实的锁屏语法（时间、日期、堆叠通知、“现在”/“2 分钟前”），发送者头像 + 姓名，三音调音效。
- 文档：信纸比例，真实字段名，合理且可加总的数字，签名，页脚。
- Logo：真实 SVG（simple-icons，精确品牌色）。只显示潜在客户实际使用或你真正集成的工具。 出现 Logo 就意味着集成。
- 数据是编造的，并标注“示例数据 · 虚构公司”。金钱计算显示其公式。
语音：先问，再构建
始终询问他们想要哪个声音（需求问题 7），提供以下选项。推荐 ElevenLabs，并告知他们这是免费的：每月 10,000 免费额度。
| 选项 | 成本 | 听感 | 方法 |
|---|---|---|---|
| ElevenLabs（推荐） | 免费：每月 10,000 额度 ≈ 5 个视频 | 最像真人 | scripts/vo_gen.mjs，使用他们的 API 密钥（elevenlabs.io → 个人资料 → API 密钥） |
| 他们自己的声音，录制 | 免费 | 最个人化 | 他们在手机上录制每句台词；保存为 vo/raw/<id>-t1.wav，然后像往常一样运行 vo_verify.sh |
| 他们自己的声音，克隆 | ElevenLabs 付费计划 | 像他们，无需录制 | 在 ElevenLabs 中即时声音克隆，然后将该声音 ID 放入 script.json |
| 内置电脑语音 | 免费，无需账号 | 机器声 | say -v Samantha -o a01.aiff "…"；仅用于计时草稿 |
ElevenLabs 详情：
- 密钥：
ELEVENLABS_API_KEY或ELEVENLABS_KEY_FILE。永远不要打印、在聊天中粘贴或提交它。在 T3 中，使用request_secret和文件交付，并在完成后删除文件。 - 默认值：语音 Brian
nPczCjzI2devNBz1zQrb，模型eleven_v4，稳定性 0.45。音频标签如[casual]、[measured]、[serious]和[confident]用于引导朗读风格。 - 免费计划： 每月 10,000 额度（≈ 10,000 字符）。一个 60 秒的脚本 ≈ 900 字符，因此每句台词两遍 ≈ 1,800，大约每月 5 个视频。
- 免费计划没有商业许可证（ElevenLabs 条款）。仅用于草稿和内部审阅。在发布或作为营销材料发送之前，必须在付费计划（Starter 是最便宜的）上生成最终录音。
- 台词之间放置 ≥0.3 秒的气口。画面事件对齐到 whisper 单词起始点，绝不是猜测的时间。
音效
每个可见事件都有在手机扬声器上可听到的音效：iMessage 上的三音调，通知的叮咚声，打字时的按键声，每个窗口的弹出声，年度数字时的现金撞击声，“只是重新输入”时的深沉低音，扫描仪床面音，勾选的嗒嗒声，每次点击的按钮声，最后一次归档的成功音，以及 Logo 上的闪耀音。完整的映射和增益在 references/sound-map.md 中。音乐是可选的背景音，响度为 −23 LUFS，在语音下自动压低。始终也要交付一个语音+音效版本，因为热门音效会在应用内被添加。
渲染注意事项
- 当宿主应用程序重启时，渲染会终止。始终使用
nohup … < /dev/null & disown运行它们，并在之后检查帧数。在 2026-11-09 甚至那个方法也因宿主重启而失败；优先使用screen -dmS <name> zsh -c "…"。 - 磁盘：帧直接流式传输到 ffmpeg，从不写入磁盘。
render.sh在混流后删除静音中间文件。 - 对于
offsetWidth错误的 SVG 或图像（例如字标），自行设置el._w/el._h，否则它会渲染为偏中心。 - 任何必须在运动模糊下保持清晰的元素（快速“飞入”的碎片）使用
tf（帧时间）而不是t。