From ed9463c3c296e3ef973cb852e0d66b773c24b481 Mon Sep 17 00:00:00 2001
From: Yun Chan <yunchan@twentyoz.kr>
Date: Thu, 20 Aug 2026 11:52:45 +0900
Subject: [PATCH] =?UTF-8?q?=ED=97=A4=EB=8D=94=20=EB=B0=B0=EA=B2=BD=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20+=20three.js=20=EB=A5=BC=20=EB=91=90=20?=
 =?UTF-8?q?=EA=B3=B3=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

헤더에 배경이 왜 있냐는 지적에서 시작했다.
site-header 자체는 배경이 없었고, 안쪽 유리가 불투명 판으로
폴백된 것이었다. prefers-reduced-transparency 가 참이면
(윈도우 투명 효과 끄기 등) --surface-raised 단색이 깔린다.

투명도를 줄여달라는 요청은 "불투명한 판을 깔아라"가 아니다.
배경에 가까운 톤으로 낮추고 형태는 테두리와 그림자가 유지한다.
떠 있는 헤더는 더 가깝게 맞췄다.

three.js
- 공용 부트스트랩을 src/lib/shader-plane.ts 로 추출했다.
  references/three.md 가 권하는 구조를 그대로 구현한 것이다.
  지연 로드 · DPR 클램프 1.5 · 화면 밖이면 정지 · 실패 시 CSS 폴백
- 히어로: 광원 두 개가 흐르고 하나가 포인터를 느리게 따라온다
- 재료: 좌표를 노이즈로 밀어 유리 너머의 결을 만든다
- 두 셰이더가 같은 three 청크를 공유한다. 네트워크 요청 1건

--glow-2 를 토큰으로 승격해 셰이더의 하드코딩 색을 없앴다.
---
 apps/site/src/components/Hero.astro      | 135 +++++---------------
 apps/site/src/components/Materials.astro |  58 ++++++++-
 apps/site/src/lib/shader-plane.ts        | 150 +++++++++++++++++++++++
 apps/site/src/styles/base.css            |  16 ++-
 apps/site/src/styles/tokens.css          |   2 +
 5 files changed, 247 insertions(+), 114 deletions(-)
 create mode 100644 apps/site/src/lib/shader-plane.ts

diff --git a/apps/site/src/components/Hero.astro b/apps/site/src/components/Hero.astro
index 993c430..695096c 100644
--- a/apps/site/src/components/Hero.astro
+++ b/apps/site/src/components/Hero.astro
@@ -89,7 +89,7 @@ const { c, ui } = Astro.props;
       radial-gradient(46vw 40vw at 22% 18%,
         color-mix(in oklab, var(--accent) 40%, transparent), transparent 66%),
       radial-gradient(40vw 38vw at 82% 30%,
-        color-mix(in oklab, #6E7BFF 32%, transparent), transparent 64%);
+        color-mix(in oklab, var(--glow-2) 32%, transparent), transparent 64%);
     filter: blur(28px);
   }
   .hero-canvas { opacity: 0; transition: opacity 1.2s var(--ease-soft); }
@@ -156,128 +156,51 @@ const { c, ui } = Astro.props;
 </style>
 
 <script>
-  // 배경 셰이더. 이 페이지의 유일한 WebGL 컨텍스트다.
-  // 초기 번들에 three 를 넣지 않고, 첫 화면이 그려진 뒤에 받는다.
-  // LCP 는 h1 이 가져간다. 캔버스는 배경 레이어일 뿐이다.
+  // 배경 셰이더. 광원 두 개가 서로 다른 속도로 흐르고 포인터를 느리게 따라온다.
+  // three 는 초기 번들에 없다. LCP 는 h1 이 가져가고 캔버스는 배경 레이어다.
+  import { mountShaderPlane, GLSL_NOISE } from "../lib/shader-plane";
+
   const canvas = document.getElementById("hero-canvas") as HTMLCanvasElement | null;
