animate

Animate

用代码制作简短动画视频：一个 <canvas>，以程序化方式绘制并配乐，逐帧确定性渲染，再通过无头浏览器和 ffmpeg 输出。故事遵循从优秀短篇动画中归纳出的语法；视觉风格是一种 style —— 从 styles/ 中选择的插件套件，或根据用户参考素材通过 new-style.md 制作的风格。

**要求：**Node 18+、Playwright 和 Chromium（npm i -g playwright && npx playwright install chromium），以及 PATH 中的 ffmpeg。先检查这些依赖；如果缺少任何一项，告知用户安装命令并停止。对于旁白，Python 和 faster-whisper（pip install faster-whisper）可为每个词计时；没有它时，词语时间将采用估算值。

以下所有路径均相对于此技能的基础目录。作品位于用户项目中的 pieces/<name>/（如有需要，创建 pieces/）；用户制作的风格位于 <project>/styles/<name>/。

不可妥协的事项

1. 故事板获批前不得开始动画制作。 设置确认环节是因为故事或视觉风格不对，会导致整项制作白费。
2. 绘制前先查看参考素材 —— 用户提供的参考素材，或风格的 sample.png 和演示。然后根据 grammar/FRAME.md 和风格自身的 STYLE.md 检查清单，逐一核对每个关键帧。
3. 画面中的每项事实性陈述都要通过网络搜索核实，并在简报中列出来源。没有来源时，绝不声称某事是“第一”。
4. 单文件，包含所有代码：一个 index.html；所有内容都通过代码绘制和合成 —— 不使用图像／音频／视频文件、data: URI、URL 或网页字体。tools/build.mjs 会强制执行此规则。有两项可选例外，且都必须由用户提供：素材（位于 <piece>/assets/ 中的屏幕截图和徽标，由构建过程嵌入）以及音乐曲目（导出时合并）。详见下文的素材和音乐部分。
5. **确定性：**仅使用带种子的随机数（RNG(...)），逐步变化使用沸腾索引 B。绝不使用 Math.random() 或墙上时钟时间。
6. 参考媒体保留在本地。 除非用户要求注明来源，否则绝不在发布内容中提交或复制其代码，也不提及其创作者姓名。
7. “完成”以结果衡量：tools/review.mjs 检查通过，并且你已查看联系表。报告具体数据，而不是说“看起来不错”。
8. 提问时提供选项。 使用 AskUserQuestion，并优先给出推荐的默认选项，让用户一键作答。

工作流程

0. 收集需求

根据 intake.md 提问 —— 只问无法推断的信息。对于视觉风格，生成风格图库（node tools/gallery.mjs <out.png> [<project>/styles]，约 3 秒），展示图库并询问：想选哪一种，还是给我看看参考素材？ 然后对照 FRAME.md 和风格检查清单，自行研究参考素材。

1. 故事确认（快速文本环节）

从 grammar/FORMATS.md 中选择形式 —— 由情节引擎决定（历史故事是由变形连接的时间线；任务故事按节拍切换；列表故事则是目录）。阅读 grammar/STORY.md。通过网络核实事实。然后向用户展示：

• 一句话创意和易于口述的设计手法（“火花每个时代都多出一束光芒，最终成为答案”）
• 形式及理由、视觉风格、时长、BPM
• 带编号的节拍表：时间、发生的内容、衔接到下一个节拍的过渡、声音的作用（静音处、最响亮的重击处）

询问：批准／修改节拍／换个角度。 反复修改，直到获批为止。这样就能以较低成本及时发现“我想表达的是 X，不是 Y”的情况。

2. 视觉风格检查（2–4 张风格帧）

在 pieces/<name>/ 开始创作：从该风格的演示项目（styles/<name>/demo/）复制 piece.json 和 src/——其中已经采用该风格的工具集，并通过变形连接不同年代；也可以从 templates/beat-cut/ 开始，制作一支在节拍上快速硬切的作品（八分音符节拍，奇数帧处有十六分音符加速段，每个镜头呈现一个年代，取景由摄像机完成）；或者从 templates/piece/ 开始，制作最简单的剪纸变形作品。在 piece.json 中设置 "style"，然后重新编写 brief.md 和 LOG.md（模板中的文件只是占位内容）。

• 已提供的风格： 阅读其 STYLE.md 和演示项目，并使用其工具集绘制。
• 用户提供的参考： 按照 new-style.md 操作。先测量参考图（tools/measure/refs.mjs）；作品自己的风格帧就是匹配后的帧，因此这是一次检查：对照图表和帧一起检查。作品获批后再保存风格文件夹（该作品将成为风格的“验证案例”）。

