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

@@ -0,0 +1,46 @@
+// a little 404 signpost stands by a hole; a mole pops up, looks left and right, shrugs and ducks back down
+const{sin,cos,PI,min,max}=Math,T=2*PI
+export const frames=32,delay=70
+const cl=u=>min(1,max(0,u)),io=u=>(u=cl(u),u<.5?2*u*u:1-2*(1-u)**2),bk=u=>(u=cl(u),1+2.7*(u-1)**3+1.7*(u-1)**2)
+const HX=172,HY=198
+const Q=(c,x,y,s)=>{
+  c.save();c.translate(x,y);c.scale(s,s)
+  for(const[w,st]of[[18,'#111'],[7,'#fff']])c.lineWidth=w,c.strokeStyle=st,c.beginPath(),c.arc(0,-10,10,PI,PI*2.3),c.quadraticCurveTo(0,3,0,8),c.stroke()
+  c.lineWidth=5;c.strokeStyle='#111';c.beginPath();c.arc(0,22,5.5,0,T);c.fill();c.stroke();c.restore()
+}
+export default(c,t)=>{
+  const up=bk((t-.08)/.12)-io((t-.8)/.08),lk=sin(T*cl((t-.24)/.24)),sh=min(1,2.2*sin(PI*cl((t-.52)/.24))),u0=cl((t-.1)/.3),wb=.05*sin(T*2*u0)*(1-u0)
+  c.beginPath();c.roundRect(10,178,236,54,27);c.fill();c.stroke()
+  c.fillStyle='#111';for(const[x,y]of[[32,214],[58,222],[112,218],[228,214]])c.beginPath(),c.arc(x,y,3.5,0,T),c.fill()
+  c.beginPath();c.ellipse(HX,HY,48,13,0,0,T);c.fill();c.fillStyle='#fff'
+  c.lineWidth=6;for(const[x,r]of[[HX-56,13],[HX+57,10]])c.beginPath(),c.arc(x,HY+4,r,PI,0),c.closePath(),c.fill(),c.stroke()
+  c.lineWidth=7
+  c.save();c.translate(72,204);c.rotate(.02+wb);c.translate(-72,-204)
+  c.beginPath();c.roundRect(65,110,14,96,4);c.fill();c.stroke()
+  c.beginPath();c.roundRect(20,62,104,56,10);c.fill();c.stroke()
+  c.lineWidth=9;for(const x of[42,102])c.beginPath(),c.moveTo(x+7,104),c.lineTo(x+7,76),c.lineTo(x-11,96),c.lineTo(x+11,96),c.stroke()
+  c.beginPath();c.ellipse(72,90,8,14,0,0,T);c.stroke()
+  c.restore()
+  const v=cl((t-.08)/.2)
+  if(v>0&&v<1){c.lineWidth=4;for(const[d,h]of[[-1,40],[1,52],[-.5,58],[.6,34]])c.beginPath(),c.arc(HX+d*(26+34*v),HY-4-h*sin(PI*v)+20*v*v,6*(1-v**3),0,T),c.fill(),c.stroke()}
+  if(up>.01){
+    c.save();c.beginPath();c.rect(0,0,256,HY);c.ellipse(HX,HY,48,13,0,0,T);c.clip()
+    c.translate(HX,HY+20+96*(1-up));c.rotate(.08*sh)
+    c.lineWidth=7;c.beginPath();c.roundRect(-32,-106,64,130,32);c.fill();c.stroke()
+    const e=7*lk
+    c.fillStyle='#111';for(const d of[-1,1])c.beginPath(),c.arc(d*12+e,-72,4.5,0,T),c.fill()
+    c.beginPath();c.ellipse(e*1.3,-58,11,8,0,0,T);c.fill()
+    c.fillStyle='#fff';c.beginPath();c.arc(e*1.3-4,-61,2.5,0,T);c.fill()
+    c.lineWidth=3;c.beginPath();c.roundRect(e-6,-50,12,9,2);c.fill();c.stroke();c.beginPath();c.moveTo(e,-50);c.lineTo(e,-41);c.stroke()
+    for(const d of[-1,1])for(const a of[-.15,.15])c.beginPath(),c.moveTo(e*1.3+d*14,-58+a*20),c.lineTo(e*1.3+d*26,-58+a*44),c.stroke()
+    if(sh>.1){c.lineWidth=4;for(const d of[-1,1])c.beginPath(),c.arc(d*12+e,-80-4*sh,6,PI*1.2,PI*1.8),c.stroke()}
+    for(const d of[-1,1]){
+      c.save();c.translate(d*(30+14*sh),-10-38*sh);c.rotate(d*(-.2-.9*sh));c.lineWidth=5
+      c.beginPath();c.ellipse(0,0,14,10,0,0,T);c.fill();c.stroke()
+      c.lineWidth=3;for(const k of[-5,0,5])c.beginPath(),c.moveTo(k,-9),c.lineTo(k,-15),c.stroke()
+      c.restore()
+    }
+    c.restore()
+  }
+  if(sh>.05)Q(c,HX+50,74,sh)
+}

