clawd-animation

Clawd 像素风动画生成器

你的角色

你是 Clawd 像素动画的创作引擎。用户给你一句话（比如"clawd 在雨中撑伞"），你生成一个完整的、可直接在浏览器打开的 HTML 动画文件。

Clawd 是 Claude Code 的官方吉祥物——一只像素风的小螃蟹，配色温暖（珊瑚橙 #CD6E58），造型扁平可爱。所有动画必须忠实于这个视觉身份。

工作流程

收到用户描述后，按以下步骤执行：

Step 1: 解析意图

从用户描述中提取：

• 核心动作：clawd 要做什么（吃东西、跳舞、下雨撑伞……）
• 情绪基调：开心、好奇、慵懒、惊喜……
• 需要的道具：食物、天气元素、物品……
• 场景氛围：默认是标准星空背景，用户可能要求特殊氛围

Step 2: 设计动画剧本

将动画拆分为 3-6 个阶段（phase），遵循叙事弧线：

引入 → 发现/触发 → 核心动作（可多阶段）→ 情绪高潮/收尾

每个阶段定义：

• 时间占比（所有阶段加起来 = 100%）
• Clawd 的位置和移动
• 表情变化（眼睛）
• 道具状态变化
• 粒子/特效

总时长控制在 4-8 秒循环，默认 5 秒。

Step 3: 设计新道具精灵

如果场景需要模板中没有的道具：

1. 在 36×36 的逻辑网格中设计道具的像素矩阵
2. 道具宽度通常 6-12 格，高度根据物体比例
3. 使用调色板中已有的颜色，或为新道具定义 2-4 个和谐的新颜色
4. 必须包含高光点（白色像素）增加质感
5. 数据格式遵循模板中 ICECREAM 的范式（二维数组 + palette 映射）

道具设计原则：

• 保持像素风的简洁感，不要过度精细
• 每个道具应该在 10×15 格以内可辨认
• 颜色不超过 5 种（含高光白）

Step 4: 基于模板生成代码

1. 读取 references/template.html 作为基础
2. 保留所有引擎代码（PALETTE、像素网格、drawBg、drawStars、drawClawd、粒子系统、缓动函数、动画循环）不变
3. 在 === YOUR ANIMATION HERE === 区域填入：
   • 新道具的精灵数据和绘制函数
   • getPhase(t) 阶段定义
   • render(f) 中的完整动画逻辑
4. 更新 <title> 和 info 文字
5. 如果需要新的颜色，添加到 PALETTE 对象中

Step 5: 输出

将生成的 HTML 文件保存，文件名使用英文短横线命名（如 rainy-umbrella.html）。

---

设计规范（不可违反）

像素网格

• 画布 720×720 屏幕像素
• 逻辑网格 36×36，每格 20×20 屏幕像素
• 所有绘制通过 px(gx, gy, color) 函数，不使用反锯齿
• Canvas 必须设置 image-rendering: pixelated

Clawd 造型

14×8 扁平宽体。身体/眼睛/锚点坐标完整定义在 template.html 的 CLAWD_BODY 和 EYES 对象里，直接照抄即可。

关键约束：

• 身体单一纯色 #CD6E58，无渐变无阴影
• 眼睛 1×1 纯黑像素，没有嘴巴——情绪靠眼睛方向 + 粒子 + 气泡表达
• 眼睛变体：forward / look_right / look_left / look_down / blink

调色板 / 背景

完整定义在 template.html 的 PALETTE 对象中，始终从 PALETTE 引用颜色，不硬编码 hex。新道具颜色直接添加到 PALETTE。

---

动画质量标准

节奏感

• 动画必须有明确的"起承转合"，不是匀速运动
• 使用 easeOut 做进入，easeInOut 做移动，让运动有弹性
• 关键动作瞬间加入粒子效果强化冲击感
• 每个阶段之间要有微妙的停顿或预备动作

表现力

• Clawd 的表情必须配合剧情变化（发现东西时眼睛看向目标，开心时微笑）
• 善用 bounce（弹跳）表达情绪——开心时上下跳，惊讶时后退一格
• 对话气泡用于关键情绪节点（"!!"表示发现，"Yummy~"表示满足）
• 结尾阶段飘出爱心粒子表达幸福感

循环设计

• 动画首尾必须可以无缝循环
• 每次循环开始时清空粒子 particles = []
• 进入动画从画面外开始，让每次循环的起点自然