mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 03:34:51 +00:00
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>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,44 @@
|
||||
// orange-haired girl bawling over her laptop as a big red X error flashes on the screen, tears gushing into puddles
|
||||
const{sin,cos,PI,max,abs}=Math,T=2*PI
|
||||
export const frames=8,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#ffa94d',HD='#e8590c',HL='#fff4e6',HO='#b197fc',HOD='#7950f2',BL='#ffa8a8',MO='#c92a2a',TG='#ff8fab',WA='#74c0fc',LT='#dee2e6',LD='#adb5bd',RD='#fa5252',CL='#ff6b6b',Z=.8
|
||||
export default(c,t,i)=>{
|
||||
const b=i%2*2,w=sin(2*T*t),L=v=>c.lineWidth=v/Z,fl=i%4<2
|
||||
const head=f=>{c.save();c.translate(128,96+b);c.scale(Z,Z);c.translate(-128,-128);f();c.restore()}
|
||||
head(()=>{
|
||||
L(6);c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,100,204,160);c.quadraticCurveTo(196,180,176,176);c.lineTo(80,176);c.quadraticCurveTo(60,180,52,160);c.bezierCurveTo(44,100,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(58,196,48,262);c.lineTo(208,262);c.quadraticCurveTo(198,196,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=HOD;for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*8,196),c.quadraticCurveTo(128+d*34,190,128+d*46,206),c.quadraticCurveTo(128+d*30,218,128+d*8,210),c.closePath(),c.fill(),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,166);c.lineTo(116,194);c.lineTo(128,204);c.lineTo(140,194);c.lineTo(140,166);c.fill();L(5);c.beginPath();c.moveTo(116,166);c.lineTo(116,192);c.moveTo(140,166);c.lineTo(140,192);c.stroke()
|
||||
L(6);c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
L(6.5);for(const d of[-1,1]){const x=128+d*25;c.beginPath();c.moveTo(x-d*14,128);c.lineTo(x+d*9,140);c.lineTo(x-d*14,152);c.stroke()}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,11,5.5,0,0,T),c.fill()
|
||||
c.save();c.translate(128,170);c.scale(1.2,1.2);c.translate(-128,-170);c.fillStyle=MO;L(3.5);c.beginPath();c.moveTo(114,170+w);c.quadraticCurveTo(118,164-w,121,168+w);c.quadraticCurveTo(124.5,164+w,128,168-w);c.quadraticCurveTo(131.5,164+w,135,168+w);c.quadraticCurveTo(138,164-w,142,170+w);c.quadraticCurveTo(140,184,128,184);c.quadraticCurveTo(116,184,114,170+w);c.fill();c.stroke()
|
||||
c.save();c.clip();c.fillStyle=TG;c.beginPath();c.ellipse(128,184,8,5,0,0,T);c.fill();c.restore();c.restore()
|
||||
L(6);c.fillStyle=HAIR;c.beginPath();c.moveTo(66,160)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,160);c.quadraticCurveTo(182,130,180,108)
|
||||
c.quadraticCurveTo(172,104,166,112);c.quadraticCurveTo(160,98,150,94);c.quadraticCurveTo(144,104,136,108)
|
||||
c.quadraticCurveTo(130,96,120,92);c.quadraticCurveTo(114,104,104,108);c.quadraticCurveTo(98,98,88,100);c.quadraticCurveTo(84,108,78,112)
|
||||
c.quadraticCurveTo(74,134,66,160);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;L(5);for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';L(5);c.beginPath();c.moveTo(88,118);c.lineTo(114,110);c.moveTo(168,118);c.lineTo(142,110);c.stroke()
|
||||
c.fillStyle=CL;L(4);c.save();c.translate(170,72);c.rotate(.6);c.beginPath();c.roundRect(-13,-5,26,10,5);c.fill();c.stroke();c.restore()
|
||||
})
|
||||
c.fillStyle=WA;c.lineWidth=5;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*96,240,26,9,0,0,T),c.fill(),c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=LD;c.beginPath();c.moveTo(48,236);c.lineTo(208,236);c.lineTo(216,250);c.lineTo(40,250);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=LT;c.beginPath();c.roundRect(60,146,136,94,10);c.fill();c.stroke()
|
||||
c.fillStyle=fl?'#fff5f5':'#fff';c.beginPath();c.roundRect(72,156,112,72,4);c.fill();c.lineWidth=4;c.stroke()
|
||||
const s=fl?1.08:1;c.save();c.translate(128,192);c.scale(s,s)
|
||||
for(const[l,k]of[[22,'#111'],[12,RD]])c.lineWidth=l,c.strokeStyle=k,c.beginPath(),c.moveTo(-22,-22),c.lineTo(22,22),c.moveTo(22,-22),c.lineTo(-22,22),c.stroke()
|
||||
c.restore();c.strokeStyle='#111'
|
||||
for(const d of[-1,1]){c.fillStyle=SKIN;c.lineWidth=5;c.beginPath();c.ellipse(128+d*66,150,11,14,d*.3,0,T);c.fill();c.stroke()}
|
||||
head(()=>{
|
||||
for(const d of[-1,1]){
|
||||
const arc=()=>{c.beginPath();c.moveTo(128+d*40,146);c.bezierCurveTo(128+d*90,104,128+d*128,150,128+d*120,240)}
|
||||
for(const[lw,s]of[[17,'#111'],[9,WA]])L(lw*Z),c.strokeStyle=s,arc(),c.stroke()
|
||||
c.strokeStyle='#fff';L(3*Z);c.setLineDash([8,16]);c.lineDashOffset=-t*48;arc();c.stroke();c.setLineDash([])
|
||||
}
|
||||
})
|
||||
c.strokeStyle='#111';c.fillStyle=WA;c.lineWidth=3.5
|
||||
for(const d of[-1,1])for(const o of[0,.33,.66]){const p=(t*2+o)%1,x=128+d*(96+(o>.5?-1:1)*22*p),y=234-34*p+40*p*p;c.beginPath();c.arc(x,y,5*(1-p*.5),0,T);c.fill();c.stroke()}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
// blue-haired girl in glasses and a lab coat coughing into her fist as gray smoke billows out of her crashed computer
|
||||
const{sin,cos,PI,max,min}=Math,T=2*PI
|
||||
export const frames=12,delay=90
|
||||
const SKIN='#ffe3d1',HAIR='#5c7cfa',HD='#3b5bdb',HL='#dbe4ff',CO='#fff',SH='#a5d8ff',BL='#ffa8a8',PC='#e9d8a6',PD='#c9b37e',SC='#495057',SM='#ced4da',SMD='#adb5bd',SW='#a5d8ff',SP='#ffd43b',Z=.76
|
||||
const puff=(c,x,y,r,f)=>{c.beginPath();for(const[a,b,s]of[[-.8,0,.7],[0,-.5,.8],[.8,0,.7],[0,.3,.75]])c.moveTo(x+a*r+s*r,y+b*r),c.arc(x+a*r,y+b*r,s*r,0,T);c.lineWidth=9;c.strokeStyle='#111';c.stroke();c.fillStyle=f;c.fill()}
|
||||
export default(c,t,i)=>{
|
||||
const k=max(0,sin(2*T*t))**2,L=v=>c.lineWidth=v/Z,fl=i%3==0
|
||||
const head=f=>{c.save();c.translate(158,112+5*k);c.rotate(-.12*k);c.scale(Z,Z);c.translate(-128,-128);f();c.restore()}
|
||||
head(()=>{
|
||||
L(6);c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(198,34,212,96,206,150);c.lineTo(212,320);c.lineTo(44,320);c.lineTo(50,150);c.bezierCurveTo(44,96,58,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=CO;c.beginPath();c.moveTo(100,190);c.quadraticCurveTo(58,196,46,320);c.lineTo(210,320);c.quadraticCurveTo(198,196,156,190);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=SH;c.beginPath();c.moveTo(108,190);c.lineTo(128,236);c.lineTo(148,190);c.closePath();c.fill();c.stroke()
|
||||
L(5);for(const d of[-1,1])c.beginPath(),c.moveTo(128+d*20,188),c.lineTo(128+d*34,214),c.lineTo(128+d*22,218),c.lineTo(128,250),c.stroke()
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,166);c.lineTo(116,194);c.lineTo(128,206);c.lineTo(140,194);c.lineTo(140,166);c.fill();L(5);c.beginPath();c.moveTo(116,166);c.lineTo(116,192);c.moveTo(140,166);c.lineTo(140,192);c.stroke()
|
||||
L(6);c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
L(6.5);for(const d of[-1,1]){const x=128+d*25;c.beginPath();c.moveTo(x-d*13,130);c.lineTo(x+d*9,140);c.lineTo(x-d*13,150);c.stroke()}
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*44,162,11,5.5,0,0,T),c.fill()
|
||||
for(const[w,s]of[[8,'#111'],[3.5,'#fab005']]){c.strokeStyle=s;L(w);for(const x of[103,153])c.beginPath(),c.arc(x,140,22,0,T),c.stroke();c.beginPath();c.moveTo(123,136);c.quadraticCurveTo(128,131,133,136);c.stroke()}
|
||||
c.strokeStyle='#111';L(6);c.fillStyle=HAIR;c.beginPath();c.moveTo(66,170)
|
||||
c.bezierCurveTo(50,74,88,36,128,36);c.bezierCurveTo(168,36,206,74,190,170)
|
||||
c.quadraticCurveTo(184,130,180,104);c.quadraticCurveTo(172,100,164,112);c.quadraticCurveTo(158,96,146,92);c.quadraticCurveTo(140,104,130,108)
|
||||
c.quadraticCurveTo(124,96,112,92);c.quadraticCurveTo(106,104,96,108);c.quadraticCurveTo(90,98,82,102)
|
||||
c.quadraticCurveTo(72,130,66,170);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;L(5);for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';L(4.5);c.beginPath();c.moveTo(88,112);c.lineTo(114,118);c.moveTo(168,112);c.lineTo(142,118);c.stroke()
|
||||
c.fillStyle=SW;L(4);const sy=96+4*k;c.beginPath();c.moveTo(196,sy-14);c.quadraticCurveTo(206,sy,196,sy+7);c.quadraticCurveTo(186,sy,196,sy-14);c.fill();c.stroke()
|
||||
})
|
||||
for(const[w,s]of[[28,'#111'],[17,CO]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(118,262),c.quadraticCurveTo(110,200,140,170+4*k),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=5;c.fillStyle=SKIN;c.beginPath();c.roundRect(130,146+4*k,28,26,10);c.fill();c.stroke()
|
||||
c.lineWidth=2.5;c.beginPath();for(const y of[154,161])c.moveTo(150,y+4*k),c.lineTo(158,y+4*k);c.stroke()
|
||||
if(k>.2)for(const[w,s]of[[9,'#111'],[4,'#fff']]){c.lineWidth=w;c.strokeStyle=s;for(const a of[-.6,0,.6])c.beginPath(),c.moveTo(144-22*cos(a),160+4*k+22*sin(a)),c.lineTo(144-(26+16*k)*cos(a),160+4*k+(26+16*k)*sin(a)),c.stroke()}
|
||||
c.strokeStyle='#111'
|
||||
c.lineWidth=6;c.fillStyle=PD;c.beginPath();c.moveTo(44,226);c.lineTo(92,226);c.lineTo(104,248);c.lineTo(32,248);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=PC;c.beginPath();c.roundRect(10,122,116,106,12);c.fill();c.stroke()
|
||||
c.fillStyle=fl?'#868e96':SC;c.beginPath();c.roundRect(24,136,88,70,8);c.fill();c.lineWidth=5;c.stroke()
|
||||
for(const[w,s]of[[9,'#111'],[4,'#fff']])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(44,140),c.lineTo(58,160),c.lineTo(50,172),c.lineTo(66,202),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=4;c.fillStyle=SP;for(const[x,y]of[[96,130],[22,140]])if((i+(x>50?0:1))%2)c.beginPath(),c.moveTo(x,y-11),c.lineTo(x+4,y-3),c.lineTo(x+12,y),c.lineTo(x+4,y+3),c.lineTo(x,y+11),c.lineTo(x-4,y+3),c.lineTo(x-12,y),c.lineTo(x-4,y-3),c.closePath(),c.fill(),c.stroke()
|
||||
for(let n=3;n>=0;n--){const p=(t+n/4)%1;puff(c,56+96*p+10*sin(T*p),108-90*p,(12+18*p)*min(1,(1-p)*5),n%2?SM:SMD)}
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
// blonde girl with twin buns doing a tehepero oops: winking, tongue out, bonking her own head with her fist so little stars pop
|
||||
const{sin,cos,PI,abs,max}=Math,T=2*PI
|
||||
export const frames=8,delay=100
|
||||
const SKIN='#ffe3d1',HAIR='#ffe066',HD='#f59f00',HL='#fff9db',EYE='#f783ac',ED='#c2255c',UN='#fff',COL='#364fc7',RB='#fa5252',BL='#ffa8a8',TG='#ff8fab',ST='#ffd43b'
|
||||
const eye=(c,x,y,d)=>{
|
||||
c.fillStyle='#fff';c.beginPath();c.ellipse(x,y,14,17,0,0,T);c.fill()
|
||||
c.save();c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.clip();c.fillStyle=EYE;c.fill();c.fillStyle=ED;c.beginPath();c.ellipse(x,y-8,13,10,0,0,T);c.fill();c.restore()
|
||||
c.lineWidth=2.5;c.beginPath();c.ellipse(x,y+2,11.5,15,0,0,T);c.stroke()
|
||||
c.fillStyle='#111';c.beginPath();c.ellipse(x,y+3,5.5,7.5,0,0,T);c.fill()
|
||||
c.fillStyle='#fff';c.beginPath();c.arc(x-4,y-5,4.5,0,T);c.fill();c.beginPath();c.arc(x+5,y+8,2,0,T);c.fill()
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(x-16,y-6);c.quadraticCurveTo(x,y-20,x+16,y-6);c.moveTo(x+d*15,y-7);c.lineTo(x+d*21,y-12);c.stroke()
|
||||
}
|
||||
const star=(c,x,y,r,a)=>{c.save();c.translate(x,y);c.rotate(a);c.beginPath();for(let k=0;k<10;k++){const rr=k%2?r*.45:r,b=k*PI/5-PI/2;c.lineTo(cos(b)*rr,sin(b)*rr)}c.closePath();c.restore();c.fill();c.stroke()}
|
||||
export default(c,t)=>{
|
||||
const u=abs(sin(2*PI*t)),hit=u<.5,tl=.07*(1-u)
|
||||
const head=f=>{c.save();c.translate(128,186);c.rotate(-tl);c.translate(-128,-186);f();c.restore()}
|
||||
head(()=>{
|
||||
c.lineWidth=6;c.fillStyle=HD;c.beginPath();c.moveTo(128,34);c.bezierCurveTo(196,34,208,100,200,156);c.quadraticCurveTo(196,178,178,176);c.lineTo(78,176);c.quadraticCurveTo(60,178,56,156);c.bezierCurveTo(48,100,60,34,128,34);c.fill();c.stroke()
|
||||
c.fillStyle=HAIR;for(const d of[-1,1])c.beginPath(),c.arc(128+d*54,52,25,0,T),c.fill(),c.stroke()
|
||||
c.strokeStyle=HD;c.lineWidth=3.5;for(const d of[-1,1])c.beginPath(),c.arc(128+d*54,52,14,PI*1.1,PI*1.7),c.stroke();c.strokeStyle='#111'
|
||||
})
|
||||
c.lineWidth=6;c.fillStyle=UN;c.beginPath();c.moveTo(100,188);c.quadraticCurveTo(62,196,54,250);c.lineTo(202,250);c.quadraticCurveTo(194,196,156,188);c.closePath();c.fill();c.stroke()
|
||||
c.fillStyle=COL;c.beginPath();c.moveTo(98,189);c.lineTo(128,228);c.lineTo(158,189);c.lineTo(172,197);c.lineTo(128,248);c.lineTo(84,197);c.closePath();c.fill();c.lineWidth=5;c.stroke()
|
||||
c.strokeStyle='#fff';c.lineWidth=3;c.beginPath();c.moveTo(90,198);c.lineTo(128,240);c.lineTo(166,198);c.stroke();c.strokeStyle='#111'
|
||||
c.fillStyle=SKIN;c.beginPath();c.moveTo(116,166);c.lineTo(116,192);c.lineTo(128,206);c.lineTo(140,192);c.lineTo(140,166);c.fill();c.beginPath();c.moveTo(116,166);c.lineTo(116,190);c.moveTo(140,166);c.lineTo(140,190);c.stroke()
|
||||
c.fillStyle=RB;for(const d of[-1,1])c.beginPath(),c.moveTo(128,226),c.lineTo(128+d*20,216),c.lineTo(128+d*18,238),c.closePath(),c.fill(),c.stroke()
|
||||
c.beginPath();c.arc(128,227,5,0,T);c.fill();c.stroke()
|
||||
head(()=>{
|
||||
c.lineWidth=6;c.fillStyle=SKIN;c.beginPath();c.moveTo(74,96);c.bezierCurveTo(70,152,100,184,128,186);c.bezierCurveTo(156,184,186,152,182,96);c.bezierCurveTo(182,44,74,44,74,96);c.fill();c.stroke()
|
||||
eye(c,103,140,-1)
|
||||
c.lineWidth=6;c.beginPath();c.moveTo(166,128);c.lineTo(144,140);c.lineTo(166,152);c.stroke()
|
||||
c.lineWidth=2.5;c.beginPath();c.moveTo(128,156);c.lineTo(127,159);c.stroke()
|
||||
c.fillStyle=BL;for(const d of[-1,1])c.beginPath(),c.ellipse(128+d*42,161,12,6,0,0,T),c.fill()
|
||||
c.lineWidth=2.5;for(const d of[-1,1])for(const k of[-5,0,5])c.beginPath(),c.moveTo(128+d*42+k-2,164),c.lineTo(128+d*42+k+2,158),c.stroke()
|
||||
c.fillStyle=TG;c.lineWidth=3.5;c.beginPath();c.moveTo(126,168);c.lineTo(126,176+2*u);c.arc(132,176+2*u,6,PI,0,true);c.lineTo(138,168);c.fill();c.stroke()
|
||||
c.lineWidth=1.8;c.beginPath();c.moveTo(132,170);c.lineTo(132,177+2*u);c.stroke()
|
||||
c.lineWidth=3.5;c.beginPath();c.moveTo(116,166);c.quadraticCurveTo(128,174,142,164);c.stroke()
|
||||
c.lineWidth=6;c.fillStyle=HAIR;c.beginPath();c.moveTo(70,156)
|
||||
c.bezierCurveTo(54,74,88,36,128,36);c.bezierCurveTo(168,36,202,74,186,156)
|
||||
c.quadraticCurveTo(184,120,178,104);c.quadraticCurveTo(170,102,164,110);c.quadraticCurveTo(160,96,148,92);c.quadraticCurveTo(142,104,132,108)
|
||||
c.quadraticCurveTo(126,94,114,92);c.quadraticCurveTo(108,104,98,108);c.quadraticCurveTo(92,98,82,102)
|
||||
c.quadraticCurveTo(72,124,70,156);c.closePath();c.fill();c.stroke()
|
||||
c.strokeStyle=HL;c.lineWidth=5;for(const[a,e]of[[1.24,1.36],[1.44,1.52],[1.62,1.74]])c.beginPath(),c.arc(128,104,56,PI*a,PI*e),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=4;c.beginPath();c.moveTo(144,114);c.lineTo(166,108);c.stroke()
|
||||
})
|
||||
const fx=196+14*u,fy=96-12*u
|
||||
for(const[w,s]of[[30,'#111'],[19,UN]])c.lineWidth=w,c.strokeStyle=s,c.beginPath(),c.moveTo(186,262),c.quadraticCurveTo(222,214,226,176),c.lineTo(fx+8,fy+14),c.stroke()
|
||||
c.strokeStyle='#111';c.lineWidth=5;c.fillStyle=COL;c.save();c.translate(fx+10,fy+20);c.rotate(.9-.3*u);c.beginPath();c.roundRect(-14,-6,28,12,4);c.fill();c.stroke();c.restore()
|
||||
c.fillStyle=SKIN;c.save();c.translate(fx,fy);c.rotate(.5);c.beginPath();c.roundRect(-17,-15,34,30,12);c.fill();c.stroke();c.lineWidth=2.5;c.beginPath();for(const k of[-6,1,8])c.moveTo(k,-13),c.lineTo(k,-5);c.stroke();c.restore()
|
||||
if(hit){c.fillStyle=ST;c.lineWidth=4;for(const[a,r]of[[-2,15],[-1.1,12],[-.2,10]]){const q=1-u*1.6;star(c,fx-4+cos(a)*(28+14*(1-q)),fy-8+sin(a)*(28+14*(1-q)),r*q,a)}}
|
||||
}
|
||||
Reference in New Issue
Block a user