https://alvinjoy.vercel.app/_next/static/chunks/183.b758324c2026ba53.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[183],{1183:(e,n,o)=>{"use strict";o.r(n),o.d(n,{default:()=>x});var t=o(5155),r=o(2115),i=o(2495),l=o(258),a=o(8995),u=o(3303),c=o(5339);o(9260);class s extends u.Mj{set colorNum(e){this.uniforms.get("colorNum").value=e}get colorNum(){return this.uniforms.get("colorNum").value}set pixelSize(e){this.uniforms.get("pixelSize").value=e}get pixelSize(){return this.uniforms.get("pixelSize").value}constructor(){let e=new Map([["colorNum",new c.nc$(4)],["pixelSize",new c.nc$(2)]]);super("RetroEffect","\nprecision highp float;\nuniform float colorNum;\nuniform float pixelSize;\nconst float bayerMatrix8x8[64] = float[64](\n  0.0/64.0, 48.0/64.0, 12.0/64.0, 60.0/64.0,  3.0/64.0, 51.0/64.0, 15.0/64.0, 63.0/64.0,\n  32.0/64.0,16.0/64.0, 44.0/64.0, 28.0/64.0, 35.0/64.0,19.0/64.0, 47.0/64.0, 31.0/64.0,\n  8.0/64.0, 56.0/64.0,  4.0/64.0, 52.0/64.0, 11.0/64.0,59.0/64.0,  7.0/64.0, 55.0/64.0,\n  40.0/64.0,24.0/64.0, 36.0/64.0, 20.0/64.0, 43.0/64.0,27.0/64.0, 39.0/64.0, 23.0/64.0,\n  2.0/64.0, 50.0/64.0, 14.0/64.0, 62.0/64.0,  1.0/64.0,49.0/64.0, 13.0/64.0, 61.0/64.0,\n  34.0/64.0,18.0/64.0, 46.0/64.0, 30.0/64.0, 33.0/64.0,17.0/64.0, 45.0/64.0, 29.0/64.0,\n  10.0/64.0,58.0/64.0,  6.0/64.0, 54.0/64.0,  9.0/64.0,57.0/64.0,  5.0/64.0, 53.0/64.0,\n  42.0/64.0,26.0/64.0, 38.0/64.0, 22.0/64.0, 41.0/64.0,25.0/64.0, 37.0/64.0, 21.0/64.0\n);\n\nvec3 dither(vec2 uv, vec3 color) {\n  vec2 scaledCoord = floor(uv * resolution / pixelSize);\n  int x = int(mod(scaledCoord.x, 8.0));\n  int y = int(mod(scaledCoord.y, 8.0));\n  float threshold = bayerMatrix8x8[y * 8 + x] - 0.25;\n  float step = 1.0 / (colorNum - 1.0);\n  color += threshold * step;\n  float bias = 0.2;\n  color = clamp(color - bias, 0.0, 1.0);\n  return floor(color * (colorNum - 1.0) + 0.5) / (colorNum - 1.0);\n}\n\nvoid mainImage(in vec4 inputColor, in vec2 uv, out vec4 outputColor) {\n  vec2 normalizedPixelSize = pixelSize / resolution;