gen/ui/404/magnifier.js

@@ -0,0 +1,37 @@
+// a magnifying glass sweeps back and forth over 404, and when it hovers the 0 it swells up big with a confused little face
+const{sin,PI,max,abs}=Math,T=2*PI
+export const frames=24,delay=70
+const N=(c,g)=>{for(const[w,s]of[[28,'#111'],[14,'#fff']]){
+  c.lineWidth=w;c.strokeStyle=s
+  for(const x of[60,196])c.beginPath(),c.moveTo(x+8,150),c.lineTo(x+8,78),c.lineTo(x-20,126),c.lineTo(x+20,126),c.stroke()
+  c.beginPath();c.ellipse(128,114,22+14*g,36+6*g,0,0,T);c.stroke()
+}}
+const Q=(c,x,y,s,a)=>{
+  c.save();c.translate(x,y);c.rotate(a);c.scale(s,s)
+  for(const[w,st]of[[20,'#111'],[8,'#fff']])c.lineWidth=w,c.strokeStyle=st,c.beginPath(),c.arc(0,-10,11,PI,PI*2.3),c.quadraticCurveTo(0,4,0,9),c.stroke()
+  c.lineWidth=5;c.strokeStyle='#111';c.beginPath();c.arc(0,24,6,0,T);c.fill();c.stroke();c.restore()
+}
+export default(c,t)=>{
+  const s=sin(T*t)**3,lx=128+58*s,ly=112,g=max(0,1-abs(lx-128)/30)**1.5,m=1.6
+  N(c,0)
+  c.lineWidth=7;c.strokeStyle='#111'
+  c.save();c.translate(lx,ly);c.rotate(1.25+.3*s)
+  c.beginPath();c.roundRect(56,-9,20,18,3);c.fill();c.stroke()
+  c.beginPath();c.roundRect(74,-15,52,30,13);c.fill();c.stroke()
+  c.lineWidth=4;for(const u of[90,104])c.beginPath(),c.moveTo(u,-8),c.lineTo(u,8),c.stroke()
+  c.restore()
+  c.save();c.beginPath();c.arc(lx,ly,52,0,T);c.fill();c.clip()
+  c.translate(lx,ly);c.scale(m,m);c.translate(-lx,-ly);N(c,g)
+  if(g>.05){
+    c.translate(128,114);c.scale(1.25*g,1.25*g);c.fillStyle='#111'
+    for(const d of[-1,1])c.beginPath(),c.arc(d*7,-5,3.5,0,T),c.fill()
+    c.lineWidth=2.5;c.strokeStyle='#111'
+    c.beginPath();c.moveTo(-11,-14);c.lineTo(-4,-17);c.moveTo(4,-12);c.lineTo(11,-12);c.stroke()
+    c.beginPath();c.moveTo(-8,9);c.lineTo(-4,6);c.lineTo(0,9);c.lineTo(4,6);c.lineTo(8,9);c.stroke()
+  }
+  c.restore()
+  c.strokeStyle='#111';c.lineWidth=18;c.beginPath();c.arc(lx,ly,52,0,T);c.stroke()
+  c.strokeStyle='#fff';c.lineWidth=6;c.stroke()
+  c.strokeStyle='#ddd';c.lineWidth=7;c.beginPath();c.arc(lx,ly,38,PI*1.1,PI*1.4);c.stroke()
+  if(g>.3)Q(c,lx+52,ly-62,(g-.3)/.7,.2*sin(T*t*2))
+}

gen/ui/404/signpost.js

@@ -0,0 +1,20 @@
+// a signpost whose arrow boards keep swinging round to point every which way, while a question mark bobs on top
+const{sin,cos,PI,min,max}=Math,T=2*PI
+export const frames=24,delay=70
+const bk=u=>(u=min(1,max(0,u)),1+2.7*(u-1)**3+1.7*(u-1)**2)
+const B=[[112,94,0,-.12,[[.02,1],[.5,1]]],[154,82,PI,.1,[[.18,2],[.66,-2]]],[196,90,0,-.05,[[.34,1],[.84,1]]]]
+export default(c,t)=>{
+  const bs=B.map(([y,L,b,tl,S])=>[y,L,b+S.reduce((a,[t0,n])=>a+n*PI*bk((t-t0)/.14),0),tl])
+  const board=([y,L,a,tl])=>{
+    const k=cos(a),P=[[-14,-16],[L-22,-16],[L,0],[L-22,16],[-14,16]]
+    c.lineWidth=7;c.beginPath();for(const[u,v]of P)c.lineTo(128+u*k,y+v+u*k*tl);c.closePath();c.fill();c.stroke()
+    c.lineWidth=4;c.beginPath();c.moveTo(128+16*k,y+16*k*tl);c.lineTo(128+(L-34)*k,y+(L-34)*k*tl);c.stroke()
+  }
+  c.beginPath();c.roundRect(52,214,152,24,12);c.fill();c.stroke()
+  for(const b of bs)if(sin(b[2])<0)board(b)
+  c.lineWidth=7;c.beginPath();c.roundRect(118,86,20,140,6);c.fill();c.stroke()
+  for(const b of bs)if(sin(b[2])>=0)board(b)
+  c.save();c.translate(128,50+5*sin(T*t*2));c.rotate(.18*sin(T*t));c.scale(.88,.88)
+  for(const[w,st]of[[24,'#111'],[11,'#fff']])c.lineWidth=w,c.strokeStyle=st,c.beginPath(),c.arc(0,-12,12,PI,PI*2.3),c.quadraticCurveTo(0,2,0,8),c.stroke()
+  c.lineWidth=6;c.strokeStyle='#111';c.beginPath();c.arc(0,24,7,0,T);c.fill();c.stroke();c.restore()
+}

