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 ═══ 之间的区域，以及 <title>、info 文字和 P 对象中的 ADD_COLORS_HERE 位置。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE</title>
<style>
  *{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}
</style>
</head>
<body>
<canvas id="c" width="720" height="720"></canvas>
<div class="info" id="info"></div>
<script>
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;y<GH;y+=2)for(let x=1;x<GW;x+=2){
    ctx.fillStyle=P.dot;ctx.beginPath();ctx.arc(x*PX+10,y*PX+10,2,0,6.28);ctx.fill();
  }
}
function drawStars(f){
  ctx.textAlign='center';ctx.textBaseline='middle';
  for(const[x,y,t]of STARS){
    const tw=Math.sin(f*.08+x*.5+y*.3);
    ctx.fillStyle=t===0?(tw>0?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<8;r++)for(let c=0;c<14;c++)if(BODY[r][c])px(ox+c,oy+r,P.body);
  const e=EYES[eyes];
  if(e){px(ox+EL.x+e.dl,oy+EL.y+e.dy,P.eye);px(ox+ER.x+e.dr,oy+ER.y+e.dy,P.eye)}
}
function drawBlush(ox,oy,a){ctx.globalAlpha=a;px(ox+3,oy+2,P.blush);px(ox+10,oy+2,P.blush);ctx.globalAlpha=1}
function drawSweat(ox,oy){px(ox+13,oy,P.sl);px(ox+13,oy+1,P.sl)}
function drawExclaim(ox,oy){px(ox+7,oy-3,P.sd);px(ox+7,oy-2,P.sd);px(ox+7,oy,P.sd)}
function drawQuestion(ox,oy){px(ox+6,oy-3,P.sm);px(ox+7,oy-3,P.sm);px(ox+8,oy-3,P.sm);px(ox+8,oy-2,P.sm);px(ox+7,oy-1,P.sm)}
function drawZzz(ox,oy,t){
  ctx.globalAlpha=Math.sin(t*3)*.5+.5;ctx.fillStyle=P.sm;ctx.font='bold 14px Courier New';ctx.textAlign='left';
  ctx.fillText('z',(ox+14)*PX,(oy-1)*PX);ctx.fillText('Z',(ox+15)*PX,(oy-3)*PX);ctx.globalAlpha=1;
}
function drawSparkle(ox,oy){px(ox+3,oy+1,P.w);px(ox+5,oy+1,P.w);px(ox+8,oy+1,P.w);px(ox+10,oy+1,P.w)}
function drawClawdWave(ox,oy,eyes,side='right'){
  drawClawd(ox,oy,eyes);
  if(side==='right'){px(ox+13,oy+1,P.body);px(ox+14,oy,P.body)}
  else{px(ox+0,oy+1,P.body);px(ox-1,oy,P.body)}
}
function drawHeart(hx,hy,c){for(let r=0;r<3;r++)for(let i=0;i<3;i++)if(HEART[r][i])px(hx+i,hy+r,c)}
function drawBubble(bx,by,text){
  const tw=text.length+2;
  for(let y=0;y<3;y++)for(let x=0;x<tw;x++){
    if((y===0||y===2)&&(x===0||x===tw-1))continue;
    px(bx+x,by+y,(y===0||y===2||x===0||x===tw-1)?P.sm:P.w);
  }
  px(bx+1,by+3,P.sm);ctx.fillStyle=P.sd;ctx.font='bold 12px Courier New';ctx.textAlign='left';ctx.textBaseline='top';
  ctx.fillText(text,(bx+1)*PX+3,by*PX+7);
}

let particles=[];
function addP(x,y,c){particles.push({x,y,vx:(Math.random()-.5)*.8,vy:-Math.random()*.8-.3,life:1,c})}
function tickP(){
  for(let i=particles.length-1;i>=0;i--){
    const p=particles[i];p.x+=p.vx;p.y+=p.vy;p.vy+=.04;p.life-=.025;
    if(p.life<=0){particles.splice(i,1);continue}
    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<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2}
function lerp(a,b,t){return a+(b-a)*t}

// ═══ YOUR ANIMATION HERE ════════════════════════════
const FPS=30, DUR=2, TOTAL=FPS*DUR;

function getPhase(t){
  if(t<0.5) return {ph:'enter',pt:t/0.5};
  return {ph:'happy',pt:(t-0.5)/0.5};
}

function render(f){
  const t=f/TOTAL, {ph,pt}=getPhase(t);
  drawBg(); drawStars(f);
  // animation logic here
  drawClawd(11,14);
  tickP();
}
// ═══ LOOP (do not modify) ═══════════════════════════
let st=null;
function loop(ts){
  if(!st)st=ts;const el=(ts-st)/1000,lt=el%DUR,f=Math.floor(lt*FPS);
  if(lt<.05)particles=[];render(f);
  document.getElementById('info').textContent=`TITLE — ${lt.toFixed(1)}s/${DUR}s`;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>