Add 150 UI and page state stickers in three pending sections

404s, loaders, success, errors, empty states, confirmation, under
construction, offline and more: 50 monochrome (ui), 50 colored (uicolor)
and 50 with an anime girl (uianime), on /test until approved.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

gen/uicolor/error/cloud.js

@@ -0,0 +1,27 @@
+// grumpy gray storm cloud with an anger mark, blue rain pouring down and a yellow lightning bolt cracking out as it shudders
+const{sin,cos,PI,min}=Math,T=2*PI
+export const frames=16,delay=80
+const CL='#ced4da',CD='#adb5bd',RN='#4dabf7',BT='#ffd43b',AN='#ff6b6b'
+const PF=[[-64,8,34],[-30,-18,42],[18,-30,46],[60,-4,38],[-20,16,40],[28,14,40]]
+export default(c,t,i)=>{
+  const z=i==5||i==6||i==12,sh=z?(i%2?4:-4):0,y=98+3*sin(t*T)
+  for(let k=0;k<7;k++){
+    const p=(t*2+k*.43)%1,x=56+k*24+(k%2)*4,yy=y+30+p*112,s=min(1,(1-p)*5)
+    if(s<=0)continue
+    c.save();c.translate(x-p*8,yy);c.rotate(.1);c.scale(s,s);c.fillStyle=RN;c.lineWidth=4;c.beginPath();c.moveTo(0,-14);c.quadraticCurveTo(10,3,0,8);c.quadraticCurveTo(-10,3,0,-14);c.fill();c.stroke();c.restore()
+  }
+  if(z){
+    c.fillStyle=BT;c.lineWidth=5;c.beginPath();for(const[x,yy]of[[134,120],[108,180],[128,180],[108,240],[160,166],[138,166],[156,120]])c.lineTo(x+sh,yy);c.closePath();c.fill();c.stroke()
+    for(const[a,r]of[[-2.6,0],[-.5,1],[2.2,2]]){const x=118+cos(a)*40+sh,yy=206+sin(a)*24;for(const[w,s]of[[10,'#111'],[4,BT]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(x,yy),c.lineTo(x+cos(a)*14,yy+sin(a)*10),c.stroke()}
+    c.strokeStyle='#111'
+  }
+  c.translate(128+sh,y)
+  c.lineWidth=14;for(const[a,d,r]of PF)c.beginPath(),c.arc(a,d,r,0,T),c.stroke()
+  c.fillStyle=CL;for(const[a,d,r]of PF)c.beginPath(),c.arc(a,d,r,0,T),c.fill()
+  c.save();c.beginPath();for(const[a,d,r]of PF)c.moveTo(a+r,d),c.arc(a,d,r,0,T);c.clip();c.fillStyle=CD;c.beginPath();c.ellipse(0,64,120,34,0,0,T);c.fill();c.restore()
+  c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.arc(18,-30,36,PI*1.15,PI*1.45);c.stroke();c.strokeStyle='#111'
+  c.lineWidth=6;for(const d of[-1,1])c.beginPath(),c.moveTo(d*36,-14),c.lineTo(d*14,-4),c.stroke()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*24,6,z?4:6,0,T),c.fill()
+  c.lineWidth=5;c.beginPath();c.arc(0,34,12,PI*1.15,PI*1.85);c.stroke()
+  c.save();c.translate(58,-34);c.rotate(.2*sin(2*T*t));for(const[w,s]of[[11,'#111'],[5,AN]]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();for(const r of[0,1,2,3]){const a=r*PI/2+PI/4;c.moveTo(cos(a)*7+cos(a+PI/4)*10,sin(a)*7+sin(a+PI/4)*10);c.quadraticCurveTo(cos(a)*7,sin(a)*7,cos(a)*7+cos(a-PI/4)*10,sin(a)*7+sin(a-PI/4)*10)}c.stroke()}c.restore()
+}

gen/uicolor/error/cookie.js

@@ -0,0 +1,38 @@
+// sad chocolate chip cookie trembles, a crack zigzags down it, it splits in two crying while crumbs tumble off, then it pulls itself back together
+const{sin,cos,PI,min,max}=Math,T=2*PI
+export const frames=24,delay=80
+const CK='#e0a96d',CKD='#c98c4f',CH='#5c3d2e',BL='#ffa8a8',TR='#74c0fc'
+const C=[[0,-76],[-9,-56],[8,-36],[-7,-14],[9,10],[-7,34],[8,56],[0,76]]
+const CH0=[[-42,-34],[30,-46],[50,6],[-52,18],[-24,50],[26,50],[-8,-60],[40,-22]]
+const io=u=>u*u*(3-2*u),cl=u=>min(1,max(0,u))
+const body=c=>{c.beginPath();for(let a=0;a<=T+.01;a+=.12){const r=76+3*sin(a*7);c.lineTo(cos(a)*r,sin(a)*r)}c.closePath()}
+const crack=c=>{c.beginPath();for(const[x,y]of C)c.lineTo(x,y)}
+export default(c,t,i)=>{
+  const tr=t>.04&&t<.32?(i%2?2:-2):0,cp=t<.3?cl((t-.1)/.2):cl(1-(t-.9)/.1),sp=t<.32?0:t<.46?1-(1-(t-.32)/.14)**3:t<.78?1:t<.9?1-io((t-.78)/.12):0
+  for(const d of[-1,1]){
+    c.save();c.translate(128+tr+d*14*sp,126+5*sp);c.translate(0,84);c.rotate(d*.2*sp);c.translate(0,-84)
+    if(sp>0){c.beginPath();for(const[x,y]of[[0,-110],...C,[0,110],[d*200,110],[d*200,-110]])c.lineTo(x,y);c.clip()}
+    else if(d>0){c.restore();continue}
+    body(c);c.fillStyle=CK;c.fill()
+    c.save();body(c);c.clip();c.fillStyle=CKD;c.beginPath();c.arc(0,0,82,0,T);c.arc(-10,-12,78,0,T,true);c.fill();c.restore()
+    c.lineWidth=7;body(c);c.stroke()
+    c.fillStyle=CH;for(const[x,y]of CH0)c.beginPath(),c.ellipse(x,y,7,6,x,0,T),c.fill()
+    c.lineWidth=4.5;for(const e of[-1,1])c.beginPath(),c.moveTo(e*38,-20),c.lineTo(e*17,-27),c.stroke()
+    c.fillStyle='#111';for(const e of[-1,1])c.beginPath(),c.arc(e*26,-6,6,0,T),c.fill()
+    c.fillStyle='#fff';for(const e of[-1,1])c.beginPath(),c.arc(e*26-2,-8,2.2,0,T),c.fill()
+    c.lineWidth=5;c.beginPath();c.arc(0,36,13,PI*1.2,PI*1.8);c.stroke()
+    c.fillStyle=BL;for(const e of[-1,1])c.beginPath(),c.ellipse(e*44,12,8,4.5,0,0,T),c.fill()
+    if(sp>.5)for(const o of[0,.5]){const p=(t*4+o)%1,yy=2+p*36;c.fillStyle=TR;c.lineWidth=3;c.beginPath();c.moveTo(d*30,yy-8);c.quadraticCurveTo(d*30+6,yy+3,d*30,yy+5);c.quadraticCurveTo(d*30-6,yy+3,d*30,yy-8);c.fill();c.stroke()}
+    if(sp>0){c.lineWidth=6;crack(c);c.stroke()}
+    c.restore()
+  }
+  if(sp==0&&cp>0){
+    const L=C.reduce((s,[x,y],k)=>k?s+Math.hypot(x-C[k-1][0],y-C[k-1][1]):0,0)
+    c.save();c.translate(128+tr,126);c.lineWidth=6;c.setLineDash([L*cp,999]);c.lineDashOffset=t<.5?0:-L*(1-cp);crack(c);c.stroke();c.restore()
+  }
+  const u=(t-.33)/.5
+  if(u>0&&u<1)for(let k=1;k<7;k++){
+    const[cx,cy]=C[k],d=k%2?1:-1,x=128+cx+d*(18+k*7)*u*1.4,y=126+cy-(34+k*5%17)*u*1.2+280*u*u,r=(4+k%3*1.5)*min(1,(1-u)*5)
+    if(y<230&&r>.5){c.fillStyle=k%2?CK:CKD;c.lineWidth=3;c.beginPath();c.moveTo(x-r,y);c.lineTo(x-r*.3,y-r);c.lineTo(x+r,y-r*.4);c.lineTo(x+r*.6,y+r);c.closePath();c.fill();c.stroke()}
+  }
+}

gen/uicolor/error/glitch.js

@@ -0,0 +1,36 @@
+// computer monitor glitching out, RGB bars tearing across it and slices jumping sideways, spiral dizzy eyes and little stars circling overhead
+const{sin,cos,PI,abs}=Math,T=2*PI
+export const frames=16,delay=80
+const CS='#b197fc',SC='#e7f5ff',G=['#ff6b6b','#51cf66','#4dabf7','#ffd43b','#f783ac','#3bc9db'],BL='#ffa8a8',GS='0011010000111010'
+const R=n=>abs(sin(n*127.1+311.7)*43758.5)%1
+const star=(c,x,y,s)=>{c.fillStyle='#ffd43b';c.lineWidth=4;c.beginPath();for(let k=0;k<10;k++){const r=k%2?s*.45:s,a=k*PI/5-PI/2;c.lineTo(x+cos(a)*r,y+sin(a)*r)}c.closePath();c.fill();c.stroke()}
+const face=(c,t,col,o)=>{
+  c.strokeStyle=col;c.lineWidth=5
+  for(const d of[-1,1]){c.beginPath();for(let a=0;a<4.4*PI;a+=.3){const r=1+a*1.15,b=(a+t*T*2)*d;c.lineTo(128+d*32+o+cos(b)*r,118+sin(b)*r)}c.stroke()}
+  c.beginPath();for(let x=-22;x<=22;x+=2)c.lineTo(128+x+o,154+4*sin(x/6+t*T*2));c.stroke()
+}
+const M=(c,t,i,g)=>{
+  c.strokeStyle='#111';c.lineWidth=7
+  c.fillStyle='#868e96';c.beginPath();c.roundRect(110,194,36,26,4);c.fill();c.stroke()
+  c.fillStyle=CS;c.beginPath();c.roundRect(70,214,116,22,11);c.fill();c.stroke()
+  c.beginPath();c.roundRect(22,52,212,148,24);c.fill();c.stroke()
+  c.fillStyle=g?'#ff6b6b':'#51cf66';c.lineWidth=4;c.beginPath();c.arc(210,190,4.5,0,T);c.fill();c.stroke()
+  c.save();c.beginPath();c.roundRect(40,70,176,112,12);c.clip()
+  c.fillStyle=SC;c.fillRect(0,60,256,130)
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*58,140,9,5,0,0,T),c.fill()
+  if(g)face(c,t,'#ff6b6b',-5),face(c,t,'#4dabf7',5)
+  face(c,t,'#111',0)
+  if(g)for(let n=0;n<5;n++)c.fillStyle=G[(i+n)%6],c.fillRect(40+R(i+n*13)*90,72+R(i*9+n)*104,30+R(i*7+n)*110,4+R(i*3+n*7)*10)
+  c.restore()
+  c.strokeStyle='#111';c.lineWidth=5;c.beginPath();c.roundRect(40,70,176,112,12);c.stroke()
+  c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.moveTo(54,96);c.lineTo(54,84);c.lineTo(66,84);c.stroke()
+}
+export default(c,t,i)=>{
+  const g=GS[i]>0
+  const st=b=>{for(let k=0;k<3;k++){const a=t*T+k*T/3,z=sin(a);if(z<0==b)star(c,128+cos(a)*76,30+z*10,14+3*z)}}
+  st(1)
+  if(!g)M(c,t,i,0)
+  else{const Y=[0,64,92,118,140,166,196,256];for(let k=0;k<7;k++){const dx=R(i*5+k)>.45?(R(i*11+k)-.5)*40:0;c.save();c.beginPath();c.rect(0,Y[k],256,Y[k+1]-Y[k]);c.clip();c.translate(dx,0);M(c,t,i,1);c.restore()}}
+  c.strokeStyle='#111'
+  st(0)
+}