(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7153],{17153:(e,u,t)=>{"use strict";t.r(u),t.d(u,{default:()=>s});var n=t(53756),a=t(5008),o=t(22318),r=t(12581);t(97557);let i=`
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,l=`
precision highp float;

uniform float uTime, uAttenuation, uLineThickness;
uniform float uBaseRadius, uRadiusStep, uScaleRate;
uniform float uOpacity, uNoiseAmount, uRotation, uRingGap;
uniform float uFadeIn, uFadeOut;
uniform float uMouseInfluence, uHoverAmount, uHoverScale, uParallax, uBurst;
uniform vec2 uResolution, uMouse;
uniform vec3 uColor, uColorTwo;
uniform int uRingCount;

const float HP = 1.5707963;
const float CYCLE = 3.45;

float fade(float t) {
  return t < uFadeIn ? smoothstep(0.0, uFadeIn, t) : 1.0 - smoothstep(uFadeOut, CYCLE - 0.2, t);
}

float ring(vec2 p, float ri, float cut, float t0, float px) {
  float t = mod(uTime + t0, CYCLE);
  float r = ri + t / CYCLE * uScaleRate;
  float d = abs(length(p) - r);
  float a = atan(abs(p.y), abs(p.x)) / HP;
  float th = max(1.0 - a, 0.5) * px * uLineThickness;
  float h = (1.0 - smoothstep(th, th * 1.5, d)) + 1.0;
  d += pow(cut * a, 3.0) * r;
  return h * exp(-uAttenuation * d) * fade(t);
}

void main() {
  float px = 1.0 / min(uResolution.x, uResolution.y);
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution.xy) * px;
  float cr = cos(uRotation), sr = sin(uRotation);
  p = mat2(cr, -sr, sr, cr) * p;
  p -= uMouse * uMouseInfluence;
  float sc = mix(1.0, uHoverScale, uHoverAmount) + uBurst * 0.3;
  p /= sc;
  vec3 c = vec3(0.0);
  float rcf = max(float(uRingCount) - 1.0, 1.0);
  for (int i = 0; i < 10; i++) {
    if (i >= uRingCount) break;
    float fi = float(i);
    vec2 pr = p - fi * uParallax * uMouse;
    vec3 rc = mix(uColor, uColorTwo, fi / rcf);
    c = mix(c, rc, vec3(ring(pr, uBaseRadius + fi * uRadiusStep, pow(uRingGap, fi), i == 0 ? 0.0 : 2.95 * fi, px)));
  }
  c *= 1.0 + uBurst * 2.0;
  float n = fract(sin(dot(gl_FragCoord.xy + uTime * 100.0, vec2(12.9898, 78.233))) * 43758.5453);
  c += (n - 0.5) * uNoiseAmount;
  gl_FragColor = vec4(c, max(c.r, max(c.g, c.b)) * uOpacity);
}
`;function s({color:e="#fc42ff",colorTwo:u="#42fcff",speed:t=1,ringCount:c=6,attenuation:v=10,lineThickness:f=2,baseRadius:d=.35,radiusStep:m=.1,scaleRate:p=.1,opacity:R=1,blur:h=0,noiseAmount:C=.1,rotation:g=0,ringGap:w=1.5,fadeIn:x=.7,fadeOut:E=.5,followMouse:L=!1,mouseInfluence:b=.2,hoverScale:A=1.2,parallax:F=.05,clickBurst:I=!1}){let M=(0,a.useRef)(null),S=(0,a.useRef)(null),T=(0,a.useRef)([0,0]),k=(0,a.useRef)([0,0]),y=(0,a.useRef)(0),B=(0,a.useRef)(!1),P=(0,a.useRef)(0),H=(0,a.useRef)(!0);return(0,a.useEffect)(()=>{S.current={color:e,colorTwo:u,speed:t,ringCount:c,attenuation:v,lineThickness:f,baseRadius:d,radiusStep:m,scaleRate:p,opacity:R,blur:h,noiseAmount:C,rotation:g,ringGap:w,fadeIn:x,fadeOut:E,followMouse:L,mouseInfluence:b,hoverScale:A,parallax:F,clickBurst:I}},[e,u,t,c,v,f,d,m,p,R,h,C,g,w,x,E,L,b,A,F,I]),(0,a.useEffect)(()=>{let e,u,t=M.current;if(!t)return;let n=new IntersectionObserver(e=>{H.current=e[0].isIntersecting},{threshold:0});n.observe(t);try{e=new o.JeP({alpha:!0,antialias:!1,powerPreference:"high-performance"})}catch{return}if(!e.capabilities.isWebGL2)return void e.dispose();e.setClearColor(0,0),t.appendChild(e.domElement);let a=new r.Z58,s=new r.qUd(-.5,.5,.5,-.5,.1,10);s.position.z=1;let c={uTime:{value:0},uAttenuation:{value:0},uResolution:{value:new r.I9Y},uColor:{value:new r.Q1f},uColorTwo:{value:new r.Q1f},uLineThickness:{value:0},uBaseRadius:{value:0},uRadiusStep:{value:0},uScaleRate:{value:0},uRingCount:{value:0},uOpacity:{value:1},uNoiseAmount:{value:0},uRotation:{value:0},uRingGap:{value:1.6},uFadeIn:{value:.5},uFadeOut:{value:.75},uMouse:{value:new r.I9Y},uMouseInfluence:{value:0},uHoverAmount:{value:0},uHoverScale:{value:1},uParallax:{value:0},uBurst:{value:0}},v=new r.BKk({vertexShader:i,fragmentShader:l,uniforms:c,transparent:!0}),f=new r.eaF(new r.bdM(1,1),v);a.add(f);let d=()=>{let u=t.clientWidth,n=t.clientHeight,a=Math.min(window.devicePixelRatio,2);e.setSize(u,n),e.setPixelRatio(a),c.uResolution.value.set(u*a,n*a)};d(),window.addEventListener("resize",d);let m=new ResizeObserver(d);m.observe(t);let p=e=>{let u=t.getBoundingClientRect();T.current[0]=(e.clientX-u.left)/u.width-.5,T.current[1]=-((e.clientY-u.top)/u.height-.5)},R=()=>{B.current=!0},h=()=>{B.current=!1,T.current[0]=0,T.current[1]=0},C=()=>{P.current=1};t.addEventListener("mousemove",p),t.addEventListener("mouseenter",R),t.addEventListener("mouseleave",h),t.addEventListener("click",C);let g=t=>{if(u=requestAnimationFrame(g),!H.current)return;let n=S.current;k.current[0]+=(T.current[0]-k.current[0])*.08,k.current[1]+=(T.current[1]-k.current[1])*.08,y.current+=(!!B.current-y.current)*.08,P.current*=.95,P.current<.001&&(P.current=0),c.uTime.value=.001*t*n.speed,c.uAttenuation.value=n.attenuation,c.uColor.value.set(n.color),c.uColorTwo.value.set(n.colorTwo),c.uLineThickness.value=n.lineThickness,c.uBaseRadius.value=n.baseRadius,c.uRadiusStep.value=n.radiusStep,c.uScaleRate.value=n.scaleRate,c.uRingCount.value=n.ringCount,c.uOpacity.value=n.opacity,c.uNoiseAmount.value=n.noiseAmount,c.uRotation.value=n.rotation*Math.PI/180,c.uRingGap.value=n.ringGap,c.uFadeIn.value=n.fadeIn,c.uFadeOut.value=n.fadeOut,c.uMouse.value.set(k.current[0],k.current[1]),c.uMouseInfluence.value=n.followMouse?n.mouseInfluence:0,c.uHoverAmount.value=y.current,c.uHoverScale.value=n.hoverScale,c.uParallax.value=n.parallax,c.uBurst.value=n.clickBurst?P.current:0,e.render(a,s)};return u=requestAnimationFrame(g),()=>{cancelAnimationFrame(u),window.removeEventListener("resize",d),m.disconnect(),n.disconnect(),t.removeEventListener("mousemove",p),t.removeEventListener("mouseenter",R),t.removeEventListener("mouseleave",h),t.removeEventListener("click",C),t.removeChild(e.domElement),e.dispose(),v.dispose()}},[]),(0,n.jsx)("div",{ref:M,className:"magic-rings-container",style:h>0?{filter:`blur(${h}px)`}:void 0})}},97557:()=>{}}]);