mirror of
https://github.com/direct-img/vibegif.direct-img.link.git
synced 2026-10-29 19:54:51 +00:00
multipleof4andClaude Opus 5.5
c00ba79178
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>
38 lines
2.0 KiB
JavaScript
38 lines
2.0 KiB
JavaScript
// 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))
|
|
}
|