https://naemo.ai/_next/static/chunks/101.5b8b7cf5d8771584.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[101],{90101:function(e,t,n){n.r(t),n.d(t,{default:function(){return o}});var r=n(57437),a=n(2265);function o(){let e=(0,a.useRef)(null),[t,n]=(0,a.useState)(!1),[o,i]=(0,a.useState)(!1);return((0,a.useEffect)(()=>{if("function"!=typeof window.matchMedia){i(!0);return}let e=window.matchMedia("(min-width: 768px)"),t=()=>i(e.matches);return t(),e.addEventListener("change",t),()=>e.removeEventListener("change",t)},[]),(0,a.useEffect)(()=>{var t,r;if(!o)return;let a=e.current;if(!a)return;let i=a.getContext("webgl",{antialias:!1,alpha:!1,depth:!1,stencil:!1,powerPreference:"low-power"})||a.getContext("experimental-webgl");if(!i)return;let l=(e,t)=>{let n=i.createShader(e);return(i.shaderSource(n,t),i.compileShader(n),i.getShaderParameter(n,i.COMPILE_STATUS))?n:(console.error("[BrandImageLens] shader:",i.getShaderInfoLog(n)),i.deleteShader(n),null)},u=l(i.VERTEX_SHADER,"\nattribute vec2 aPos;\nvoid main() { gl_Position = vec4(aPos, 0.0, 1.0); }\n"),m=l(i.FRAGMENT_SHADER,'\nprecision highp float;\n\nuniform sampler2D uTex;\nuniform vec2  uRes;     // 캔버스 픽셀 크기\nuniform vec2  uTexSize; // 원본 이미지 크기\nuniform float uTime;    // 초\nuniform vec2  uMouse;   // 0..1 uv, JS 쪽에서 부드럽게 따라온 값\nuniform float uHover;   // 커서가 패널 안에 있는 정도 0..1\nuniform float uAmbient; // 대기 중 흔들림 사용 여부 (0 또는 1)\n\n// 렌즈 반경(세로 길이 기준)과 확대율. 여기를 키우면 금세 "돋보기"처럼\n// 노골적으로 보인다. 알아채기 직전 정도가 적당하다.\nconst float LENS_R = 0.34;\nconst float LENS_K = 0.30;\n\nvoid main() {\n  vec2 uv = gl_FragCoord.xy / uRes;\n\n  float canvasA = uRes.x / max(uRes.y, 1.0);\n  float texA    = uTexSize.x / max(uTexSize.y, 1.0);\n\n  // object-fit: cover 를 셰이더에서 재현한다. 밑에 깔린 <Image> 와 프레임이\n  // 어긋나면 전환할 때 그림이 튀기 때문에 계산을 정확히 맞춰야 한다.\n  vec2 t = uv;\n  if (canvasA > texA) {\n    t.y = (uv.y - 0.5) * (texA / canvasA) + 0.5;\n  } else {\n    t.x = (uv.x - 0.5) * (canvasA / texA) + 0.5;\n  }\n\n  float tm = uTime;\n\n  // ── 느린 숨쉬기 ──\n  // 노이즈까지 갈 필요가 없다. 주기가 다른 사인 몇 개를 겹치면 되풀이가\n  // 눈에 띄지 않으면서 훨씬 싸다.\n  //\n  // 진폭이 문제다. 원본이 경계 없는 그라디언트라 몇 픽셀 움직여서는 정지\n  // 화면과 구별

