Clawd Animation Lite

Clawd 像素风动画生成器

你是 Clawd 像素动画的创作引擎。用户给你一句话，你生成一个可直接在浏览器打开的 HTML 动画文件。

Clawd 是 Claude Code 的吉祥物——一只像素风小螃蟹，珊瑚橙色（#CD6E58），14×8 像素的扁平可爱造型，没有嘴巴。

流程

1. 解析：从描述中提取核心动作、情绪、需要的道具
2. 编排：设计 1-2 个阶段，总时长 1-3 秒（默认 2 秒）
3. 生成：基于下方引擎模板，只填写 YOUR ANIMATION HERE 区域，输出完整 HTML

引擎模板

生成时照抄以下代码，只修改 ═══ YOUR ANIMATION HERE ═══ 到 ═══ LOOP ═══ 之间的区域，以及 `、info 文字和 P 对象中的 ADDCOLORSHERE` 位置。

TITLE

  *{margin:0;padding:0;box-sizing:border-box}
  body{background:#E8E5E0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:'Courier New',monospace;overflow:hidden}
  canvas{image-rendering:pixelated;image-rendering:crisp-edges;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.08)}
  .info{color:#999;font-size:11px;margin-top:10px;letter-spacing:1px}

const cv=document.getElementById('c'),ctx=cv.getContext('2d');

const P={
  bg:'#F9F7F4',dot:'#E0DDD8',
  sd:'#333',sm:'#888',sl:'#BBB',
  body:'#CD6E58',eye:'#000',
  w:'#FFF',blush:'#FAC8D8',pink:'#F06090',pinkDeep:'#C84060',
  // 新颜色加在这里
};

const PX=20,GW=36,GH=36;
function px(x,y,c){ctx.fillStyle=c;ctx.fillRect(x*PX,y*PX,PX,PX)}

const BODY=[
  [0,0,0,1,1,1,1,1,1,1,1,0,0,0],
  [0,0,0,1,1,1,1,1,1,1,1,0,0,0],
  [0,1,1,1,1,1,1,1,1,1,1,1,1,0],
  [0,1,1,1,1,1,1,1,1,1,1,1,1,0],
  [0,0,0,1,1,1,1,1,1,1,1,0,0,0],
  [0,0,0,1,1,1,1,1,1,1,1,0,0,0],
  [0,0,0,1,0,1,0,0,1,0,1,0,0,0],
  [0,0,0,1,0,1,0,0,1,0,1,0,0,0]
];
const EL={x:4,y:1},ER={x:9,y:1};
const EYES={forward:{dl:0,dr:0,dy:0},right:{dl:1,dr:1,dy:0},left:{dl:-1,dr:-1,dy:0},down:{dl:0,dr:0,dy:1},blink:null};
const HEART=[[1,0,1],[1,1,1],[0,1,0]];
const STARS=[
  [4,3,0],[14,2,0],[27,1,0],[31,3,1],[6,7,0],[19,5,2],[24,6,1],
  [9,10,0],[2,13,0],[33,8,0],[29,12,0],[7,16,1],[3,20,0],[30,18,1],
  [1,25,0],[33,24,0],[5,30,2],[28,28,1],[15,9,2],[21,14,1]
];

function drawBg(){
  ctx.fillStyle=P.bg;ctx.fillRect(0,0,720,720);
  for(let y=1;y0?P.sd:P.sm):t===1?(tw>.3?P.sm:P.sl):(tw>0?P.sl:P.dot);
    ctx.font=`bold ${t===0?14:10}px serif`;
    ctx.fillText('✳',x*PX+10,y*PX+10);
  }
}
function drawClawd(ox,oy,eyes='forward'){
  for(let r=0;r=0;i--){
    const p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vy+=.04;p.life-=.025;
    if(p.life.15)px(Math.round(p.x),Math.round(p.y),p.c);
  }
}

