https://kasbu.bio/assets/js/animated-grid-pattern-DGRyrulE.js

1import{r as e,j as t,aF as r,aG as s}from"../index-DEUA2RFd.js";import"./cjs-helpers-BrGt3VpK.js";import"./supabase-vendor-DuR9KhUO.js";function i({width:i=40,height:a=40,x:n=-1,y:o=-1,strokeDasharray:h=0,numSquares:l=50,className:d,maxOpacity:c=.5,duration:u=4,...p}){const f=e.useId(),m=e.useRef(null),[g,x]=e.useState({width:0,height:0}),y=e.useCallback(()=>[Math.floor(Math.random()*g.width/i),Math.floor(Math.random()*g.height/a)],[g.width,g.height,i,a]),j=e.useCallback(e=>Array.from({length:e},(e,t)=>({id:t,pos:y()})),[y]),[w,v]=e.useState([]);return e.useEffect(()=>{g.width&&g.height&&v(j(l))},[g,l,j]),e.useEffect(()=>{const e=m.current;if(!e)return;const t=new ResizeObserver(e=>{for(const t of e)x({width:t.contentRect.width,height:t.contentRect.height})});return t.observe(e),()=>{t.unobserve(e)}},[]),t.jsxs("svg",{ref:m,"aria-hidden":"true",className:r("pointer-events-none absolute inset-0 size-full fill-gray-400/30 stroke-gray-400/30",d),...p,children:[t.jsx("defs",{children:t.jsx("pattern",{id:f,width:i,height:a,patternUnits:"userSpaceOnUse",x:n,y:o,children:t.jsx("path",{d:`M.5 ${a}V.5H${i}`,fill:"none",strokeDasharray:h})})}),t.jsx("rect",{width:"100%",height:"100%",fill:`url(#${f})`}),t.jsx("svg",{x:n,y:o,className:"overflow-visible",children:w.map(({pos:[e,r],id:n},o)=>t.jsx(s.rect,{initial:{opacity:0}

1,animate:{opacity:c},transition:{duration:u,repeat:1,delay:.1*o,repeatType:"reverse"},onAnimationComplete:()=>(e=>{v(t=>t.map(t=>t.id===e?{...t,pos:y()}:t))})(n),width:i-1,height:a-1,x:e*i+1,y:r*a+1,fill:"currentColor",strokeWidth:"0"},`${e}-${r}-${o}`))})]})}export{i as AnimatedGridPattern};