-  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  if (canvas && !reduce) {
-    const kick = () => void start();
-    if ("requestIdleCallback" in window) {
-      (window as unknown as { requestIdleCallback: (cb: () => void, o?: object) => void })
-        .requestIdleCallback(kick, { timeout: 1800 });
-    } else {
-      setTimeout(kick, 900);
-    }
-  }
-
-  async function start() {
-    if (!canvas) return;
-    let THREE: typeof import("three");
-    try {
-      THREE = await import("three");
-    } catch {
-      return; // 폴백 그라디언트로 남는다
-    }
-
-    let renderer: import("three").WebGLRenderer;
-    try {
-      renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: true });
-    } catch {
-      return; // WebGL 이 없으면 폴백으로 남는다
-    }
-
-    const css = getComputedStyle(document.documentElement);
-    const col = (name: string, fallback: string) =>
-      new THREE.Color((css.getPropertyValue(name).trim() || fallback) as string);
-
-    const scene = new THREE.Scene();
-    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-
-    const material = new THREE.ShaderMaterial({
-      transparent: true,
-      uniforms: {
-        uTime: { value: 0 },
-        uA: { value: col("--accent", "#4FD6C4") },
-        uB: { value: new THREE.Color("#6E7BFF") },
-        uAspect: { value: 1 },
-      },
-      vertexShader: `
-        varying vec2 vUv;
-        void main() {
-          vUv = uv;
-          gl_Position = vec4(position, 1.0);
-        }
-      `,
-      fragmentShader: `
+  if (canvas) {
+    mountShaderPlane({
+      canvas,
+      pointer: true,
+      speed: 1,
+      rootMargin: "0px",
+      colors: { uA: "--accent", uB: "--glow-2" },
+      fragment: `
         precision mediump float;
         varying vec2 vUv;
         uniform float uTime;
         uniform float uAspect;
+        uniform vec2 uPointer;
         uniform vec3 uA;
         uniform vec3 uB;
-
-        // 값 노이즈. 라이브러리를 끌어오지 않는다
-        float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
-        float noise(vec2 p) {
-          vec2 i = floor(p), f = fract(p);
-          vec2 u = f * f * (3.0 - 2.0 * f);
-          return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x),
-                     mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y);
-        }
-        float fbm(vec2 p) {
-          float v = 0.0, a = 0.5;
-          for (int i = 0; i < 4; i++) { v += a * noise(p); p *= 2.03; a *= 0.5; }
-          return v;
-        }
+        ${GLSL_NOISE}
 
         void main() {
           vec2 p = vUv;
           p.x *= uAspect;
-          float t = uTime * 0.035;
+          float t = uTime * 0.045;
 
-          // 두 광원이 서로 다른 속도로 흐른다
-          float f1 = fbm(p * 1.9 + vec2(t, -t * 0.6));
-          float f2 = fbm(p * 2.4 - vec2(t * 0.8, t * 1.1) + f1 * 0.5);
+          vec2 mouse = uPointer;
+          mouse.x *= uAspect;
 
-          float blobA = smoothstep(0.62, 0.16, distance(p, vec2(0.30 * uAspect, 0.34)) + f1 * 0.34);
-          float blobB = smoothstep(0.58, 0.14, distance(p, vec2(0.78 * uAspect, 0.52)) + f2 * 0.30);
+          float f1 = fbm(p * 1.8 + vec2(t, -t * 0.6));
+          float f2 = fbm(p * 2.3 - vec2(t * 0.8, t * 1.1) + f1 * 0.55);
 
-          vec3 col = uA * blobA + uB * blobB * 0.85;
-          float alpha = clamp(blobA + blobB, 0.0, 1.0) * 0.72;
+          // 첫 광원은 포인터 쪽으로 조금 끌려간다
+          vec2 c1 = mix(vec2(0.30 * uAspect, 0.42), mouse, 0.22);
+          vec2 c2 = vec2(0.80 * uAspect, 0.30);
+
+          float a = smoothstep(0.70, 0.10, distance(p, c1) + f1 * 0.36);
+          float b = smoothstep(0.64, 0.08, distance(p, c2) + f2 * 0.32);
+
+          vec3 col = uA * a + uB * b * 0.9;
+          float alpha = clamp(a * 1.15 + b, 0.0, 1.0) * 0.85;
           gl_FragColor = vec4(col, alpha);
         }
       `,
     });
-
-    scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material));
-
-    const fit = () => {
-      const r = canvas.getBoundingClientRect();
-      if (!r.width || !r.height) return;
-      // DPR 클램프. 3 을 그대로 쓰면 픽셀이 네 배가 된다
-      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
-      renderer.setSize(r.width, r.height, false);
-      material.uniforms["uAspect"]!.value = r.width / r.height;
-    };
-    fit();
-    addEventListener("resize", fit, { passive: true });
-
-    let visible = true;
-    document.addEventListener("visibilitychange", () => { visible = !document.hidden; });
-    // 히어로가 화면 밖으로 나가면 그리지 않는다
-    let onScreen = true;
-    new IntersectionObserver(
-      (es) => { onScreen = es.some((e) => e.isIntersecting); },
-      { threshold: 0 },
-    ).observe(canvas);
-
-    canvas.classList.add("is-live");
-    renderer.setAnimationLoop((ms) => {
-      if (!visible || !onScreen) return;
-      material.uniforms["uTime"]!.value = ms * 0.001;
-      renderer.render(scene, camera);
-    });
   }
 </script>
diff --git a/apps/site/src/components/Materials.astro b/apps/site/src/components/Materials.astro
index b744774..f5f2732 100644
--- a/apps/site/src/components/Materials.astro
+++ b/apps/site/src/components/Materials.astro
@@ -16,6 +16,8 @@ const { c } = Astro.props;
 
   <div class="full stage glass">
     <div class="stage-fallback" aria-hidden="true"></div>
+    {/* GPU 가 만드는 재질. WebGL 이 없으면 위 그라디언트가 그대로 결과물이다 */}
+    <canvas id="mat-canvas" class="stage-canvas" aria-hidden="true"></canvas>
 
     <ul class="tiles">
       {
@@ -87,11 +89,12 @@ const { c } = Astro.props;
     max-width: 1180px;
     width: 100%;
     margin-inline: auto;
-    padding: var(--space-6) var(--space-4);
+    padding: var(--space-5) var(--space-4);
     border-radius: var(--radius-shell);
     overflow: hidden;
   }
-  .stage-fallback {
+  .stage-fallback,
+  .stage-canvas {
     position: absolute;
     inset: 0;
     z-index: -1;
@@ -106,6 +109,9 @@ const { c } = Astro.props;
       var(--surface-raised);
   }
 
+  .stage-canvas { opacity: 0; transition: opacity var(--dur-slow) var(--ease-soft); }
+  .stage-canvas.is-live { opacity: 1; }
+
   /* 3개 항목에 3개 셀. 빈 칸이 생기지 않고 균등 3열도 아니다 */
   .tiles {
     list-style: none;
@@ -122,8 +128,8 @@ const { c } = Astro.props;
   .tile:nth-child(2) { grid-area: top; }
   .tile:nth-child(3) { grid-area: bottom; }
   /* 큰 셀은 더 넓은 화면을 갖는다 */
-  .tile:nth-child(1) .swatch { aspect-ratio: 5 / 4; }
-  .tile:nth-child(n + 2) .swatch { aspect-ratio: 16 / 7; }
+  .tile:nth-child(1) .swatch { aspect-ratio: 16 / 11; }
+  .tile:nth-child(n + 2) .swatch { aspect-ratio: 16 / 6; }
   .tile { display: grid; gap: var(--space-2); align-content: start; }
   .tile .shell { box-shadow: var(--glass-hi), var(--shadow-2); }
   .tile .core { overflow: hidden; }
@@ -156,3 +162,47 @@ const { c } = Astro.props;
     .tile:nth-child(n + 2) .swatch { aspect-ratio: 5 / 4; }
   }
 </style>
+
+<script>
+  // 무대 배경. 유리 표면을 지나는 빛의 굴절을 흉내낸다.
+  // 히어로와 같은 모듈, 같은 three 청크를 쓴다. 새로 받는 것은 없다.
+  import { mountShaderPlane, GLSL_NOISE } from "../lib/shader-plane";
+
+  const canvas = document.getElementById("mat-canvas") as HTMLCanvasElement | null;
+  if (canvas) {
+    mountShaderPlane({
+      canvas,
+      speed: 0.7,
+      colors: { uA: "--accent", uB: "--glow-2" },
+      fragment: `
+        precision mediump float;
+        varying vec2 vUv;
+        uniform float uTime;
+        uniform float uAspect;
+        uniform vec3 uA;
+        uniform vec3 uB;
+        ${GLSL_NOISE}
+
+        void main() {
+          vec2 p = vUv;
+          p.x *= uAspect;
+          float t = uTime * 0.06;
+
+          // 좌표 자체를 노이즈로 밀어 굴절처럼 보이게 한다
+          vec2 warp = vec2(fbm(p * 2.2 + t), fbm(p * 2.2 - t + 4.7));
+          vec2 q = p + (warp - 0.5) * 0.42;
+
+          // 밀린 좌표 위에 얇은 띠를 얹는다. 유리 너머의 결이다
+          float band = sin((q.x + q.y) * 7.0 + uTime * 0.35) * 0.5 + 0.5;
+          band = smoothstep(0.35, 0.95, band);
+
+          float depth = smoothstep(0.1, 1.0, fbm(q * 1.6 - t * 0.5));
+
+          vec3 col = mix(uB, uA, depth);
+          float alpha = (0.16 + band * 0.22) * (0.55 + depth * 0.45);
+          gl_FragColor = vec4(col, alpha);
+        }
+      `,
+    });
+  }
+</script>
diff --git a/apps/site/src/lib/shader-plane.ts b/apps/site/src/lib/shader-plane.ts
new file mode 100644
index 0000000..4be7545
--- /dev/null
+++ b/apps/site/src/lib/shader-plane.ts
@@ -0,0 +1,150 @@
+/**
+ * 셰이더 플레인 부트스트랩.
+ *
+ * 스킬의 references/three.md 가 권하는 그 구조다.
+ *   - three 는 초기 번들에 없다. 화면에 가까워질 때만 받는다
+ *   - WebGL 이 없거나 모션을 줄이는 설정이면 아예 받지 않는다
+ *   - DPR 를 클램프한다. 3 을 그대로 쓰면 픽셀이 네 배가 된다
+ *   - 화면 밖이거나 탭이 숨으면 그리지 않는다
+ *   - 실패하면 조용히 물러난다. CSS 폴백이 그대로 결과물이 된다
+ *
+ * 무거운 씬을 임포트하지 않고 평면 하나에 프래그먼트 셰이더만 얹는다.
+ */
+
+export interface ShaderPlaneOptions {
+  canvas: HTMLCanvasElement;
+  /** GLSL 프래그먼트 셰이더. vUv, uTime, uAspect, uPointer 를 받는다 */
+  fragment: string;
+  /** CSS 커스텀 프로퍼티에서 읽어 vec3 로 넘길 색 */
+  colors?: Record<string, string>;
+  /** 포인터를 따라가게 할지. 히어로처럼 큰 면적에만 쓴다 */
+  pointer?: boolean;
+  /** 시간 진행 속도 배수 */
+  speed?: number;
+  /** 미리 받아둘 거리 */
+  rootMargin?: string;
+}
+
+const VERTEX = `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 1.0);
+  }
+`;
+
+/** 두 셰이더가 공유하는 값 노이즈. 라이브러리를 끌어오지 않는다 */
+export const GLSL_NOISE = `
+  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+  float noise(vec2 p) {
+    vec2 i = floor(p), f = fract(p);
+    vec2 u = f * f * (3.0 - 2.0 * f);
+    return mix(mix(hash(i), hash(i + vec2(1, 0)), u.x),
+               mix(hash(i + vec2(0, 1)), hash(i + vec2(1, 1)), u.x), u.y);
+  }
+  float fbm(vec2 p) {
+    float v = 0.0, a = 0.5;
+    for (int i = 0; i < 4; i++) { v += a * noise(p); p *= 2.03; a *= 0.5; }
+    return v;
+  }
+`;
+
+export function mountShaderPlane(opts: ShaderPlaneOptions): void {
+  const { canvas } = opts;
+  if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+  const io = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((e) => e.isIntersecting)) return;
+      io.disconnect();
+      void boot(opts);
+    },
+    { rootMargin: opts.rootMargin ?? "300px 0px" },
+  );
+  io.observe(canvas);
+}
+
+async function boot(opts: ShaderPlaneOptions): Promise<void> {
+  const { canvas, fragment, colors = {}, pointer = false, speed = 1 } = opts;
+
+  let THREE: typeof import("three");
+  try {
+    THREE = await import("three");
+  } catch {
+    return; // CSS 폴백이 그대로 결과물이 된다
+  }
+
+  let renderer: import("three").WebGLRenderer;
+  try {
+    renderer = new THREE.WebGLRenderer({ canvas, antialias: false, alpha: true });
+  } catch {
+    return; // WebGL 이 없는 환경
+  }
+
+  const css = getComputedStyle(document.documentElement);
+  const uniforms: Record<string, { value: unknown }> = {
+    uTime: { value: 0 },
+    uAspect: { value: 1 },
+    uPointer: { value: new THREE.Vector2(0.5, 0.5) },
+  };
+  for (const [name, cssVar] of Object.entries(colors)) {
+    const raw = css.getPropertyValue(cssVar).trim();
+    uniforms[name] = { value: new THREE.Color(raw || "#4FD6C4") };
+  }
+
+  const material = new THREE.ShaderMaterial({
+    transparent: true,
+    uniforms,
+    vertexShader: VERTEX,
+    fragmentShader: fragment,
+  });
+
+  const scene = new THREE.Scene();
+  scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material));
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+
+  const fit = () => {
+    const r = canvas.getBoundingClientRect();
+    if (!r.width || !r.height) return;
+    renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
+    renderer.setSize(r.width, r.height, false);
+    (uniforms["uAspect"] as { value: number }).value = r.width / r.height;
+  };
+  fit();
+  addEventListener("resize", fit, { passive: true });
+
+  if (pointer) {
+    const target = new THREE.Vector2(0.5, 0.5);
+    addEventListener(
+      "pointermove",
+      (e) => {
+        const r = canvas.getBoundingClientRect();
+        target.set((e.clientX - r.left) / r.width, 1 - (e.clientY - r.top) / r.height);
+      },
+      { passive: true },
+    );
+    // 매 프레임 목표값으로 조금씩 따라간다. 즉시 반응하면 값싸 보인다
+    material.userData["follow"] = () => {
+      const p = uniforms["uPointer"] as { value: import("three").Vector2 };
+      p.value.lerp(target, 0.045);
+    };
+  }
+
+  let tabVisible = true;
+  document.addEventListener("visibilitychange", () => {
+    tabVisible = !document.hidden;
+  });
+
+  let onScreen = true;
+  new IntersectionObserver((es) => {
+    onScreen = es.some((e) => e.isIntersecting);
+  }).observe(canvas);
+
+  canvas.classList.add("is-live");
+  renderer.setAnimationLoop((ms) => {
+    if (!tabVisible || !onScreen) return;
+    (material.userData["follow"] as (() => void) | undefined)?.();
+    (uniforms["uTime"] as { value: number }).value = (ms * 0.001) * speed;
+    renderer.render(scene, camera);
+  });
+}
diff --git a/apps/site/src/styles/base.css b/apps/site/src/styles/base.css
index 901e992..1cbe570 100644
--- a/apps/site/src/styles/base.css
+++ b/apps/site/src/styles/base.css
@@ -55,7 +55,7 @@ body::before {
     radial-gradient(58vw 46vw at 14% -6%,
       color-mix(in oklab, var(--accent) 26%, transparent), transparent 68%),
     radial-gradient(52vw 44vw at 92% 8%,
-      color-mix(in oklab, #6E7BFF 20%, transparent), transparent 66%),
+      color-mix(in oklab, var(--glow-2) 20%, transparent), transparent 66%),
     radial-gradient(70vw 60vw at 62% 108%,
       color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%);
 }
@@ -210,13 +210,18 @@ a:hover { color: var(--accent); }
   mask-composite: exclude;
 }
 
-/* 투명도를 줄여달라는 사용자에게는 불투명 판으로 준다 */
+/* 투명도를 줄여달라는 요청에 불투명한 판을 깔면 그냥 상자가 된다.
+   배경에 가까운 톤으로 낮추고 형태는 테두리와 그림자가 유지한다. */
 @media (prefers-reduced-transparency: reduce) {
   .glass {
-    background: var(--surface-raised);
+    background: color-mix(in oklab, var(--surface) 84%, var(--ink));
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
+  /* 떠 있는 헤더는 배경과 더 가깝게. 여기 판이 깔리면 즉시 눈에 띈다 */
+  .site-header .glass {
+    background: color-mix(in oklab, var(--surface) 93%, var(--ink));
+  }
 }
 @supports not (backdrop-filter: blur(1px)) {
   .glass { background: var(--surface-raised); }
@@ -241,7 +246,10 @@ a:hover { color: var(--accent); }
   box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
 }
 @media (prefers-reduced-transparency: reduce) {
-  .shell { background: var(--surface-raised); backdrop-filter: none; }
+  .shell {
+    background: color-mix(in oklab, var(--surface) 88%, var(--ink));
+    backdrop-filter: none;
+  }
 }
 
 /* ---- 진입 연출 ----------------------------------------------
diff --git a/apps/site/src/styles/tokens.css b/apps/site/src/styles/tokens.css
index 78d8270..9d971b8 100644
--- a/apps/site/src/styles/tokens.css
+++ b/apps/site/src/styles/tokens.css
@@ -33,6 +33,8 @@
   --accent-ink:         #04211D;
   --accent-inverse:     #0E7A6E;
   --accent-ink-inverse: #FFFFFF;
+  /* 셰이더가 쓰는 두 번째 광색. 강조색이 아니라 광원이다 */
+  --glow-2: #6E7BFF;
 
   /* ---- 유리 ------------------------------------------------
      backdrop-filter 만으로는 흐린 유리다. 굴절은 SVG 가 만든다. */