将差异最大的 2–4 个节拍绘制为全尺寸帧。每帧都必须通过 FRAME.md 和该风格的检查清单。使用 node tools/still.mjs pieces/<name> 2.25,9.75,16.5 look.png --scale 0.5 将它们并排渲染（或者使用 tools/storyboard.mjs，并将 TIMELINE.board 设为这些节拍），然后展示图片。询问：每帧是否点赞／修改视觉风格／尝试另一种风格。

3. 故事板检查（每个节拍）

按照获批的视觉风格绘制每个节拍。为 TIMELINE.board 填入每个节拍的一个关键时间点（{ t, title, sound, next }），并渲染故事板。请对方按面板编号点赞或点踩并提供备注；重绘收到点踩的面板，然后重复检查。面板就是视频自身的场景函数，因此后续无需重绘。

4. 制作

1. 编写 pieces/<name>/brief.md（规格、风格、节拍、过渡、声音计划、说法与来源）。维护 LOG.md。
2. 为场景制作动画：使用带时间的动作和 TT、ev(t, d)、popS(t)、书写动画（见 craft.md → 动态效果）。在 src/bridges.js 中连接不同年代、摄像机和过渡（用于变形连接的格式）；硬切则将 BRIDGES = [] 留空。
3. node tools/build.mjs pieces/<name> → index.html（从 piece.json 的 "style" 中提取该风格的工具集）。
4. 制作过程中测试拼贴：node tools/tile.mjs pieces/<name> tile.png <frames...>——检查拼贴图；遍历每个变形和切换处生成拼贴图。
5. 在 src/score.js 中编写配乐（见 craft.md → 声音）。
6. node tools/export.mjs pieces/<name> --share → 帧、audio.wav、分轨、renders/final.mp4、renders/share.mp4（为每种格式导出时使用 --formats 9:16,1:1,16:9；为采用 1 秒风格的作品添加运动模糊时使用 --blur 4）。使用 --only-audio 迭代混音（重新渲染配乐并重新封装，速度约快 4 倍）。
7. node tools/review.mjs pieces/<name> → 每个镜头的缩略图表、切换网格、变形网格、故事弧线、锚点、文字（被截断／重叠／被手机界面遮挡）和声音（最响的时刻、此前的静默、LUFS）。修正问题直至通过，查看各图表，并在 LOG.md 中逐镜头填写 PASS 表格。相信文字检查而不是肉眼：标签被裁切后，在缩略图表中看起来可能仍然正常。

5. 交付

发送 renders/share.mp4。用几句话说明作品内容、各项检查的数值、审查发现并修正的问题、最弱的镜头，以及尚未核实的内容（例如你无法试听配乐）。询问对方希望修改什么：故事、视觉风格、转场、节奏、声音。

6. 总结经验

每次制作完成后，将记录追加到该作品的 LOG.md。如果有新问题出现或新做法奏效，提出一条适用于 craft.md、该风格的 STYLE.md 或工具集修改的一行规则，并在用户同意后添加。

旁白（可选）

在初次沟通时询问（问题 3）。有了旁白，旁白就是时钟：每个节拍在上一句结束后约 0.3s 开始，重要时刻落在说出的词上。脚本就是分镜：每个节拍一行。

1. 将脚本写入 pieces/<name>/voice/script.json：{ "lead": 1.2, "tail": 1.8, "lines": [{ "id": "open", "text": "As it is spoken.", "after": 0.45 }, ...] }。数字和名称要按实际读法书写。语速保持在每秒 3.5 个词以内；画面需要时间呈现时（如计数、字幕、揭晓前的静默），为该行设置更长的 after。
2. 在旁白就绪前先构建：node tools/voice.mjs pieces/<name> --scratch 会使用操作系统自带的语音合成功能生成用于计时的旁白（绝不可随作品发布），以便动画制作和评审整个作品。
3. **录音素材：**每行一个文件，保存为 voice/<id>.mp3，并在该行设置 "file"。
   • ElevenLabs 连接器（如果用户已配置：在 Claude 的 Settings → Connectors → ElevenLabs 中通过 OAuth 登录，无需 API 密钥）：使用其语音搜索找到 2–3 位合适的配音者，每位各生成一行（每位一个变体，不要生成四个），让用户挑选，然后使用选定的语音和模型为每行各生成一次。生成结果会为每段录音提供一个短时有效的下载链接：将每段录音保存到 voice/。每个字符约消耗一个点数；完整生成前告知总费用。如果连接器是在当前会话期间添加的，其工具可能要等应用重启后才会显示。
   • **用户自己的录音，**每行一个文件（也可以从一段录音中剪辑出来）。
   • 切勿从用户未指定的网站获取语音，也绝不可未经语音所有者同意克隆语音。
