v12-ui/dist/Background/AnimatedBackground.cjs

A React component library with a focus on utility-first design and accessibility.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const P=require("react/jsx-runtime"),d=require("react"),S=require("../utils/utils.cjs"),T=require("class-variance-authority"),V=require("../Hooks/useDataTheme.cjs"),I=T.cva("overflow-hidden fixed top-0 left-0 pointer-events-none w-full h-screen before:content-[''] before:absolute before:inset-0 before:w-full before:h-full before:bg-black/30",{variants:{theme:{dark:"bg-[#111117]",light:"bg-[#ddd]",transparent:"bg-transparent"}},defaultVariants:{theme:"dark"}}),L=T.cva("absolute inset-0 w-full h-full",{variants:{theme:{dark:"bg-[radial-gradient(circle,_#111117_0%,_rgba(17,17,23,0)_100%)]",light:"bg-[radial-gradient(circle,_#ddd_0%,_rgba(17,17,23,0)_100%)]",transparent:"bg-transparent"}},defaultVariants:{theme:"dark"}}),N=d.forwardRef(({theme:q,bubbleGradiant1:y=["#004e92","#000428"],bubbleGradiant2:v=["#00C9FF","#92FE9D"],bubbleGradiant3:M=["#e0f7f4","#a3e9ff"],zIndex:F=-9999,className:W,...z},C)=>{const{theme:R}=V.useDataTheme(q),x=d.useRef(null),[A,H]=d.useState({width:window.innerWidth,height:window.innerHeight}),h=d.useRef(null),g=d.useRef(null);return d.useEffect(()=>{const a=x.current,t=a?.getContext("2d");if(!a||!t)return;let{width:u,height:i}=A;u=a.width=a.parentElement?.clientWidth||window.innerWidth,i=a.height=a.parentElement?.clientHeight||window.innerHeight;const _=[y,v,M],o={colors:[{r:0,g:201,b:255,a:.7},{r:0,g:78,b:146,a:.7},{r:224,g:247,b:244,a:.7}],blur:10,x:0,y:0},j=Array.from({length:10},()=>{const e=Math.random()*20+50;return{x:Math.random()*u,y:Math.random()*i,r:15,scale:0,speed:i/(e*60),duration:e,colorIndex:Math.floor(Math.random()*_.length)}});function $(e,r,c,m=0,w,n,l,s,b){const f=e.createRadialGradient(r,c,m,w,n,l);return f.addColorStop(0,s),f.addColorStop(1,b),f}function B(e,r,c,m,w,n,l){for(let s=0;s<3;s++){const b=.2*s,f=15*s,D=4*s,O=c+D;n.beginPath(),n.arc(e,r,O,m,w),n.shadowColor=`rgba(
          ${o.colors[l].r},
          ${o.colors[l].g},
          ${o.colors[l].b},
          ${o.colors[l].a-b})`,n.shadowBlur=o.blur+f,n.shadowOffsetX=o.x,n.shadowOffsetY=o.y,n.fill(),n.closePath()}}function k(){!t||!u||!i||(t.clearRect(0,0,u,i),j.forEach(e=>{e.y-=e.speed,e.scale=Math.max(0,1-e.y/i),e.y+e.r<-30&&(e.y=i+Math.random()*30,e.x=Math.random()*u,e.scale=0),t.beginPath(),t.arc(e.x,e.y,Math.abs(e.r*e.scale),0,Math.PI*2);const r=_[e.colorIndex];r&&(t.fillStyle=$(t,e.x,e.y,0,e.x,e.y,e.r,r[0],r[1]),t.fill(),t.closePath(),B(e.x,e.y,Math.abs(e.r*e.scale),0,Math.PI*2,t,e.colorIndex))}),g.current=requestAnimationFrame(k))}k();const E=()=>{h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{H(e=>{const r=a.width=window.innerWidth,c=a.height=window.innerHeight;return e.width===r&&e.height===c?e:{width:r,height:c}})},100)};return window.addEventListener("resize",E),()=>{window.removeEventListener("resize",E),g.current&&cancelAnimationFrame(g.current),h.current&&clearTimeout(h.current)}},[A,y,v,M]),P.jsx("div",{ref:C,style:{zIndex:F},...z,className:S.cn(I({theme:R}),W),children:P.jsx("canvas",{ref:x,className:S.cn(L({theme:R}))})})});exports.AnimatedBackground=N;