javascript-animation

JavaScript 动画（每一帧都由代码绘制）

制作短篇动画电影，让每个像素都由代码计算得出：无需图像、无需加载字体，也无需库。整个作品只需一个 HTML 文件；无头浏览器会逐帧定位并导出为 MP4。

模型

使用 Claude Opus 5.5 构建并测试；绘制质量很大程度上取决于模型。以下自检需要图像输入：如果当前模型无法查看图像，请告知用户，并将视觉验证视为尚未完成。其他模型未经测试；如果结果看起来粗糙，请说明更强大的模型可能会有帮助，不要声称这已经是最佳效果。

默认流程：不要停下来询问

直接完成整个流程。选择合理的默认设置，并在交付时说明可选项。只有在完全没有主题时（例如只说“制作一个动画”，没有其他要求），才在开始前询问。

1. 阅读需求。 根据用户的描述推断形式（故事、解说、诗歌、循环动画、交互页面）、时长（默认 15-20 秒；只有主题无法在这段时间内讲完时才延长）和宽高比（默认 1920x1080）。屏幕上的文字使用用户撰写需求时所用的语言；只有用户提出要求或受众显然需要时，才制作双语版本。references/forms.md 中为每种形式提供了简短结构。
2. **根据主题和受众规划画面与声音，**用自己的话说明影片内容、视听风格，以及这种风格为何适合该主题和受众。无需填写任何清单；references/techniques.md 提供了可用的创作手法，而起始模板中的数值只是占位符，不代表固定风格。默认情况下，不要重复使用先前作品的画面或声音风格：不同主题不应呈现出相同的视听效果。如果用户提到他人的作品（例如“像那部热门作品一样”），可以借鉴其手法，但不要借用其中的角色、故事或构图。
3. 将节拍网格、分镜和调度作为数据（references/storyboard.md）。先确定节奏和段落；然后列出镜头，并选择适合该形式的节奏（节奏表见 references/storyboard.md；每个镜头都要注明景别、镜头运动、动作、落点节拍、声音和转场）；接着确定调度（故事或解说要规划一个连续世界中的运动轨迹）。将这些内容写入页面的 BPM、SECTIONS、SHOTS、EVENTS：场景、镜头和音轨都读取这些数据，因此画面和声音会自然对齐。对于故事或解说，检查逻辑是否连贯：每个节拍都由前一个节拍引发，隐喻要能在画面中体现。
4. 基于 templates/starter.html 构建。 它已经由分镜驱动：在世界坐标中绘制同一个世界，每个镜头使用 withCamera，并为每段文字和每个关键对象调用 claim()。替换占位调色板和演示世界。遵守约定：draw(frame) 必须是只由帧编号决定的纯函数。使用 rng(seed) / hash2()，绝不要使用 Math.random 或 Date。
5. 先自检，再渲染（见下一节）。修复问题并重新检查，直到没有问题。
6. **交付：**提供 MP4 和 HTML（可在浏览器中实时播放；点击即可开始播放声音）。然后用一两句话说明可调整之处：更换风格、改用 AI 音乐而非合成音乐，或调整时长。

制作音乐时，使用 soundtrack 技能（默认在页面中通过 Web Audio 合成，无需密钥）。

自检（由 Agent 执行；用户不会看到）

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # one frame per second, stepping off cuts
node scripts/render.mjs piece.html shot --stills 90,300,610   # specific moments
node scripts/render.mjs piece.html piece.mp4                  # full render (+ soundtrack if the page has one)
node scripts/asset-audit.mjs piece.html                       # proves zero-asset: exit 1 if anything is loaded or embedded
node scripts/layout-check.mjs piece.html                      # text colliding with text, or straddling a claimed object
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cuts on the beat, no startle

然后进行两轮目视检查，详见 references/qc.md：