4. node tools/voice.mjs pieces/<name> → voice/voice.wav（包含各行及其停顿）和 voice.json（使用 faster-whisper 在本地识别音频，记录每行和每个词的起止时间）。构建过程会将其注入为 VOICE。
5. 在头部中：VL(id) 表示一行；当第 n 个 word 开始时，使用 VW(id, word, n)；节拍从上一行的 t1 + 0.3 开始；TIMELINE.narration 来自 VOICE.lines，DURATION 来自 VOICE.duration。在提到提示词的词语上触发提示词和闪光。**将揭晓效果放在提及它的那一行之前的停顿中：**说话期间的效果音会被压低。
6. piece.json："voice": { "file": "voice/voice.wav", "music": -12 }。导出时会将旁白混入配乐（配乐音量设为 music dB，并在旁白说话时进一步压低），响度为 −14 LUFS。评审会仅依据配乐判断故事弧线和揭晓时机（renders/audio-score.wav；旁白比任何效果音都响），并通过其 NARRATION 检查评估旁白。
7. **重录和编辑脚本：**替换某一行的文件（或编辑其文本），重新运行 voice.mjs 并重新构建：由 VOICE 触发的场景会随之移动。词语更改后，指向该词的提示可能失效；请检查相应节拍。

音乐：用户自己的曲目（可选）

在接收信息时询问（问题 6）。没有曲目时，乐谱会按照 120 BPM 网格通过代码编写。有曲目时：

1. 将曲目放入作品中：pieces/<name>/audio/track.wav（WAV、MP3 或 M4A），并在 piece.json 中添加："music": { "file": "audio/track.wav", "start": 12.0, "gain": 0, "fade": 0.5 }（start = 作品在歌曲中的起始位置）。
2. node tools/beats.mjs pieces/<name>/audio/track.wav pieces/<name> --start 12 --dur <piece length> → beats.json：包含速度、第一拍、每一拍和每一小节、最强的节拍、最响的时刻以及掉拍。若用户知道速度，请传入 --bpm 128；否则查看其中的“other tempos”行（通常容易误判为双倍、半速或三分之二速）。
3. 构建过程会将其注入为 BEATS；起始代码的头部会从中读取 BPM 和 GRID0，而 onBeat(t) 会将时间对齐到歌曲的 8 分音符网格。将剪辑、变形和提示放在 onBeat(...) 上。歌曲决定叙事弧线： 将转折放在掉拍处（BEATS.quiet），将高潮放在最响的节拍处（BEATS.loudest、BEATS.hits），而不是放在编写乐谱时会安排的位置。
4. 乐谱（src/score.js）只保留音效（to = 's'）：导出时会用曲目替换音乐总线，将音效轨混入其上，并将响度标准化为 −14 LUFS。Review 的网格使用 TIMELINE.gridOffset；其 SOUND 部分会说明最响的时刻是否落在高潮段。
5. 浏览器预览仍会播放编写的乐谱（页面中没有音频文件）；导出版本则包含曲目。

素材：真实截图和标志（可选）

当主题是产品时，在接收信息时询问（问题 7）。然后：

• node tools/capture.mjs <url> pieces/<name>/assets/home.png [--selector "css"] [--full] [--dark] [--hide "css"] 会截取用户自己的网站（页面、版块或标志）。截取任何非用户所有的内容前，请先询问。用户提供的标志文件也放入 assets/（PNG、SVG、JPG、WEBP）。
• tools/build.mjs 会将 assets/ 中的所有内容嵌入 index.html（作品保持为单个文件，画布也能通过检查）；图片解码后，window.renderFrame 才会出现，所有工具都会等待它。
• 在样式自身的构图中使用 drawAsset('home.png', x, y, w, h, { fit: 'cover' | 'contain', r }) 绘制它们（例如撕边纸照片、墨线相框或印刷卡片），使其融入整体视觉效果。asset(name) 会返回图片。
• 只使用真实产品界面： 对真实屏幕进行动画处理（裁切、推近、揭示，或用主视觉指向它们）；切勿把虚构屏幕画得像真实产品界面。根据截图提取品牌色。

格式：一件作品，多种形态（可选）

在接收信息时询问（问题 2，可多选）。在 piece.json 中列出 "formats": ["9:16", "1:1", "16:9"]（第一项为主要格式）。起始代码的头部会读取 ?format= 并设置 W、H、SAFE 和 CX；场景通过 LX(fraction)、LY(fraction) 放置元素，并使用 UNIT 调整大小；必要时使用 PORTRAIT / WIDE 选择不同布局（例如，9:16 使用三列，16:9 使用三行）。切勿将 9:16 渲染结果裁切为 16:9。

• node tools/export.mjs pieces/<name> --formats 9:16,1:1,16:9 --share → renders/final.mp4（主要格式）以及其他格式对应的 final-<w>x<h>.mp4。
• 分别检查每种格式：node tools/review.mjs pieces/<name> --format 16:9（tile / still / textcheck / storyboard 也接受 --format）。这里最重要的是文本检查：适合 16:9 的宽字幕可能会超出 9:16 的画面范围。

