claude-animation

claude-animation

以代码编写、逐帧精准且呈现手绘质感的 2D 动画。 一部影片是一个纯函数 frame(ctx, t)；库负责绘制视觉风格（画笔、铅笔、水彩、颗粒、排线），角色骨架负责演绎 （一只细节丰富的蚂蚁、一群豆形身体的角色），渲染工具则负责渲染、预览和检查。

下面的每条规则，都源自真实影片中遇到的问题——一部 59 s 的水彩墨笔历史回顾，以及一组童话风格的昆虫影片——这些问题都是通过渲染才发现的。

请先阅读

我需要……	前往
根据简报创作原创动画	references/workflow.md → templates/beat-sheet.md → templates/film-template.mjs
增加细节（材质、纹理、角色）	references/detail.md — 细节指南。绘制任何表面前请先阅读
绘制／摆姿势／行走蚂蚁，或搭建新的生物骨架	references/characters.md、lib/rigs/ant.mjs
蚁群：叶片、幼虫、真菌、根系，以及带有可行走隧道的蚁巢剖面	lib/colony.mjs
多面低多边形海报艺术（扁平矢量风景、无缝环境循环动画）	lib/lowpoly.mjs、references/styles.md § 5、examples/claude-balloon/
动作／电子游戏质感：跳跃、拳击、受击停顿、震动、火花、连击、Boss 血条	lib/fx.mjs、lib/rigs/critter.mjs、lib/rigs/bug.mjs、examples/claude-game/
人物（豆形身体、棍状四肢、水彩）	lib/rigs/bean.mjs
节奏、表演、剪辑、镜头、转场	references/motion.md
选择或匹配视觉风格（编辑质感、画笔水彩、线条涂鸦、3D 字体）	references/styles.md
声音：根据画面时间线制作音效、合成背景音、响度	references/sound.md、scripts/sound.mjs、scripts/music.mjs
遇到问题	references/traps.md
了解其他动画技能的功能，以及我们的借鉴之处	references/prior-art.md

库（lib/）

文件	提供内容
core.mjs	缓动（eOut eIn eIO eBack eElastic eBounce eExpo popS）、ss 窗口、hash rng noise1、catmull pathOf ik、画布辅助工具（at line poly smooth ellipse stroke fill taper）、纹理（hatch fibre grainOver burst speedLines）
pen.mjs	Pen：渐细笔刷 stroke、pencil（3 次断续笔触）、ring、box（角部越界）、wash（扩散的水彩）、text（自行书写）、按顺序揭示、稳定的命名种子、可选的沸动效果
textures.mjs	paper fibrePaper lightBands sun moon star4 grass soil nightSky fleshCells filmFinish
nature.mjs	sprout melonLeaf tendril vine blossom bee drop
rigs/ant.mjs	ant(ctx, x, groundY, s, pose) — 细节丰富的蚂蚁（pose.look = 用于逐步构建揭示效果的墨线 / 填充 / 纹理图层）；antGuides() 蓝色构造线；seed()
colony.mjs	leaf leafPiece egg larva cocoon seedGrain fungus roots nestCanvas（在土壤中绘制巢室和隧道，返回 pathOf 行走路径）
lowpoly.mjs	facetMass（根据色阶将块面绘制为带光照的三角形，并支持穹顶 / 淡出 / 薄雾效果）、ridge、skyGradient、facetCloud、RAMPS（canyon、dusk、mesa、forest、ice、water、balloon、cloud）
fx.mjs	timeWarp（命中定格：接触时游戏时间冻结，特效继续运行）、shake、burstParticles（火花 / 碎片 / 灰尘 / 彩纸 / 余烬）、landDust、ring、flashAlpha、comicText、floatText、afterimages、starburst、heart
rigs/critter.mjs	方块风格动作英雄：跑、跳、翻身、挤压与拉伸、出拳、踢腿、受伤、蓄力光环、表情
rigs/bug.mjs	甲虫敌人（以及带角的首领）：疾行、颚部动作、闪光、挤压、旋转
rigs/chibi.mjs	大头卡通人物，带真实关节，由外观预设设定风格（头发、眼镜、衬衫、口袋和笔、裤子、鞋子）：走 / 跑 / 跳 / 欢呼 / 指向 / 挥手 / 携带、眼睛、眉毛、口型同步嘴型、脸红、汗水
rigs/bean.mjs	person bust bubble flagCloth hat SKIN
film.mjs	run({...}) → render / sheet / strip / verify；exposure(t, track, fps) 用于逐帧 / 二帧一画 / 保持曝光