1\n  vec2 uvPixel = normalizedPixelSize * floor(uv / normalizedPixelSize);\n  vec4 color = texture2D(inputBuffer, uvPixel);\n  color.rgb = dither(uv, color.rgb);\n  /* INTEGRATION PATCH: quantize alpha through the same Bayer matrix so\n     dots are fully opaque and the gaps fully transparent */\n  color.a = dither(uv, vec3(color.a)).r;\n  outputColor = color;\n}\n",{uniforms:e}),this.uniforms=e}}let v=(0,a.AR)(s),f=(0,r.forwardRef)((e,n)=>{let{colorNum:o,pixelSize:r}=e;return(0,t.jsx)(v,{ref:n,colorNum:o,pixelSize:r})});function m(e){let{waveSpeed:n,waveFrequency:o,waveAmplitude:l,waveColor:u,colorNum:s,pixelSize:v,disableAnimation:m,enableMouseInteraction:x,mouseRadius:d}=e,p=(0,r.useRef)(null),g=(0,r.useRef)(null),w=(0,r.useRef)(new c.I9Y),{viewport:y,size:h,gl:P}=(0,i.D)(),z=(0,r.useRef)({time:new c.nc$(0),resolution:new c.nc$(new c.I9Y(0,0)),waveSpeed:new c.nc$(n),waveFrequency:new c.nc$(o),waveAmplitude:new c.nc$(l),waveColor:new c.nc$(new c.Q1f(...u)),mousePos:new c.nc$(new c.I9Y(0,0)),enableMouseInteraction:new c.nc$(+!!x),mouseRadius:new c.nc$(d)});(0,r.useEffect)(()=>{let e=P.getPixelRatio(),n=Math.floor(h.width*e),o=Math.floor(h.height*e),t=(g.current?g.current.uniforms:z.current).resolution.value;(t.x!==n||t.y!==o)&&t.set(n,o)},[h,P]);let C=(0,r.useRef)([...u]),S=(0,r.useRef)(null);return(0,i.F)(()=>{if(!g.current)return;let e=g.current.uniforms;m||(null===S.current&&(S.current=performance.now()),e.time.value=(performance.now()-S.current)/1e3),e.waveSpeed.value!==n&&(e.waveSpeed.value=n),e.waveFrequency.value!==o&&(e.waveFrequency.value=o),e.waveAmplitude.value!==l&&(e.waveAmplitude.value=l),C.current.every((e,n)=>e===u[n])||(e.waveColor.value.set(...u),C.current=[...u]),e.enableMouseInteraction.value=+!!x,e.mouseRadius.value=d,x&&e.mousePos.value.copy(w.current)}),(0,r.useEffect)(()=>{if(!x)return;let e=e=>{let n=P.domElement.getBoundingClientRect(),o=P.getPixelRatio();w.current.set((e.clientX-n.left)*o,(e.clientY-n.top)*o)};return window.addEventListener("pointermove",e,{passive:!0}),()=>window.removeEventListener("pointermove",e)},[x,P]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("mesh",{ref:p,scale:[y.width,y.height,1],children:[(0,t.jsx)("planeGeometry",{args:[1,1]}),(0,t.jsx)("shaderMaterial",{ref:g,vertexShader:"\nprecision highp float;\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  vec4 modelPosition = modelMatrix * vec4(position, 1.0);\n  vec4 viewPosition = viewMatrix * modelPosition;\n  gl_Position = projectionMatrix * viewPosition;\n}\n",fragmentShader:"\nprecision highp float;\nuniform vec2 resolution;\nuniform float time;\nuniform float waveSpeed;\nuniform float waveFrequency;\nuniform float waveAmplitude;\nuniform vec3 waveColor;\nuniform vec2 mousePos;\nuniform int enableMouseInteraction;\nuniform float mouseRadius;\n\nvec4 mod289(vec4 x) { return x - floor(x * (1.0/289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x * 34.0) + 1.0) * x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\nvec2 fade(vec2 t) { return t*t*t*(t*(t*6.0-15.0)+10.0); }\n\nfloat cnoise(vec2 P) {\n  vec4 Pi = floor(P.xyxy) + vec4(0.0,0.0,1.0,1.0);\n  vec4 Pf = fract(P.xyxy) - vec4(0.0,0.0,1.0,1.0);\n  Pi = mod289(Pi);\n  vec4 ix = Pi.xzxz;\n  vec4 iy = Pi.yyww;\n  vec4 fx = Pf.xzxz;\n  vec4 fy = Pf.yyww;\n  vec4 i = permute(permute(ix) + iy);\n  vec4 gx = fract(i * (1.0/41.0)) * 2.0 - 1.0;\n  vec4 gy = abs(gx) - 0.5;\n  vec4 tx = floor(gx + 0.5);\n  gx = gx - tx;\n  vec2 g00 = vec2(gx.x, gy.x);

1\n  vec2 g10 = vec2(gx.y, gy.y);\n  vec2 g01 = vec2(gx.z, gy.z);\n  vec2 g11 = vec2(gx.w, gy.w);\n  vec4 norm = taylorInvSqrt(vec4(dot(g00,g00), dot(g01,g01), dot(g10,g10), dot(g11,g11)));\n  g00 *= norm.x; g01 *= norm.y; g10 *= norm.z; g11 *= norm.w;\n  float n00 = dot(g00, vec2(fx.x, fy.x));\n  float n10 = dot(g10, vec2(fx.y, fy.y));\n  float n01 = dot(g01, vec2(fx.z, fy.z));\n  float n11 = dot(g11, vec2(fx.w, fy.w));\n  vec2 fade_xy = fade(Pf.xy);\n  vec2 n_x = mix(vec2(n00, n01), vec2(n10, n11), fade_xy.x);\n  return 2.3 * mix(n_x.x, n_x.y, fade_xy.y);\n}\n\nconst int OCTAVES = 4;\nfloat fbm(vec2 p) {\n  float value = 0.0;\n  float amp = 1.0;\n  float freq = waveFrequency;\n  for (int i = 0; i < OCTAVES; i++) {\n    value += amp * abs(cnoise(p));\n    p *= freq;\n    amp *= waveAmplitude;\n  }\n  return value;\n}\n\nfloat pattern(vec2 p) {\n  vec2 p2 = p - time * waveSpeed;\n  return fbm(p + fbm(p2));\n}\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / resolution.xy;\n  uv -= 0.5;\n  uv.x *= resolution.x / resolution.y;\n  float f = pattern(uv);\n  if (enableMouseInteraction == 1) {\n    vec2 mouseNDC = (mousePos / resolution - 0.5) * vec2(1.0, -1.0);\n    mouseNDC.x *= resolution.x / resolution.y;\n    float dist = length(uv - mouseNDC);\n    float effect = 1.0 - smoothstep(0.0, mouseRadius, dist);\n    f -= 0.5 * effect;\n  }\n  vec3 col = mix(vec3(0.0), waveColor, f);\n  /* INTEGRATION PATCH: wave strength becomes alpha so the effect can sit\n     on the site's own light/dark background instead of opaque black */\n  gl_FragColor = vec4(col, clamp(f, 0.0, 1.0));\n}\n",uniforms:z.current})]}),(0,t.jsx)(a.s0,{children:(0,t.jsx)(f,{colorNum:s,pixelSize:v})}),(0,t.jsxs)("mesh",{onPointerMove:e=>{if(!x)return;let n=P.domElement.getBoundingClientRect(),o=P.getPixelRatio();w.current.set((e.clientX-n.left)*o,(e.clientY-n.top)*o)},position:[0,0,.01],scale:[y.width,y.height,1],visible:!1,children:[(0,t.jsx)("planeGeometry",{args:[1,1]}),(0,t.jsx)("meshBasicMaterial",{transparent:!0,opacity:0})]})]})}function x(e){let{waveSpeed:n=.05,waveFrequency:o=3,waveAmplitude:r=.3,waveColor:i=[.5,.5,.5],colorNum:a=4,pixelSize:u=2,disableAnimation:c=!1,enableMouseInteraction:s=!0,mouseRadius:v=1}=e;return(0,t.jsx)(l.Hl,{className:"dither-container",camera:{position:[0,0,6]},dpr:1,gl:{antialias:!0,preserveDrawingBuffer:!0,alpha:!0,premultipliedAlpha:!1},onCreated:e=>{let{gl:n}=e;return n.setClearColor(0,0)},children:(0,t.jsx)(m,{waveSpeed:n,waveFrequency:o,waveAmplitude:r,waveColor:i,colorNum:a,pixelSize:u,disableAnimation:c,enableMouseInteraction:s,mouseRadius:v})})}f.displayName="RetroEffect"},9260:()=>{}}]);