动效：弹簧与模糊

• 弹簧（kit/core.js）：springMove(t0, a, b, SPRING.snappy) 会让数值移动时稍微过冲，然后稳定下来；springTrack([[t, v], ...]) 会让数值连续跟随多个目标，不产生跳变。预设：snappy（UI）、smooth（卡片、摄像机）、heavy（大字、徽标）、playful（吉祥物）。采用闭式计算，因此帧始终保持确定性。每隔 2 帧计算一次符合 2 帧一格的样式效果。
• 动态模糊：export.mjs --blur 4 会对每帧的 4 个子帧取平均值——仅适用于每秒 1 格的样式（STYLE.ones：数学、等距）；每秒 2 格的手绘风格本就应保持清晰（导出时会发出警告）。

并行 Agent（长篇作品）

一部 45–60 秒的作品有 10–15 个场景；分镜获批后，将绘制工作拆分给多个 Agent：

• 每个章节或时代对应一个 src/ 文件，由一位 Agent 负责（src/era-01.js、src/era-02.js，依此类推）。在 piece.json 的 "scenes": [...] 中列出这些文件；它们会在构建顺序中取代 src/scenes.js。
• 共享部分由你负责：src/head.html（TIMELINE、时代、镜头、提示点）、src/bridges.js、配乐和工具包。Agent 可以阅读这些文件，但绝不能编辑；如果某个场景需要工具包辅助函数，就由 Agent 在自己的文件中以带前缀的名称编写。
• 给每位 Agent 分配任务时，提供获批的分镜面板、该风格的 STYLE.md、时代的时间范围和提示点名称、桥接对象（边界处必须出现在画面中的内容），以及这些规则：结果必须确定性、未经时代前缀不得添加全局变量、平铺帧并查看效果。
• 由 build.mjs 将它们合并；你负责构建、平铺每个边界两侧的帧，并进行审核。

文件

路径	内容	何时阅读
intake.md	问题与默认值	步骤 0
craft.md	提炼出的规则：故事、画面、动效、时间、声音、代码、审核	步骤 1 之前，以及构建时
grammar/FORMATS.md	8 种故事形式（引擎 × 舞台 × 时钟）、不变量，以及已验证的形式	步骤 1
grammar/STORY.md	有证据支撑的节拍级故事规则	步骤 1
grammar/FRAME.md	任意风格下单张关键帧必须包含的内容	步骤 2–3
styles/	各种风格：STYLE.md（规则 + 画面检查清单）、kit.js、sample.png、demo/；STYLE 钩子契约	步骤 0、2，以及构建时
new-style.md	根据用户提供的参考资料创建新风格	步骤 2
kit/core.js	随机数生成、缓动、几何、手绘线条（抖动、墨迹、绘画、排线、铅笔、点描、颗粒）、摄像机、时间辅助函数	构建时
kit/morph.js	渲染器：时代、推镜、变焦跳动、形状变形桥接、叠加层——通过风格的 STYLE 钩子绘制	构建时
kit/board.js	分镜渲染器	步骤 2–3
kit/score-*.js	合成音效（拨弦、铺底、持续音、低音、次低音、噪声冲击、扫频、渐强、钟声、短促提示音）、响度阶段	配乐时
templates/	piece/（8 秒剪纸变形作品）、beat-cut/（带十六分音符急促段落的 6 秒硬切作品）、style/（用于新风格的空白风格工具包）	步骤 2
tools/	构建、平铺、静帧、分镜、导出、审核、文本检查、比较（参考图与帧）、图库、帧哈希（像素一致性检查）、节拍（提供的音轨节拍图）、捕获（用户网站的屏幕截图）、配音（旁白台词及词语时间）；参考资料相关工具位于 measure/ 中（静帧用 refs.mjs，视频用 shotlog.py）	全程
examples/history-of-ai/	完整的 60 秒示例作品（剪纸风格）	不确定如何组合时

坦诚说明已验证的内容

格式 F2（时间线／形态链）和 F4（任务）都各自创作出了一篇作品，仅凭卡片就通过了所有检查；F5（固定主角旅程）则有多篇作品。其余格式虽有研究记录，但尚未验证——选择时请说明这一点。剪纸和交叉排线已用于完整作品；risо、素描本、数学和像素风格各有一两篇完成作品和一个演示；等距风格是根据参考资料并借助 new-style.md 制作的，目前只有演示；根据新参考资料制作的风格，在用于完整作品之前都属于全新尝试。WebGL 动态设计（光线步进 3D、运动模糊、泛光）尚未成为已发布的风格。