每台机器只需安装一次：cd <skill dir> && npm install（唯一依赖：@napi-rs/canvas）。确保 ffmpeg 位于 PATH 中。

工作循环

brief ─▶ style bible + beat sheet ─▶ film.mjs (copy the template) ─▶ sheet ─▶ fix ─▶ strip the fast bits
     ─▶ verify ─▶ render ─▶ cues.json ─▶ sound.mjs ─▶ look at the master's contact sheet ─▶ deliver

硬性规则

1. 先设计节拍，再写代码。 填写 templates/beat-sheet.md：每个节拍都要有观众能够指出的结束状态、镜头、曝光和声音提示。在代码里设计会变成幻灯片。
2. 每个表面都要有三层：底色 → 纹理 → 边缘。 纯色填充还不完整。细节圣经会列出每种材质的纹理（水果 = 密集的细胞 + 带高光的种子，土壤 = 排线 + 地层 + 小石子，几丁质 = 渐变 + 形态排线 + 镜面高光线 + 轮廓光 + 刚毛……）。
3. 角色是有解剖结构的骨架，而不是一团东西。 昆虫使用 lib/rigs/ant.mjs；它的局部原点位于腰部下方的地面上，因此 ant(ctx, x, groundY, …) 始终会站在地面上。绝不要在每次调用时额外添加“地面”偏移量（这个参数恰恰导致两轮制作中的腿看起来像高跷）。
4. 沸腾效果是一个选择，不是默认设置。 纹理编辑风格的画面在静止镜头中完全静止；笔刷水彩风格则以 10 fps 产生沸腾效果。在风格圣经中写明选择。
5. 使用稳定的种子。 笔触根据名称生成种子（pen.begin("ant/body")），绝不根据帧索引生成，这样静止画面会保留笔触，重新渲染也会得到相同结果。node film.mjs verify 必须通过。
6. 每一轮都要查看像素。 render 前先生成 sheet，每次接触或快速动作前后都生成 strip，在宣布完成前还要查看编码后成片的联系表。渲染进程以 0 退出并不能证明任何事情。
7. 声音依据画面的时间线生成，在每次接触前约 0.03 s。不要使用连续的铅笔沙沙声底音（测试后已否决：它会干扰一切）。对混音进行响度标准化。
8. 展现世界，而不是幻灯片。 场景需要分层（天空、远景、中景、地面、经过镜头的前景），地点需要有居民在活动。镜头要穿行其中。

快速开始

SK=~/.claude/skills/claude-animation            # wherever this skill lives
mkdir my-film && cd my-film && cp $SK/templates/film-template.mjs film.mjs
CLAUDE_ANIMATION_LIB=$SK/lib node film.mjs sheet 0,1,2,3,4    # look
CLAUDE_ANIMATION_LIB=$SK/lib node film.mjs render             # out/template.mp4
node $SK/scripts/music.mjs bed.wav --dur 5 --end 4.4
node $SK/scripts/sound.mjs cues.json out/template.mp4 out/final.mp4 --bed bed.wav

仓库中的成片示例：examples/money-quest/ —— 一部 30 s 的双人冒险片（Q 版骨架 + 小生物）； examples/claude-balloon/ —— 一部采用多面低多边形风格、长 30 s 的无缝环境循环片 （所有动作都以 30 s 为周期，音频分为 4 段、每段 7.5 s，因此也能循环）；examples/claude-game/ —— 一部 30 s 的电子游戏短片（平台跳跃、虫子、带受击停顿、连击、特殊技和 K.O. 的 Boss 战、来自 scripts/chiptune.mjs 的芯片音乐）；以及 examples/ant-colony/ —— 一部长 32 s、宽高比为 16:9 的短片：从草图 → 墨线 → 上色 → 润色逐步成形， 讲述一只切叶蚁在草地上切割并搬运树叶，潜入巢穴剖面（菌园、育幼室、蚁后、储藏室、交通繁忙的隧道）；时间线上有 240 个声音提示；渲染约需 27 s。