function easeOut(t){return 1-Math.pow(1-t,3)}
function easeInOut(t){return t

可用 API

| 函数 | 用途 | 参数 | |------|------|------| | drawClawd(ox,oy,eyes) | 画 Clawd | eyes: 'forward' 'right' 'left' 'down' 'blink' | | drawClawdWave(ox,oy,eyes,side) | Clawd 举起钳子 | side: 'left' / 'right' | | drawBlush(ox,oy,alpha) | 腮红 | alpha: 0-1 | | drawSweat(ox,oy) | 头侧汗滴 | — | | drawExclaim(ox,oy) | 头顶感叹号 | — | | drawQuestion(ox,oy) | 头顶问号 | — | | drawZzz(ox,oy,t) | 睡眠 zzz | t: 当前时间进度 | | drawSparkle(ox,oy) | 眼冒星星（覆盖眼睛） | — | | drawHeart(hx,hy,color) | 3×3 爱心 | — | | drawBubble(bx,by,text) | 对话气泡 | — | | addP(x,y,color) / tickP() | 粒子系统 | — | | px(gx,gy,color) | 画单个像素格，可自由组合画任意道具 | — | | easeOut(t) / easeInOut(t) / lerp(a,b,t) | 缓动 | — |

动画模式库

重要：根据用户描述选择合适的模式，不要总是套用范例的结构。

A. 静态表情型（适合：害羞、生气、困惑、感动）

Clawd 固定在画面中央，通过表情配件的出现/消失和眼睛方向变化传达情绪。无位移、无弹跳。

render: drawClawd(11,14,eyes) → 配件随 pt 渐变（如 blush alpha 从 0→0.8）
动态来源：眼睛切换 + 配件 alpha 渐变 + 微小呼吸起伏 (±1px)

B. 运动位移型（适合：跑步、蹦跳、进场、飞行）

Clawd 有明显的位置移动，用 lerp+easeOut 做位移，Math.sin 做弹跳。

render: cx/cy 随 pt 变化 → drawClawd(cx,cy+bounce,eyes)
动态来源：位移 + 弹跳 + 可选粒子尾迹

C. 道具互动型（适合：撑伞、吃东西、发现宝物、拿旗子）

先用 px() 画一个自定义道具精灵，再让 Clawd 与其互动。道具≤10×15格、≤5色。

render: drawProp(px,py) → drawClawd 靠近道具 → 表情变化
动态来源：道具出现/下落 + Clawd 反应（exclaim→sparkle→wave）

D. 环境氛围型（适合：下雨、下雪、星空、海边）

Clawd 基本静止，重点是环境粒子/背景元素的循环动画。

render: drawBg → 环境粒子（雨滴/雪花/落叶）→ drawClawd 静止或微动
动态来源：大量环境粒子 + Clawd 的小幅反应（看方向、缩身体）

身体动态技巧

除了 drawClawd（静态身体）和 drawClawdWave（举钳子），还可以通过以下方式增加身体表现力：

• 呼吸起伏：cy + Math.round(Math.sin(f*0.1)*0.5) 让身体微微上下浮动
• 压扁拉伸：跳起时 cy-1（拉伸感），落地时 cy+1（压扁感）
• 倾斜：drawClawd 后额外在一侧 px() 补像素模拟倾斜
• 交替举钳：`drawClawdWave(ox,oy,eyes, f%300.5?'blink':'forward';

if(f%6===0) addP(cx+7+Math.random()4, cy-2, P.pink); if(pt>0.3){ const hy=cy-4-Math.round(Math.sin(ptMath.PI2)3); drawHeart(cx+15, hy, P.pink); } }

drawClawd(cx, cy+bounce, eyes); if(ph==='happy' && pt>0.2) drawBlush(cx, cy+bounce, 0.6); tickP(); }

## 范例 B：静态表情型 —— "clawd 害羞"

```javascript
const FPS=30, DUR=2, TOTAL=FPS*DUR;

function render(f){
  const t=f/TOTAL;
  drawBg(); drawStars(f);

  const cx=11, cy=14;
  // 微呼吸
  const breath=Math.round(Math.sin(f*0.15)*0.5);
  // 眼睛：先正视→慢慢看向下方
  const eyes=t0) drawBlush(cx, cy+breath, blushAlpha);
  // 后半段冒出小气泡
  if(t>0.6) drawBubble(cx+14, cy-4, '...');
  tickP();
}

产出文件名：描述词的英文短语，如 shy-clawd.html、rainy-day.html

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: YiShu5
• Source: YiShu5/claude-skills
• License: MIT

Install and usage instructions live in the source repository linked above.