Pixel Crew 短片
要模仿的示例是 projects/ai-delivery-team 项目（请阅读 docs/REFERENCE-BREAKDOWN.md 了解其成功的原因）。阅读 CLAUDE.md 获取项目地图及我们曾踩过的坑。
1 · 先写脚本（script.json）
适用的结构：吸引钩子（≤5 秒）→ N 个相同节拍（每个约 3.5 秒）→ 收尾 → 关键词行动号召。
- 钩子：一个令人惊讶的数字 + 一帧展示整个系统（例如：“7 名员工，没有一个是人类”）。
- 每个节拍：“角色做 a、b 和 c。” —— 三个可以动画化的具体名词。
- 收尾：人类唯一的工作（批准、决定、审核）。
- 行动号召：“评论 KEYWORD，我会给你发送……”（keyword 位于
brand.keyword）。 - 将
lines写成 2-4 个单词的标题短语；每一行对应一个字幕。 - 目标总时长为 30-45 秒；配音速度 1.3-1.4 可使 Kokoro 接近每秒 3.5 个单词。
- 如果不确定用户品牌、审批人名称或关键词，请直接询问用户；否则保留
@yourhandle占位符并说明。
2 · 搭建脚手架
node scripts/new.mjs reel <项目名称>
python3 scripts/voice.py projects/<项目名称> # 先确定时间，然后根据时间进行设计
3 · 场景（index.html + style.css + scenes.js）
- 每个脚本场景对应一个
<section class="scene">，顺序一致（R.cuts()将它们映射到TIMING.scenes）。 - 每个员工场景：
.head包含.step[data-step][data-label]+.title（尺寸需确保在 ≤ 980 px 内显示完整），然后是一个或两个表现其工作的.card。 - 为每个场景设置独特的强调色（
--accent: var(--rN)）并交替背景（is-paper、is-peri、is-lav、is-cobalt）。 - 对每个配音名词进行动画处理：
R.pop(el, R.word(scene, line, "noun"))、R.tick、R.type、R.grow、R.slam（用于印章）。 - 使用
data-icon、data-bot、data-burst、data-face、data-presenter占位符；Sprites.hydrate()会自动填充它们。 - 以
R.captions(...)和R.register()结尾；保留内联的window.__timelines["main"]行。
4 · 检查，然后渲染
node scripts/build.mjs projects/<项目名称> --no-voice --no-render --snap <每场景一张快照>
# 查看 projects/<项目名称>/build/snaps/contact-sheet*.jpg，修复问题，重复
node scripts/hf.mjs lint projects/<项目名称>
node scripts/build.mjs projects/<项目名称> --no-voice # → renders/<项目名称>.mp4
验证 MP4 自身：ffmpeg -i renders/<项目名称>.mp4 -vf fps=1,scale=180:-1,tile=8x5 sheet.jpg
以及 -af ebur128（目标 ≈ −14 LUFS）。检查：首帧是否为空白、文本是否触碰边缘、元素是否在 Instagram UI 下方、字幕是否不同步。
可选替换
- 语音：
script.json中的voice.voice字段（am_michael、am_puck、am_fenrir、af_heart、bf_emma等），或录制你自己的音频到build/voice.wav并使用voice.py --from-wav。 - 音乐：将音轨放入
build/music-override.wav。 - 主持人：所有者的卡通形象（
kit/brand.js、kit/avatars/）会被[data-presenter]和[data-face]自动使用；通过宽度（.is-img）控制图像尺寸，显示上半身。除非用户要求，否则不要绘制其他角色。