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/404/ghost.js

@@ -0,0 +1,30 @@
+// a shy little ghost rises out of a hole torn in a page, peeks left and right, then sinks back down
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=24,delay=70
+const PG='#e7f5ff',LN='#a5d8ff',HO='#5f3dc4',HD='#3b2a8a',GH='#fff',GS='#e5dbff',BL='#ffa8a8'
+const HX=128,HY=170,J=[1,.84,.97,.8,1,.88,.78,1,.86,.95,.8,1,.9,.8,.98,.84]
+const hole=(c,s=1)=>{J.forEach((j,k)=>{const a=k/J.length*T;c.lineTo(HX+cos(a)*64*j*s,HY+sin(a)*32*j*s)});c.closePath()}
+const ss=x=>x<=0?0:x>=1?1:x*x*(3-2*x)
+export default(c,t)=>{
+  const u=ss(t/.22)-ss((t-.8)/.2),lk=ss((t-.28)/.1)-2*ss((t-.48)/.1)+ss((t-.68)/.1),gy=HY+70-170*u,ln=-.16*lk
+  c.save();c.translate(128,150);c.rotate(-.05);c.translate(-128,-150)
+  c.fillStyle=PG;c.beginPath();c.moveTo(42,62);c.lineTo(184,62);c.lineTo(214,92);c.lineTo(214,238);c.lineTo(42,238);c.closePath();c.fill();c.stroke()
+  c.fillStyle='#fff';c.beginPath();c.moveTo(184,62);c.lineTo(184,92);c.lineTo(214,92);c.closePath();c.fill();c.lineWidth=5;c.stroke()
+  c.strokeStyle=LN;c.lineWidth=8;for(const[y,a,b]of[[86,62,160],[106,62,190],[126,62,140],[220,70,186]])c.beginPath(),c.moveTo(a,y),c.lineTo(b,y),c.stroke()
+  c.restore()
+  c.fillStyle='#fff';c.beginPath();hole(c,1.12);c.fill();c.lineWidth=4;c.strokeStyle='#111';c.stroke()
+  c.fillStyle=HO;c.beginPath();hole(c);c.fill();c.lineWidth=6;c.stroke()
+  c.fillStyle=HD;c.beginPath();c.ellipse(HX,HY+6,44,18,0,0,T);c.fill()
+  c.save();c.beginPath();c.rect(0,0,256,HY);hole(c);c.clip()
+  c.translate(HX,HY);c.rotate(ln);c.translate(0,gy-HY);c.scale(.92,.84)
+  const body=()=>{c.beginPath();c.moveTo(-40,0);c.arc(0,0,40,PI,0);c.lineTo(44,124);for(let k=0;k<4;k++){const x0=44-k*22,w=4*sin(T*t*2+k*1.6);c.quadraticCurveTo(x0-11,136+w,x0-22,124)}c.closePath()}
+  c.fillStyle=GH;body();c.fill();c.save();c.clip();c.fillStyle=GS;c.beginPath();c.ellipse(-12,30,50,120,0,0,T);c.rect(80,-60,-200,240);c.fill('evenodd');c.restore()
+  body();c.lineWidth=7;c.strokeStyle='#111';c.stroke()
+  for(const d of[-1,1]){c.fillStyle=GH;c.beginPath();c.ellipse(d*44,44-lk*d*8,10,14,d*.5,0,T);c.fill();c.lineWidth=5;c.stroke()}
+  const ex=lk*7
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.ellipse(d*14+ex,-2,5.5,7.5,0,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(d*14+ex-2,-5,2.2,0,T),c.fill()
+  c.fillStyle='#111';c.beginPath();c.ellipse(ex,14,4,5,0,0,T);c.fill()
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(d*26+ex*.6,10,7,4,0,0,T),c.fill()
+  c.restore()
+}

gen/uicolor/404/map.js

@@ -0,0 +1,31 @@
+// a folded paper map unfolded, a dotted trail marching from a bouncing red pin to a big wobbly "?" where the road runs out
+const{sin,PI}=Math,T=2*PI
+export const frames=16,delay=80
+const P1='#fff4e6',P2='#ffe8cc',WA='#a5d8ff',LA='#c3fae8',TR='#69db7c',PN='#fa5252',Q='#b197fc'
+const X=[16,92,166,240],TOP=[60,46,60,46],BOT=[214,228,214,228]
+const map=c=>{c.beginPath();X.forEach((x,k)=>c.lineTo(x,TOP[k]));for(let k=3;k>=0;k--)c.lineTo(X[k],BOT[k]);c.closePath()}
+const pnl=(c,k)=>{c.beginPath();c.moveTo(X[k],TOP[k]);c.lineTo(X[k+1],TOP[k+1]);c.lineTo(X[k+1],BOT[k+1]);c.lineTo(X[k],BOT[k]);c.closePath()}
+export default(c,t)=>{
+  const ph=(t*2)%1,j=4*ph*(1-ph),py=192-30*j,sq=ph<.1?1-(.1-ph)*2:1
+  c.fillStyle=P1;map(c);c.fill();c.fillStyle=P2;pnl(c,1);c.fill()
+  c.save();map(c);c.clip()
+  c.fillStyle=LA;c.beginPath();c.ellipse(204,214,70,40,0,0,T);c.fill();c.beginPath();c.ellipse(30,64,50,34,0,0,T);c.fill()
+  c.fillStyle=WA;c.beginPath();c.ellipse(70,92,34,20,-.2,0,T);c.fill()
+  c.strokeStyle=WA;c.lineWidth=10;c.beginPath();c.moveTo(96,96);c.bezierCurveTo(130,110,110,150,150,160);c.bezierCurveTo(170,166,160,200,190,236);c.stroke()
+  c.fillStyle='rgba(200,110,20,.1)';pnl(c,1);c.fill()
+  c.restore()
+  c.lineWidth=7;c.strokeStyle='#111';map(c);c.stroke()
+  c.lineWidth=4;for(const k of[1,2])c.beginPath(),c.moveTo(X[k],TOP[k]),c.lineTo(X[k],BOT[k]),c.stroke()
+  for(const[x,y]of[[110,68],[126,78],[30,168]]){c.fillStyle=TR;c.lineWidth=4;c.beginPath();c.arc(x,y,9,0,T);c.fill();c.stroke()}
+  c.lineWidth=8;c.setLineDash([.1,14.9]);c.lineDashOffset=-t*30;c.beginPath();c.moveTo(56,196);c.bezierCurveTo(96,206,94,150,128,150);c.bezierCurveTo(156,150,146,198,172,194);c.stroke();c.setLineDash([])
+  c.save();c.translate(182,192);c.rotate(.14*sin(T*t))
+  for(const[w,s]of[[30,'#111'],[17,Q]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(-24,-82),c.bezierCurveTo(-24,-116,24,-116,24,-84),c.bezierCurveTo(24,-60,0,-62,0,-34),c.stroke()
+  c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(-20,-90);c.quadraticCurveTo(-16,-102,-6,-104);c.stroke()
+  c.strokeStyle='#111';c.lineWidth=6;c.fillStyle=Q;c.beginPath();c.arc(0,-6,12,0,T);c.fill();c.stroke()
+  c.restore()
+  c.fillStyle='rgba(0,0,0,.15)';c.beginPath();c.ellipse(56,196,14*(1-j*.4),5*(1-j*.4),0,0,T);c.fill()
+  c.save();c.translate(56,py);c.scale(2-sq,sq)
+  c.fillStyle=PN;c.lineWidth=6;c.beginPath();c.moveTo(0,0);c.bezierCurveTo(-4,-12,-20,-26,-20,-42);c.arc(0,-42,20,PI,0);c.bezierCurveTo(20,-26,4,-12,0,0);c.fill();c.stroke()
+  c.fillStyle='#fff';c.beginPath();c.arc(0,-42,8,0,T);c.fill();c.lineWidth=4;c.stroke()
+  c.restore()
+}

gen/uicolor/404/space.js

@@ -0,0 +1,27 @@
+// "404" adrift in outer space: the 0 is a spinning pink ringed planet with a little smile, the 4s bob gently up and down, stars twinkling all around
+const{sin,cos,PI}=Math,T=2*PI
+export const frames=16,delay=90
+const A='#4dabf7',B='#b197fc',PL='#f783ac',PB='#faa2c1',PD='#e64980',RG='#ffd43b',BL='#ff8787'
+const dig=(c,f,col)=>{for(const[w,s]of[[32,'#111'],[19,col]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),f(),c.stroke();c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.moveTo(-17,-30);c.lineTo(-19,-14);c.stroke();c.lineWidth=7;c.strokeStyle='#111'}
+const four=c=>()=>{c.moveTo(-14,-40);c.lineTo(-20,10);c.lineTo(24,10);c.moveTo(12,-40);c.lineTo(12,40)}
+const spark=(c,x,y,s)=>{c.lineWidth=4;c.fillStyle='#fff';c.beginPath();c.moveTo(x,y-s);for(const[px,py,qx,qy]of[[s,0,s*.2,-s*.2],[0,s,s*.2,s*.2],[-s,0,-s*.2,s*.2],[0,-s,-s*.2,-s*.2]])c.quadraticCurveTo(x+qx,y+qy,x+px,y+py);c.fill();c.stroke()}
+export default(c,t)=>{
+  for(const[x,y,o]of[[26,34,0],[128,24,.5],[226,44,.25],[30,222,.75],[222,224,.4],[128,232,.1]])spark(c,x,y,4+6*(1+sin((t+o)*T))/2)
+  c.lineWidth=7
+  const py=128+Math.round(4*sin(T*t+1)),tl=-.26
+  for(const[x,ph,col]of[[44,0,A],[208,PI,B]]){c.save();c.translate(x,128+Math.round(9*sin(T*t+ph)));dig(c,four(c),col);c.restore()}
+  const ring=(a,b)=>{c.save();c.translate(128,py);c.rotate(tl);for(const[w,s]of[[22,'#111'],[10,RG]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.ellipse(0,0,66,15,0,a,b),c.stroke();c.restore();c.strokeStyle='#111';c.lineWidth=7}
+  ring(PI,T)
+  c.fillStyle=PL;c.beginPath();c.arc(128,py,42,0,T);c.fill()
+  c.save();c.clip();c.translate(128,py);c.rotate(tl)
+  c.fillStyle=PB;c.fillRect(-46,-31,92,10);c.fillRect(-46,20,92,8)
+  for(const[a,y,r]of[[0,-27,5],[2.1,27,5],[4,-26,4],[5.2,24,5],[1,-37,3.5],[3.2,35,3.5]]){const q=a+t*T,x=38*sin(q);if(cos(q)>0){c.fillStyle=PD;c.beginPath();c.ellipse(x,y,r*cos(q),r,0,0,T);c.fill()}}
+  c.restore()
+  c.beginPath();c.arc(128,py,42,0,T);c.stroke()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(128+d*15,py-2,5.5,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(128+d*15-2,py-4,2,0,T),c.fill()
+  c.lineWidth=4;c.beginPath();c.arc(128,py+5,7,.15*PI,.85*PI);c.stroke()
+  c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*26,py+9,6,3.5,0,0,T),c.fill()
+  c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(128,py,33,PI*1.1,PI*1.35);c.stroke();c.strokeStyle='#111'
+  ring(0,PI)
+}

gen/uicolor/404/ufo.js

@@ -0,0 +1,32 @@
+// a little ufo hovers over a colorful "404" and beams the 0 up out of it, the 0 dangling and swaying in the tractor beam before it drops back in its slot
+const{sin,cos,PI,floor}=Math,T=2*PI
+export const frames=16,delay=80
+const C4='#ff6b6b',C0='#ffd43b',C4b='#4dabf7',SA='#b197fc',SD='#9775fa',GL='#d0ebff',AL='#8ce99a',BM='#ffec99',LT=['#ff6b6b','#ffd43b','#69db7c']
+const dig=(c,f,col)=>{for(const[w,s]of[[32,'#111'],[19,col]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),f(),c.stroke();c.lineWidth=7;c.strokeStyle='#111'}
+const four=(c,x,y)=>()=>{c.moveTo(x-14,y-34);c.lineTo(x-20,y+8);c.lineTo(x+24,y+8);c.moveTo(x+12,y-34);c.lineTo(x+12,y+34)}
+export default(c,t,i)=>{
+  const h=(1-cos(T*t))/2,e=h*h*(3-2*h),uy=Math.round(2*sin(T*t)),oy=184-58*e,ox=128+6*sin(2*T*t+1)*e,sw=.2*sin(2*T*t)*e
+  c.fillStyle=BM;c.beginPath();c.moveTo(106,72);c.lineTo(150,72);c.lineTo(186,226);c.ellipse(128,226,58,12,0,0,PI);c.closePath();c.fill()
+  c.save();c.clip();c.strokeStyle='#fff';c.lineWidth=6
+  for(let k=0;k<3;k++){const q=(t*2+k/3)%1,y=226-q*150,w=22+(y-74)/152*36;c.beginPath();c.ellipse(128,y,w,7,0,0,PI);c.stroke()}
+  c.restore();c.lineWidth=5;c.beginPath();c.moveTo(106,72);c.lineTo(150,72);c.lineTo(186,226);c.ellipse(128,226,58,12,0,0,PI);c.closePath();c.stroke()
+  c.lineWidth=5;c.setLineDash([9,11]);c.beginPath();c.ellipse(128,184,23,34,0,0,T);c.stroke();c.setLineDash([])
+  dig(c,four(c,44,184),C4);dig(c,four(c,198,184),C4b)
+  c.save();c.translate(ox,oy);c.rotate(sw);dig(c,()=>c.ellipse(0,0,23,34,0,0,T),C0)
+  c.strokeStyle='#fff';c.lineWidth=6;c.beginPath();c.ellipse(0,0,23,34,0,PI*1.12,PI*1.38);c.stroke();c.restore()
+  c.strokeStyle='#fff';c.lineWidth=6;for(const x of[30,184])c.beginPath(),c.moveTo(x,160),c.lineTo(x-2,170),c.stroke()
+  c.strokeStyle='#111';c.lineWidth=7
+  c.save();c.translate(128,uy)
+  c.fillStyle=GL;c.beginPath();c.arc(0,50,35,PI,0);c.closePath();c.fill()
+  c.fillStyle=AL;c.beginPath();c.arc(0,34,15,0,T);c.fill();c.lineWidth=4;c.stroke()
+  c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.ellipse(d*6,33,4,5.5,d*.3,0,T),c.fill()
+  c.fillStyle='#fff';for(const d of[-1,1])c.beginPath(),c.arc(d*6-1.5,31,1.6,0,T),c.fill()
+  c.strokeStyle='#fff';c.lineWidth=5;c.beginPath();c.arc(0,50,26,PI*1.12,PI*1.35);c.stroke();c.strokeStyle='#111'
+  c.lineWidth=7;c.beginPath();c.arc(0,50,35,PI,0);c.stroke()
+  c.fillStyle=BM;c.beginPath();c.ellipse(0,75,24,8,0,0,T);c.fill();c.lineWidth=5;c.stroke();c.lineWidth=7
+  c.fillStyle=SA;c.beginPath();c.ellipse(0,61,74,17,0,0,T);c.fill();c.stroke()
+  c.fillStyle=SD;c.beginPath();c.ellipse(0,59,72,7,0,0,PI);c.lineTo(-72,64);c.ellipse(0,64,72,12,0,PI,0,true);c.closePath();c.fill()
+  c.beginPath();c.ellipse(0,61,74,17,0,0,T);c.stroke()
+  c.lineWidth=4;for(let k=0;k<5;k++){const x=(k-2)*26,y=64+(k==0||k==4?-4:k==2?3:1);c.fillStyle=(k+floor(t*8))%2?'#fff':LT[k%3];c.beginPath();c.arc(x,y,6,0,T);c.fill();c.stroke()}
+  c.restore()
+}