Files
vibegif.direct-img.link/gen/cloud/rain.js
T
multipleof4andClaude Opus 5.5 ac5081d294 Add code-generated animations and build the gallery from public/
Each animation is its own file in gen/<subject>/<action>.js; npm run gen
renders the missing ones to public/ as webp + gif. The homepage grid is
now generated at build time by a small Vite plugin.

First four: ghost/float, heart/beat, cloud/rain, coffee/steam.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-22 19:28:07 +00:00

18 lines
883 B
JavaScript

// sleepy rain cloud drifting while drops fall out from under it
const{sin,PI}=Math,T=2*PI
export default(c,t)=>{
for(const[x,o]of[[72,0],[100,.55],[128,.25],[156,.8],[184,.4]]){
const y=150+((t+o)%1)*120
c.beginPath();c.moveTo(x,y-14);c.bezierCurveTo(x+3,y-7,x+8,y-3,x+8,y+3);c.arc(x,y+3,8,0,PI);c.bezierCurveTo(x-8,y-3,x-3,y-7,x,y-14)
c.lineWidth=5;c.fill();c.stroke()
}
const y=sin(t*T)*3,parts=[[78,118+y,36],[124,92+y,48],[176,112+y,38]],base=()=>c.roundRect(44,112+y,168,52,26)
c.lineWidth=14;for(const[x,yy,r]of parts)c.beginPath(),c.arc(x,yy,r,0,T),c.stroke()
c.beginPath();base();c.stroke()
for(const[x,yy,r]of parts)c.beginPath(),c.arc(x,yy,r,0,T),c.fill()
c.beginPath();base();c.fill()
c.lineWidth=6
for(const x of[104,152])c.beginPath(),c.arc(x,126+y,9,PI*.15,PI*.85),c.stroke()
c.beginPath();c.arc(128,154+y,8,PI*1.2,PI*1.8);c.stroke()
}