# Clawd Animation Lite

> Clawd 像素风动画生成器（轻量版）。根据用户的自然语言描述，生成1-3秒的简短clawd动画，当用户的需求的互动场景较为具体和单一，请采用轻量版本生成token消耗少、生成速度快的HTML像素风动画文件。主角是 Claude Code 的吉祥物 Clawd（像素风小螃蟹）。当用户提到 clawd、clawd 动画、像素动画、pixel animation、给 clawd 做一个小动画、让小螃蟹做某事、或任何涉及轻量化的为 Clawd 角色创建动画场景的需求时，务必使用此 skill。即使用户只是说"让 clawd 开心一下"或"做个小螃蟹的动画"，也应触发。

- **Type:** Skill
- **Install:** `agentstack add skill-yishu5-claude-skills-clawd-animation-lite`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [YiShu5](https://agentstack.voostack.com/s/yishu5)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [YiShu5](https://github.com/YiShu5)
- **Source:** https://github.com/YiShu5/claude-skills/tree/master/skills/clawd-animation-lite

## Install

```sh
agentstack add skill-yishu5-claude-skills-clawd-animation-lite
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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` 对象中的 `ADD_COLORS_HERE` 位置。

```html

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(pt*Math.PI*2)*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](https://github.com/YiShu5)
- **Source:** [YiShu5/claude-skills](https://github.com/YiShu5/claude-skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-yishu5-claude-skills-clawd-animation-lite
- Seller: https://agentstack.voostack.com/s/yishu5
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.