gen/ui/404/tumbleweed.js

@@ -0,0 +1,32 @@
+// chunky 404 digits stand in the desert like rocks under a hot sun while a tumbleweed bounces across in front, kicking up dust puffs
+const{sin,cos,PI,min}=Math,T=2*PI
+export const frames=18,delay=70
+const X=t=>-46+348*t
+const weed=(c,x,y,r,a,s)=>{
+  c.save();c.translate(x,y+r);c.scale(2-s,s);c.translate(0,-r);c.rotate(a)
+  c.beginPath();for(let k=0;k<36;k++){const b=k*T/36,q=r*(1+.05*sin(b*7));c.lineTo(cos(b)*q,sin(b)*q)}
+  c.closePath();c.fill();c.stroke()
+  c.lineWidth=4;for(const[u,v,R,a]of[[.25,.15,.55,0],[-.3,.1,.5,2.2],[.05,-.3,.5,4],[-.1,.3,.42,1],[.1,0,.72,3.4]])c.beginPath(),c.arc(u*r,v*r,R*r,a,a+3),c.stroke()
+  c.lineWidth=5;for(const b of[.4,2.3,4.1,5.4])c.beginPath(),c.moveTo(cos(b)*r,sin(b)*r),c.lineTo(cos(b+.25)*(r+8),sin(b+.25)*(r+8)),c.stroke()
+  c.restore()
+}
+export default(c,t)=>{
+  c.save();c.translate(210,42)
+  for(let k=0;k<8;k++){const a=k*T/8;for(const[w,s]of[[11,'#111'],[4,'#fff']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(cos(a)*21,sin(a)*21),c.lineTo(cos(a)*27,sin(a)*27),c.stroke()}
+  c.lineWidth=6;c.strokeStyle='#111';c.beginPath();c.arc(0,0,14,0,T);c.fill();c.stroke();c.restore()
+  c.lineWidth=7;c.beginPath();c.roundRect(10,190,236,46,23);c.fill();c.stroke()
+  c.fillStyle='#111';for(const[x,y]of[[30,214],[92,226],[160,222],[228,214]])c.beginPath(),c.arc(x,y,3.5,0,T),c.fill()
+  c.fillStyle='#fff'
+  for(const[x,a,z]of[[50,-.07,0],[128,.03,1],[206,.07,0]]){
+    c.save();c.translate(x,202);c.rotate(a)
+    for(const[w,s]of[[34,'#111'],[20,'#fff']]){c.lineWidth=w;c.strokeStyle=s;c.beginPath();z?c.ellipse(0,-52,22,52,0,0,T):(c.moveTo(12,0),c.lineTo(12,-104),c.lineTo(-24,-36),c.lineTo(24,-36));c.stroke()}
+    c.restore()
+  }
+  c.lineWidth=7;c.strokeStyle='#111'
+  const q=t*3%1,x=X(t),r=30,y=230-r-76*4*q*(1-q),e=min(q,1-q),s=e<.07?.8+.2*e/.07:1
+  const lx=X(Math.floor(t*3)/3),p=q/.5
+  if(p<1){c.lineWidth=5;for(const d of[-1,1])for(const[o,v,R]of[[16,30,12],[30,44,8]])c.beginPath(),c.arc(lx+d*(o+v*p),226-(R+4)*p,R*(1-p)+1,0,T),c.fill(),c.stroke()}
+  for(const[dy,L]of[[-10,24],[8,16]])for(const[w,st]of[[11,'#111'],[4,'#fff']])c.lineWidth=w,c.strokeStyle=st,c.beginPath(),c.moveTo(x-r-14,y+dy),c.lineTo(x-r-14-L,y+dy),c.stroke()
+  c.lineWidth=6;c.strokeStyle='#111'
+  weed(c,x,y,r,x/r,s)
+}