1. 检查是否符合分镜： 为每个镜头的动作节拍截取一帧静帧，并对照对应分镜行检查（角色位置是否符合调度说明？动作是否符合分镜描述？）。
2. 导演检查： 以每秒 2 帧生成联系表（--sheet .5），根据形式评估节奏、构图变化、无效帧、每个动作是否都有对应声音，以及画面风格是否适合受众。至少进行两轮检查。 修改后，只重新渲染改动帧的静帧，不要每次都重新渲染整部影片。

仅在触发时

何时	操作
同一角色出现在多个场景中	在场景开始前，单独绘制该角色（表情 + 姿势），并对照 references/character.md 自行检查。角色应暴露锚点（嘴、手），以便道具附着其上。
用户提供了真实人物、宠物或地点的照片	按照 references/character.md 中的提取方法，根据照片创建角色。照片必须保留在本地：绝不上传，也不得放入任何已发布的内容中。
作品以真人为主角，且用户本人也在作品中	交付时（不要提前），主动提出可使用关键道具或人物的照片，让作品更具个人特色。
文本或对话气泡跟随移动角色	使用 placeFree(w, h, [above, right, left, below]) 放置，使其避开已占用的位置。
屏幕上的文本不是拉丁文字（中文、日文等）	使用 CJK 字体栈；检查每个字形是否都能正确显示（等宽字体可能会悄悄替换缺失的字形，例如 ≈ 变成了 =）。
页面将作为网页发布	交付 HTML；保留实时预览循环和点击播放音频功能。

避免常见问题的规则

• 时间的纯函数。 不使用 requestAnimationFrame 状态、CSS 动画或累积物理效果：每一帧都只根据 t 计算，否则渲染结果会与预览不一致。
• 手绘线条应有轻微抖动，而非乱抖。 如果影片设置了 LOOK.wobble，每 4 帧更换一次抖动种子（LOOK.boil: 4），不要每帧都换。每帧都变化会显得像噪声；每秒变化约 7.5 次才有手绘感。
• 身体使用圆润的形状。 用椭圆和圆角矩形构建人物。点数较少的原始多边形看起来像标志（五边形的手、方盒般的躯干）。
• 选择最能清晰表现姿势的角度。 从侧面看，躯干长、四肢短的姿势像毛毛虫；从正面看（经过缩短处理），同一姿势则像趴着的婴儿。
• 明确按从后到前的顺序绘制。 先画后侧头发，再画身体、脖子、脸，最后画前侧头发。大多数“某物遮住了脸”的问题都出在绘制顺序上。
• 剪辑点和动作都要有命中点。 每个剪辑点和每个可见动作都要放入 EVENTS/CUES；配乐要与它们同步（参见 soundtrack）。
• 文本绝不重叠。 为每个文本框和关键物体登记占用位置；layout-check 必须输出 CLEAN。字幕与显示器边缘或人脸重叠会显得粗心，而联系表上的眼睛很容易漏看。

文件

• templates/starter.html：绘图库（墨线、插画、扁平/蓝图图元、标签、纸张、滤镜图层）、withCamera、claim/placeFree，以及由分镜驱动的双镜头骨架。
• scripts/render.mjs：MP4 / 静帧 / 联系表。window.CUES 和 window.SCORE 是可选项：完整渲染时会写入 <out>.cues.json，并混入 SCORE 配乐（没有 SCORE = 无声 MP4）。画布尺寸必须为偶数。
• scripts/asset-audit.mjs：静态扫描 + 实时网络检查，检查所有已加载或嵌入的内容。
• scripts/layout-check.mjs：读取整部影片中的 window.LAYOUT，并列出文本碰撞及其发生时间。
• references/storyboard.md：节拍网格、镜头列表、调度、连续性和故事逻辑。
• references/techniques.md：经过测试的绘图技巧（墨线、专色印刷、单线雕刻、文字造型、马克笔填色、插画形状）。
• references/forms.md：各类形式的结构说明。
• references/character.md：仅在有角色时使用。
• references/qc.md：自检清单。

要求：Node 18+、ffmpeg、Chrome（或 npx playwright install chromium），以及在运行脚本的文件夹中（你的项目目录，而非技能文件夹）执行 npm i playwright-core。