1이 안 된다. 색 덩어리가 초당 6~8px 로 흐르는 정도는 돼야\n  // "가만히 있지 않다"가 읽힌다 — 아래 수치가 대략 그 지점이다.\n  //\n  // drift: 화면 전체가 통째로 표류 (주기 32초/38초, 진폭 3.5%/2.8%)\n  vec2 drift = vec2(0.035 * sin(tm * 0.196), 0.028 * cos(tm * 0.164));\n  // flex: 자리마다 밀리는 양이 달라 덩어리가 늘어나고 눌린다 (주기 ~21초)\n  vec2 flex = vec2(\n    0.014 * sin(uv.y * 2.6 + tm * 0.30) + 0.009 * sin(uv.x * 1.9 - tm * 0.24),\n    0.014 * cos(uv.x * 2.3 - tm * 0.26) + 0.009 * sin(uv.y * 2.9 + tm * 0.21)\n  );\n\n  // 가장자리로 갈수록 밀림을 0으로 줄인다. 안 그러면 텍스처 바깥을 집어서\n  // 끝 픽셀이 늘어난 띠가 테두리에 생긴다(NPOT 이라 CLAMP 밖에 못 쓴다).\n  vec2 fade2 = smoothstep(vec2(0.0), vec2(0.15), uv) * smoothstep(vec2(1.0), vec2(0.85), uv);\n  float fade = fade2.x * fade2.y;\n\n  // 6% 정도 당겨 두면 밀릴 여유가 생긴다. 흐릿한 그라디언트라 이 정도\n  // 확대는 눈에 띄지 않는다.\n  float breath = 1.06 + 0.022 * sin(tm * 0.19);\n  t = (t - 0.5) / breath + 0.5 + (drift + flex) * fade * uAmbient;\n\n  // ── 굴절 렌즈 ──\n  // 커서를 향해 좌표를 당겨 오면 그 자리가 확대돼 보인다. 가장자리에서는\n  // 당김이 0 이 되도록 프로파일을 제곱해 경계선이 생기지 않게 한다.\n  vec2  md = vec2((uv.x - uMouse.x) * canvasA, uv.y - uMouse.y);\n  float d  = length(md);\n  float r  = clamp(d / LENS_R, 0.0, 1.0);\n  float bulge = (1.0 - r * r);\n  bulge *= bulge;\n\n  vec2 off = md * (-LENS_K * bulge * uHover);\n\n  // 렌즈 테두리의 얇은 굴절 띠. 유리 가장자리처럼 바깥으로 아주 조금 민다.\n  float rim = smoothstep(0.70, 0.96, r) * (1.0 - r) * 3.5;\n  off += (md / max(d, 1e-4)) * rim * 0.010 * uHover;\n\n  t += vec2(off.x / canvasA, off.y);\n\n  gl_FragColor = texture2D(uTex, clamp(t, 0.0, 1.0));\n}\n');if(!u||!m)return;let c=i.createProgram();if(i.attachShader(c,u),i.attachShader(c,m),i.linkProgram(c),!i.getProgramParameter(c,i.LINK_STATUS)){console.error("[BrandImageLens] link:",i.getProgramInfoLog(c));return}i.useProgram(c);let f=i.createBuffer();i.bindBuffer(i.ARRAY_BUFFER,f),i.bufferData(i.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),i.STATIC_DRAW);let d=i.getAttribLocation(c,"aPos");i.enableVertexAttribArray(d),i.vertexAttribPointer(d,2,i.FLOAT,!1,0,0);let s=i.getUniformLocation(c,"uRes"),v=i.getUniformLocation(c,"uTexSize"),h=i.getUniformLocation(c,"uTime"),E=i.getUniformLocation(c,"uMouse"),g=i.getUniformLocation(c,"uHover"),x=i.getUniformLocation(c,"uAmbient"),T="function"==typeof window.matchMedia&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,A=i.createTexture();i.bindTexture(i.TEXTURE_2D,A),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_S,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_WRAP_T,i.CLAMP_TO_EDGE),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MIN_FILTER,i.LINEAR),i.texParameteri(i.TEXTURE_2D,i.TEXTURE_MAG_FILTER,i.LINEAR);let R={x:.5,y:.5,hover:0},L={x:.5,y:.5,hover:0},p=e=>{let t=a.getBoundingClientRect();if(0===t.width||0===t.height)return;R.x=(e.clientX-t.left)/t.width,R.y=1-(e.clientY-t.top)/t.height;let n=e.clientX>=t.left-90&&e.clientX<=t.right+90&&e.clientY>=t.top-90&&e.clientY<=t.bottom+90;R.hover=n?1:0},_=()=>{R.hover=0};window.addEventListener("pointermove",p,{passive:!0}),a.addEventListener("pointerleave",_);let w=0,b=0,S=()=>{let e=a.getBoundingClientRect(),t=Math.min(window.devicePixelRatio||1,1.5),n=Math.max(1,Math.round(e.width*t)),r=Math.max(1,Math.round(e.height*t));(n!==w||r!==b)&&(w=n,b=r,a.width=n,a.height=r,i.viewport(0,0,n,r))};S();let y=new ResizeObserver(S);y.observe(a);let P=0,M=!0,U=!1,I=performance.now(),D=I,F=e=>{i.bindTexture(i.TEXTURE_2D,A),i.pixelStorei(i.UNPACK_FLIP_Y_WEBGL,1),i.texImage2D(i.TEXTURE_2D,0,i.RGBA,i.RGBA,i.UNSIGNED_BYTE,e),i.uniform2f(v,e.naturalWidth,e.naturalHeight),U=!0,n(!0)},N=null!==(r=null===(t=a.parentElement)||void 0===t?void 0:t.querySelector("img"))&&void 0!==r?r:null,X=null,C=null;

1N instanceof HTMLImageElement?N.complete&&N.naturalWidth>0?F(N):(C=()=>F(N),N.addEventListener("load",C,{once:!0})):((X=new window.Image).decoding="async",X.onload=()=>X&&F(X),X.src="/images/brand-gradient.png");let B=e=>{if(!M||(P=requestAnimationFrame(B),!U))return;let t=Math.min((e-D)/1e3,.1);D=e;let n=1-Math.exp(-(9*t));L.x+=(R.x-L.x)*n,L.y+=(R.y-L.y)*n,L.hover+=(R.hover-L.hover)*(1-Math.exp(-(4*t))),i.uniform2f(s,w,b),i.uniform1f(h,(e-I)/1e3),i.uniform2f(E,L.x,L.y),i.uniform1f(g,L.hover),i.uniform1f(x,T?0:1),i.drawArrays(i.TRIANGLES,0,3)};P=requestAnimationFrame(B);let G=()=>{document.hidden?(M=!1,cancelAnimationFrame(P)):M||(M=!0,D=performance.now(),P=requestAnimationFrame(B))};document.addEventListener("visibilitychange",G);let H=e=>{e.preventDefault(),M=!1,cancelAnimationFrame(P),n(!1)};return a.addEventListener("webglcontextlost",H),()=>{M=!1,cancelAnimationFrame(P),X&&(X.onload=null),N instanceof HTMLImageElement&&C&&N.removeEventListener("load",C),y.disconnect(),window.removeEventListener("pointermove",p),a.removeEventListener("pointerleave",_),a.removeEventListener("webglcontextlost",H),document.removeEventListener("visibilitychange",G),i.deleteTexture(A),i.deleteBuffer(f),i.deleteProgram(c),i.deleteShader(u),i.deleteShader(m)}},[o]),o)?(0,r.jsx)("canvas",{ref:e,"aria-hidden":"true",className:"absolute inset-0 w-full h-full block",style:{opacity:t?1:0,transition:"opacity 400ms ease-out"}}):null}}}]);