06결정 격자 채색 — 나이(접촉 시각)를 파스텔 고리로 새기기

<main class="stage">
<div class="cd is-demo" id="cdRoot">
  <p class="cd__hint">
    <svg class="cd__ico" viewBox="0 0 256 256" aria-hidden="true"><circle cx="128" cy="128" r="16" fill="none" stroke="currentColor" stroke-width="16"/><circle cx="128" cy="128" r="48" fill="none" stroke="currentColor" stroke-width="12" opacity=".75"/><circle cx="128" cy="128" r="80" fill="none" stroke="currentColor" stroke-width="10" opacity=".5"/><circle cx="128" cy="128" r="108" fill="none" stroke="currentColor" stroke-width="8" opacity=".3"/></svg>
    <span>입자가 붙은 순간을 번호로 기록해 나이별로 색을 달리하면, 결정의 성장 연륜이 나무 나이테처럼 파스텔 동심원으로 읽힙니다</span>
  </p>
  <div class="cd__field" id="cdField" role="application" aria-label="결정 격자 채색 실험판" tabindex="0">
    <canvas class="cd__cv" id="cdCv"></canvas>
  </div>
  <div class="cd__bar">
    <span class="cd__meta">연륜 <b class="cd__val" id="cdRings"></b> · 응집 <b class="cd__val" id="cdRate"></b>/초</span>
    <span class="cd__meta cd__meta--dim">캔버스 · ImageData · putImageData</span>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 결정 격자 채색(06). @keyframes 를 아예 두지 않는다 — 움직임은 전부 캔버스 rAF 루프
// (나이(접촉 순번) 기록 DLA + 나이테 파스텔 램프 LUT + 눈가루 부유)가 만든다.
// 무대는 한겨울 밤잉크. 파스텔 팔레트는 편 319 공통 --flake-* (04·05 와 동일 값).

$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-lilac;

@include stage($stage-ink);

// ── 편 공통 파스텔 팔레트(04·05 와 동일) ──
$flake-ink:   #20242e;
$flake-dusk:  #4a516e;
$flake-core:  #f4f0fa;
$flake-halo:  #b8cce8;
$flake-mint:  #c8e0d8;
$flake-sky:   #a4bcd8;
$flake-mist:  #dce8f4;

.cd {
  --flake-ink:   #{$flake-ink};
  --flake-dusk:  #{$flake-dusk};
  --flake-core:  #{$flake-core};
  --flake-halo:  #{$flake-halo};
  --flake-mint:  #{$flake-mint};
  --flake-sky:   #{$flake-sky};
  --flake-mist:  #{$flake-mist};

  display: flex; flex-direction: column; gap: $sp-2;
  width: 100%; max-width: 424px;
}

.cd__hint {
  display: flex; align-items: center; gap: $sp-1; margin: 0;
  font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35;
  color: $flake-mist;
}
.cd__ico { width: 16px; height: 16px; flex: 0 0 auto; color: $flake-halo; }

.cd__field {
  position: relative; height: 180px;
  border-radius: $r-card; overflow: hidden;
  background: $flake-ink;
  box-shadow: inset 0 0 0 1px rgba($flake-mist, .18);
}
.cd__field:focus-visible { outline: 2px solid $flake-halo; outline-offset: 2px; }

.cd__cv { display: block; width: 100%; height: 100%; }

.cd__bar { display: flex; align-items: baseline; justify-content: space-between; gap: $sp-2; }
.cd__meta { font-size: 10px; font-weight: 500; color: rgba($flake-mist, .72); }
.cd__val { color: $flake-halo; font-weight: 700; }
.cd__meta--dim { font-size: 10px; }

@media (max-width: 340px) {
  .cd { gap: $sp-1; }
  .cd__field { height: 100px; }
  .cd__meta--dim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cd.is-still .cd__field { cursor: default !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cd {
  --flake-ink: #20242e;
  --flake-dusk: #4a516e;
  --flake-core: #f4f0fa;
  --flake-halo: #b8cce8;
  --flake-mint: #c8e0d8;
  --flake-sky: #a4bcd8;
  --flake-mist: #dce8f4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 424px;
}

.cd__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.35;
  color: #dce8f4;
}

.cd__ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #b8cce8;
}

.cd__field {
  position: relative;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  background: #20242e;
  box-shadow: inset 0 0 0 1px rgba(220, 232, 244, 0.18);
}

.cd__field:focus-visible {
  outline: 2px solid #b8cce8;
  outline-offset: 2px;
}

.cd__cv {
  display: block;
  width: 100%;
  height: 100%;
}

.cd__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cd__meta {
  font-size: 10px;
  font-weight: 500;
  color: rgba(220, 232, 244, 0.72);
}

.cd__val {
  color: #b8cce8;
  font-weight: 700;
}

.cd__meta--dim {
  font-size: 10px;
}

@media (max-width: 340px) {
  .cd {
    gap: 4px;
  }
  .cd__field {
    height: 100px;
  }
  .cd__meta--dim {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cd.is-still .cd__field {
    cursor: default !important;
  }
}

// 결정 격자 채색(06). DLA 는 붙는 순간을 기록한다 — order 배열에 셀 인덱스를 stick 순서대로 쌓고,
// 그려질 때 나이(order / 지금까지 총 응집)를 8단 파스텔 램프로 읽는다. 같은 시각에 붙은 셀은
// 같은 나이 → 결정 안에 나무 나이테 같은 동심원이 새겨진다. 성장이 다 차면 반짝 회전 후 리셋.
(function () {
  // ── 변형 상수 블록 — 아래 값 하나만 바꿔 변형 3종을 만든다 ──
  var N = 46;            // 격자 반경(셀 수) — 커질수록 나이테가 촘촘해진다
  var SPS = 300;         // 초당 응집 입자 수 — 변형 "응집 속도" 축(90 → 700)
  var RINGS = 8;         // 연륜 단수 — 나이를 몇 개의 파스텔 띠로 나눌지(6 → 12)
  // ────────────────────────────────────────────────────

  var root = document.getElementById('cdRoot');
  var field = document.getElementById('cdField');
  var cv = document.getElementById('cdCv');
  var ctx = cv.getContext('2d');
  document.getElementById('cdRings').textContent = String(RINGS);
  document.getElementById('cdRate').textContent = String(SPS);

  var SEED = 0x3190406;
  var prngState = SEED >>> 0;
  function rand() {
    prngState = (prngState + 0x6D2B79F5) >>> 0;
    var t = prngState;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  }

  var css = getComputedStyle(root);
  function tokRGB(name) {
    var s = css.getPropertyValue(name).trim();
    var hx = s.length === 4
      ? s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2) + s.charAt(3) + s.charAt(3)
      : s.slice(1);
    return [parseInt(hx.slice(0, 2), 16), parseInt(hx.slice(2, 4), 16), parseInt(hx.slice(4, 6), 16)];
  }
  var C_INK  = tokRGB('--flake-ink');
  var C_DUSK = tokRGB('--flake-dusk');
  var C_CORE = tokRGB('--flake-core');
  var C_HALO = tokRGB('--flake-halo');
  var C_MINT = tokRGB('--flake-mint');
  var C_SKY  = tokRGB('--flake-sky');
  var C_MIST = tokRGB('--flake-mist');

  // ── 격자 — 중앙 씨앗 하나에서 자라는 방사 DLA ──
  var GW = 2 * N + 8, GH = GW;              // 정사각 격자, 중심 = 씨앗
  var CX = (GW / 2) | 0, CY = CX;
  var occ = new Uint8Array(GW * GH);
  var age = new Int32Array(GW * GH);        // 셀별 나이(stick 순서, 1부터 — 0=빈칸)
  var order = [];                            // stick 순서대로 셀 인덱스를 쌓는다(나이테의 역사)
  var walkers = [];
  var WALKERS = 40;
  var phase = 0, shineT = 0;

  function idx(gx, gy) { return gy * GW + gx; }
  function respawn(w) {   // 씨앗 근처 구름에서 출발 — 멀리서 오면 프레임 예산이 새는 곳으로 걸음 낭비
    var a = rand() * 6.283, r = 6 + rand() * Math.min(10, N * 0.35);
    w.gx = CX + Math.round(Math.cos(a) * r);
    w.gy = CY + Math.round(Math.sin(a) * r);
    if (w.gx < 1 || w.gx >= GW - 1 || w.gy < 1 || w.gy >= GH - 1) { w.gx = CX + 2; w.gy = CY; }
  }
  var DX = [1, -1, 0, 0], DY = [0, 0, 1, -1];
  function stepWalker(w) {
    var d = (rand() * 4) | 0;
    var nx = w.gx + DX[d], ny = w.gy + DY[d];
    var dx = nx - CX, dy = ny - CY;
    if (dx * dx + dy * dy > N * N) { respawn(w); return false; }   // 격자 밖 → 구름으로 되돌린다
    w.gx = nx; w.gy = ny;
    var i = idx(nx, ny);
    if (occ[i]) return false;
    var nc = (occ[idx(nx - 1, ny)] ? 1 : 0) + (occ[idx(nx + 1, ny)] ? 1 : 0) +
              (occ[idx(nx, ny - 1)] ? 1 : 0) + (occ[idx(nx, ny + 1)] ? 1 : 0);
    if (!nc) return false;
    // 가지 확률 — 이웃이 적게 닿은 외곽일수록 잘 붙는다(DLA 수지상 편향)
    var p = nc === 1 ? 1.0 : nc === 2 ? 0.62 : nc === 3 ? 0.22 : 0.10;
    if (rand() >= p) return false;
    occ[i] = 1;
    order.push(i);
    age[i] = order.length;                  // 나이 = 붙은 순번 — 색의 유일한 출처
    respawn(w);
    return true;
  }
  function resetSim() {
    occ.fill(0); age.fill(0); order = [];
    occ[idx(CX, CY)] = 1; order.push(idx(CX, CY)); age[idx(CX, CY)] = 1;
    phase = 0; shineT = 0;
    walkers = [];
    for (var i = 0; i < WALKERS; i++) { var w = { gx: CX, gy: CY }; respawn(w); walkers.push(w); }
  }
  resetSim();

  function sim(dt) {
    if (phase === 1) {
      shineT += dt;
      if (shineT > 1200) resetSim();        // 완성 결정을 충분히 보여 준 다음 다음 세대
      return;
    }
    var quota = SPS * dt / 1000;
    var stuck = 0, steps = 0, maxSteps = 500000;
    var t0 = performance.now(), budgetMs = 9;
    while (stuck < quota && steps < maxSteps) {
      for (var i = 0; i < walkers.length; i++) {
        if (stepWalker(walkers[i])) stuck++;
        steps++;
        if (stuck >= quota) break;
      }
      if ((steps & 2047) === 0 && performance.now() - t0 > budgetMs) break;
    }
    if (order.length > SPS * 14) { phase = 1; shineT = 0; }   // 약 14초 치 결정이면 완성
  }

  var W = 0, H = 0, img = null, gimg = null, gctx = null, gcanvas = null;
  function fit() {
    var r = field.getBoundingClientRect();
    W = Math.max(2, Math.round(r.width));
    H = Math.max(2, Math.round(r.height));
    cv.width = W; cv.height = H;
    img = ctx.createImageData(W, H);
    var d = img.data;
    for (var i = 3; i < d.length; i += 4) d[i] = 255;
    gcanvas = document.createElement('canvas');
    gcanvas.width = GW; gcanvas.height = GH;
    gctx = gcanvas.getContext('2d');
    gimg = gctx.createImageData(GW, GH);
    var gd = gimg.data;
    for (var j = 3; j < gd.length; j += 4) gd[j] = 255;
    prngState = SEED >>> 0;
    resetSim();
  }

  // 나이 → 파스텔 램프 LUT(256단계) — 나이테 RINGS 개의 띠를 지나며 색이 바뀐다
  var lut = { r: new Uint8ClampedArray(256), g: new Uint8ClampedArray(256), b: new Uint8ClampedArray(256) };
  function buildLUT() {
    // 띠 경계마다 살짝 밝은 테(나이테 선) — 같은 나이끼리 묶여 동심원으로 보인다
    var cs = [C_DUSK, C_DUSK, C_HALO, C_MINT, C_MIST, C_SKY, C_MINT, C_CORE];
    for (var i = 0; i < 256; i++) {
      var t = i / 255;
      var band = Math.min(cs.length - 1, 1 + Math.floor(t * (cs.length - 1)));
      var c0 = cs[band - 1], c1 = cs[band];
      var f = Math.min(1, t * (cs.length - 1) - (band - 1) * 2 + 1);   // 띠 안에서 부드럽게
      var ring = t * (cs.length - 1) % 1;
      var edge = ring < 0.16 ? 0.35 * (1 - ring / 0.16) : 0;           // 띠 시작 = 밝은 나이테 선
      var r0 = c0[0] + (c1[0] - c0[0]) * f, g0 = c0[1] + (c1[1] - c0[1]) * f, b0 = c0[2] + (c1[2] - c0[2]) * f;
      lut.r[i] = r0 + (C_CORE[0] - r0) * edge;
      lut.g[i] = g0 + (C_CORE[1] - g0) * edge;
      lut.b[i] = b0 + (C_CORE[2] - b0) * edge;
    }
  }
  buildLUT();

  // 격자 → 작은 캔버스 ImageData(나이 색) → 큰 캔버스에 확대
  function drawGrid(pulse) {
    var gd = gimg.data;
    var total = Math.max(2, order.length);
    for (var gy = 0; gy < GH; gy++) {
      for (var gx = 0; gx < GW; gx++) {
        var i = gy * GW + gx, j = i << 2;
        var a = age[i];
        if (!a) { gd[j] = C_INK[0]; gd[j + 1] = C_INK[1]; gd[j + 2] = C_INK[2]; continue; }
        var t = a / total;                       // 나이 비율(0=첫 씨앗 → 1=방금 붙은 가장자리)
        var li = Math.max(0, Math.min(255, (t * 255 * pulse) | 0));
        gd[j] = lut.r[li]; gd[j + 1] = lut.g[li]; gd[j + 2] = lut.b[li];
      }
    }
    gctx.putImageData(gimg, 0, 0);
  }

  var fr = 0;
  function compose(now) {
    var d = img.data;
    // ① 무대 — 세로 그라디언트 + 중앙 성광(결정이 자라는 자리를 은은히 밝힌다)
    var topR = C_INK[0] + 3, topG = C_INK[1] + 3, topB = C_INK[2] + 6;
    var botR = C_INK[0] + (C_DUSK[0] - C_INK[0]) * 0.34, botG = C_INK[1] + (C_DUSK[1] - C_INK[1]) * 0.34, botB = C_INK[2] + (C_DUSK[2] - C_INK[2]) * 0.34;
    var breathe = 0.5 + 0.5 * Math.sin(now * 0.0011);
    var gx0 = 0.5 + 0.06 * Math.sin(now * 0.0007), gy0 = 0.5 + 0.05 * Math.cos(now * 0.0009);
    for (var y = 0; y < H; y++) {
      var ty = y / H;
      var br = topR + (botR - topR) * ty, bg = topG + (botG - topG) * ty, bb = topB + (botB - topB) * ty;
      var row = y * W, dy = (y / H - gy0) * H;
      for (var x = 0; x < W; x++) {
        var dx = (x / W - gx0) * W * 1.35;
        var q = (dx * dx + dy * dy) / (H * H * 1.6);
        var glow = Math.exp(-q) * (0.10 + 0.05 * breathe);
        var j = (row + x) << 2;
        d[j]     = br + (C_MIST[0] - br) * glow;
        d[j + 1] = bg + (C_MIST[1] - bg) * glow;
        d[j + 2] = bb + (C_MIST[2] - bb) * glow;
      }
    }
    // ② 결정 나이테 — 나이 비율에 살짝 숨쉬는 맥(색 램프 인덱스를 조금씩 흔든다)
    var pulse = 0.94 + 0.06 * Math.sin(now * 0.0023);
    drawGrid(pulse);
    var sx = W / GW, sy = H / GH;
    var ox = ((W - GW * sx) / 2) | 0, oy = ((H - GH * sy) / 2) | 0;
    for (var gy2 = 0; gy2 < GH; gy2++) {
      var yA = oy + ((gy2 * sy) | 0), yB = oy + (((gy2 + 1) * sy) | 0);
      for (var gx2 = 0; gx2 < GW; gx2++) {
        var gi = (gy2 * GW + gx2) << 2;
        if (gimg.data[gi] === C_INK[0] && gimg.data[gi + 1] === C_INK[1] && gimg.data[gi + 2] === C_INK[2]) continue;
        var R = gimg.data[gi], G = gimg.data[gi + 1], B = gimg.data[gi + 2];
        var xA = ox + ((gx2 * sx) | 0), xB = ox + (((gx2 + 1) * sx) | 0);
        for (var yy = Math.max(0, yA); yy < Math.min(H, yB); yy++) {
          var rowo = yy * W;
          for (var xx = Math.max(0, xA); xx < Math.min(W, xB); xx++) {
            var jj = (rowo + xx) << 2;
            d[jj] = R; d[jj + 1] = G; d[jj + 2] = B;
          }
        }
      }
    }
    ctx.putImageData(img, 0, 0);
    // ③ 떠다니는 눈가루 — 결정 위를 파스텔 가루가 느리게 흘러 화면이 쉬지 않는다
    for (var m = 0; m < 26; m++) {
      var ph = (m / 26 + now * 0.00006 * (1 + (m % 3) * 0.4)) % 1;
      var mx = (0.12 + 0.76 * ((m * 0.137 + now * 0.00004 * (1 + (m % 5) * 0.3)) % 1)) * W;
      var my = ph * H;
      var mr = 1 + (m % 3), ma = 0.24 + 0.16 * Math.sin(now * 0.003 + m);
      ctx.fillStyle = 'rgba(' + C_MIST + ',' + ma.toFixed(3) + ')';
      ctx.beginPath();
      ctx.arc(mx, my, mr, 0, 6.283);
      ctx.fill();
    }
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var raf = 0, prev = 0;
  function frame(now) {
    var dt = Math.min(50, now - (prev || now));
    prev = now;
    sim(dt);
    compose(now);
    fr++;
    raf = requestAnimationFrame(frame);
  }
  function stillDraw() {
    fit();
    for (var i = 0; i < 400; i++) sim(33);
    compose(0);
  }

  window.addEventListener('resize', function () { if (reduce) stillDraw(); });

  fit();
  if (reduce) {
    stillDraw();
    root.classList.add('is-still');
  } else {
    raf = requestAnimationFrame(frame);
  }
})();

// CrystalLatticeColor — vanilla 판(run/319/demo/06-snowflake-crystal-lattice-color/index.html) 의 React 포트.
// DLA 는 입자가 붙는 "순간"을 기록한다 — order 배열에 셀 인덱스를 stick 순서대로 쌓고, 그려질 때
// 나이(순번 / 지금까지 총 응집)를 8단 파스텔 LUT 로 읽는다. 같은 시각에 붙은 셀은 같은 나이 →
// 결정 안에 나무 나이테 같은 동심원이 새겨진다. 격자(저해상도) 점유를 ImageData 한 장에 그려
// 확대해 붙이고, 성장이 다 차면 반짝 회전 후 리셋한다.
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./CrystalLatticeColor.module.scss";

export type CrystalLatticeColorProps = {
  duration?: string;
  easing?: string;
  color?: string;
  n?: number;      // 격자 반경(셀 수) — 변형 "촘촘함" 축(46 커질수록 나이테가 촘촘해진다)
  sps?: number;    // 초당 응집 입자 수 — 변형 "응집 속도" 축(90 ↔ 700)
  rings?: number;  // 연륜 단수 — 나이를 몇 개의 파스텔 띠로 나눌지(6 ↔ 12)
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type Box<T> = { current: T };
type RGB = [number, number, number];
type Walker = { gx: number; gy: number };
type Colors = { ink: RGB; dusk: RGB; core: RGB; halo: RGB; mint: RGB; sky: RGB; mist: RGB };

const FIELD_LABEL = "결정 격자 채색 실험판";

function makePRNG(seed: number): () => number {
  let s = seed >>> 0;
  return function () {
    s = (s + 0x6d2b79f5) >>> 0;
    let t = s;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

export default function CrystalLatticeColor({
  duration = "2s",
  easing = "cubic-bezier(.2, .8, .2, 1)",
  color = "#a4bcd8",
  n = 46,
  sps = 300,
  rings = 8,
}: CrystalLatticeColorProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const fieldRef = useRef<HTMLDivElement | null>(null);
  const cvRef = useRef<HTMLCanvasElement | null>(null);
  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
  const sizeRef = useRef({ w: 0, h: 0 }) as Box<{ w: number; h: number }>;
  const colRef = useRef<Colors | null>(null);
  const imgRef = useRef<ImageData | null>(null) as Box<ImageData | null>;
  const gimgRef = useRef<ImageData | null>(null) as Box<ImageData | null>;
  const gctxRef = useRef<CanvasRenderingContext2D | null>(null);
  const randRef = useRef<() => number>(makePRNG(0x3190406)) as Box<() => number>;
  const rafRef = useRef(0) as Box<number>;
  const [still, setStill] = useState(false);
  const [ringsShown] = useState(rings);
  const [spsShown] = useState(sps);
  const vars: Vars = { "--duration": duration, "--easing": easing, "--color": color };

  // ── 결정 상태(ref 로 보관 — rAF 루프에서만 갱신, 리렌더 유발 안 함) ──
  const GW = 2 * n + 8, GH = GW;
  const CX = (GW / 2) | 0, CY = CX;
  const occRef = useRef<Uint8Array>(new Uint8Array(GW * GH)) as Box<Uint8Array>;
  const ageRef = useRef<Int32Array>(new Int32Array(GW * GH)) as Box<Int32Array>;   // 셀별 나이(stick 순서, 1부터 — 0=빈칸)
  const orderRef = useRef<number[]>([]) as Box<number[]>;   // stick 순서대로 셀 인덱스를 쌓는다(나이테의 역사)
  const walkersRef = useRef<Walker[]>([]) as Box<Walker[]>;
  const phaseRef = useRef(0) as Box<number>;
  const shineTRef = useRef(0) as Box<number>;
  const frRef = useRef(0) as Box<number>;
  const lutRef = useRef<{ r: Uint8ClampedArray; g: Uint8ClampedArray; b: Uint8ClampedArray } | null>(null);
  const WALKERS = 40;

  function reduced(): boolean {
    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  }

  function tokRGB(root: HTMLDivElement, name: string): RGB {
    const s = getComputedStyle(root).getPropertyValue(name).trim();
    const hx = s.length === 4
      ? s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2) + s.charAt(3) + s.charAt(3)
      : s.slice(1);
    return [parseInt(hx.slice(0, 2), 16), parseInt(hx.slice(2, 4), 16), parseInt(hx.slice(4, 6), 16)];
  }

  function idx(gx: number, gy: number): number {
    return gy * GW + gx;
  }

  function respawn(w: Walker): void {
    const rand = randRef.current;
    const a = rand() * 6.283, r = 6 + rand() * Math.min(10, n * 0.35);
    w.gx = CX + Math.round(Math.cos(a) * r);
    w.gy = CY + Math.round(Math.sin(a) * r);
    if (w.gx < 1 || w.gx >= GW - 1 || w.gy < 1 || w.gy >= GH - 1) { w.gx = CX + 2; w.gy = CY; }
  }

  const DX = [1, -1, 0, 0], DY = [0, 0, 1, -1];
  function stepWalker(w: Walker): boolean {
    const rand = randRef.current;
    const occ = occRef.current;
    const age = ageRef.current;
    const order = orderRef.current;
    const d = (rand() * 4) | 0;
    const nx = w.gx + DX[d], ny = w.gy + DY[d];
    const dx = nx - CX, dy = ny - CY;
    if (dx * dx + dy * dy > n * n) { respawn(w); return false; }   // 격자 밖 → 구름으로 되돌린다
    w.gx = nx; w.gy = ny;
    const i = idx(nx, ny);
    if (occ[i]) return false;
    const nc = (occ[idx(nx - 1, ny)] ? 1 : 0) + (occ[idx(nx + 1, ny)] ? 1 : 0) +
              (occ[idx(nx, ny - 1)] ? 1 : 0) + (occ[idx(nx, ny + 1)] ? 1 : 0);
    if (!nc) return false;
    // 가지 확률 — 이웃이 적게 닿은 외곽일수록 잘 붙는다(DLA 수지상 편향)
    const p = nc === 1 ? 1.0 : nc === 2 ? 0.62 : nc === 3 ? 0.22 : 0.10;
    if (rand() >= p) return false;
    occ[i] = 1;
    order.push(i);
    age[i] = order.length;                  // 나이 = 붙은 순번 — 색의 유일한 출처
    respawn(w);
    return true;
  }

  function resetSim(): void {
    const occ = occRef.current, age = ageRef.current;
    occ.fill(0); age.fill(0); orderRef.current = [];
    const order = orderRef.current;
    occ[idx(CX, CY)] = 1; order.push(idx(CX, CY)); age[idx(CX, CY)] = 1;
    phaseRef.current = 0; shineTRef.current = 0;
    const ws: Walker[] = [];
    for (let i = 0; i < WALKERS; i++) { const w = { gx: CX, gy: CY }; respawn(w); ws.push(w); }
    walkersRef.current = ws;
  }

  function sim(dt: number): void {
    if (phaseRef.current === 1) {
      shineTRef.current += dt;
      if (shineTRef.current > 1200) resetSim();        // 완성 결정을 충분히 보여 준 다음 다음 세대
      return;
    }
    const quota = sps * dt / 1000;
    let stuck = 0, steps = 0;
    const maxSteps = 500000;
    const t0 = performance.now(), budgetMs = 9;
    while (stuck < quota && steps < maxSteps) {
      const ws = walkersRef.current;
      for (let i = 0; i < ws.length; i++) {
        if (stepWalker(ws[i])) stuck++;
        steps++;
        if (stuck >= quota) break;
      }
      if ((steps & 2047) === 0 && performance.now() - t0 > budgetMs) break;
    }
    if (orderRef.current.length > sps * 14) { phaseRef.current = 1; shineTRef.current = 0; }   // 약 14초 치 결정이면 완성
  }

  // 나이 → 파스텔 램프 LUT(256단계) — 나이테 rings 개의 띠를 지나며 색이 바뀐다
  function buildLUT(): void {
    const col = colRef.current;
    if (!col) return;
    const lut = {
      r: new Uint8ClampedArray(256),
      g: new Uint8ClampedArray(256),
      b: new Uint8ClampedArray(256),
    };
    // 띠 경계마다 살짝 밝은 테(나이테 선) — 같은 나이끼리 묶여 동심원으로 보인다
    const cs: RGB[] = [col.dusk, col.dusk, col.halo, col.mint, col.mist, col.sky, col.mint, col.core];
    for (let i = 0; i < 256; i++) {
      const t = i / 255;
      const band = Math.min(cs.length - 1, 1 + Math.floor(t * (cs.length - 1)));
      const c0 = cs[band - 1], c1 = cs[band];
      const f = Math.min(1, t * (cs.length - 1) - (band - 1) * 2 + 1);   // 띠 안에서 부드럽게
      const ring = (t * (cs.length - 1)) % 1;
      const edge = ring < 0.16 ? 0.35 * (1 - ring / 0.16) : 0;           // 띠 시작 = 밝은 나이테 선
      const r0 = c0[0] + (c1[0] - c0[0]) * f, g0 = c0[1] + (c1[1] - c0[1]) * f, b0 = c0[2] + (c1[2] - c0[2]) * f;
      lut.r[i] = r0 + (col.core[0] - r0) * edge;
      lut.g[i] = g0 + (col.core[1] - g0) * edge;
      lut.b[i] = b0 + (col.core[2] - b0) * edge;
    }
    lutRef.current = lut;
  }

  // 격자 → 작은 캔버스 ImageData(나이 색) → 큰 캔버스에 확대
  function drawGrid(pulse: number): void {
    const gimg = gimgRef.current, col = colRef.current, lut = lutRef.current;
    if (!gimg || !col || !lut) return;
    const gd = gimg.data;
    const age = ageRef.current;
    const total = Math.max(2, orderRef.current.length);
    for (let gy = 0; gy < GH; gy++) {
      for (let gx = 0; gx < GW; gx++) {
        const i = gy * GW + gx, j = i << 2;
        const a = age[i];
        if (!a) { gd[j] = col.ink[0]; gd[j + 1] = col.ink[1]; gd[j + 2] = col.ink[2]; continue; }
        const t = a / total;                       // 나이 비율(0=첫 씨앗 → 1=방금 붙은 가장자리)
        const li = Math.max(0, Math.min(255, (t * 255 * pulse) | 0));
        gd[j] = lut.r[li]; gd[j + 1] = lut.g[li]; gd[j + 2] = lut.b[li];
      }
    }
    if (gctxRef.current) gctxRef.current.putImageData(gimg, 0, 0);
  }

  function compose(now: number): void {
    const ctx = ctxRef.current, img = imgRef.current, col = colRef.current, gimg = gimgRef.current;
    if (!ctx || !img || !col || !gimg) return;
    const W = sizeRef.current.w, H = sizeRef.current.h;
    const d = img.data;
    // ① 무대 — 세로 그라디언트 + 중앙 성광(결정이 자라는 자리를 은은히 밝힌다)
    const topR = col.ink[0] + 3, topG = col.ink[1] + 3, topB = col.ink[2] + 6;
    const botR = col.ink[0] + (col.dusk[0] - col.ink[0]) * 0.34, botG = col.ink[1] + (col.dusk[1] - col.ink[1]) * 0.34, botB = col.ink[2] + (col.dusk[2] - col.ink[2]) * 0.34;
    const breathe = 0.5 + 0.5 * Math.sin(now * 0.0011);
    const gx0 = 0.5 + 0.06 * Math.sin(now * 0.0007), gy0 = 0.5 + 0.05 * Math.cos(now * 0.0009);
    for (let y = 0; y < H; y++) {
      const ty = y / H;
      const br = topR + (botR - topR) * ty, bg = topG + (botG - topG) * ty, bb = topB + (botB - topB) * ty;
      const row = y * W, dy = (y / H - gy0) * H;
      for (let x = 0; x < W; x++) {
        const dx = (x / W - gx0) * W * 1.35;
        const q = (dx * dx + dy * dy) / (H * H * 1.6);
        const glow = Math.exp(-q) * (0.10 + 0.05 * breathe);
        const j = (row + x) << 2;
        d[j] = br + (col.mist[0] - br) * glow;
        d[j + 1] = bg + (col.mist[1] - bg) * glow;
        d[j + 2] = bb + (col.mist[2] - bb) * glow;
      }
    }
    // ② 결정 나이테 — 나이 비율에 살짝 숨쉬는 맥(색 램프 인덱스를 조금씩 흔든다)
    const pulse = 0.94 + 0.06 * Math.sin(now * 0.0023);
    drawGrid(pulse);
    const sx = W / GW, sy = H / GH;
    const ox = ((W - GW * sx) / 2) | 0, oy = ((H - GH * sy) / 2) | 0;
    for (let gy2 = 0; gy2 < GH; gy2++) {
      const yA = oy + ((gy2 * sy) | 0), yB = oy + (((gy2 + 1) * sy) | 0);
      for (let gx2 = 0; gx2 < GW; gx2++) {
        const gi = (gy2 * GW + gx2) << 2;
        if (gimg.data[gi] === col.ink[0] && gimg.data[gi + 1] === col.ink[1] && gimg.data[gi + 2] === col.ink[2]) continue;
        const R = gimg.data[gi], G = gimg.data[gi + 1], B = gimg.data[gi + 2];
        const xA = ox + ((gx2 * sx) | 0), xB = ox + (((gx2 + 1) * sx) | 0);
        for (let yy = Math.max(0, yA); yy < Math.min(H, yB); yy++) {
          const rowo = yy * W;
          for (let xx = Math.max(0, xA); xx < Math.min(W, xB); xx++) {
            const jj = (rowo + xx) << 2;
            d[jj] = R; d[jj + 1] = G; d[jj + 2] = B;
          }
        }
      }
    }
    ctx.putImageData(img, 0, 0);
    // ③ 떠다니는 눈가루 — 결정 위를 파스텔 가루가 느리게 흘러 화면이 쉬지 않는다
    for (let m = 0; m < 26; m++) {
      const ph = (m / 26 + now * 0.00006 * (1 + (m % 3) * 0.4)) % 1;
      const mx = (0.12 + 0.76 * ((m * 0.137 + now * 0.00004 * (1 + (m % 5) * 0.3)) % 1)) * W;
      const my = ph * H;
      const mr = 1 + (m % 3), ma = 0.24 + 0.16 * Math.sin(now * 0.003 + m);
      ctx.fillStyle = `rgba(${col.mist[0]},${col.mist[1]},${col.mist[2]},${ma.toFixed(3)})`;
      ctx.beginPath();
      ctx.arc(mx, my, mr, 0, 6.283);
      ctx.fill();
    }
  }

  function fit(): void {
    const field = fieldRef.current, cv = cvRef.current;
    if (!field || !cv) return;
    const r = field.getBoundingClientRect();
    const W = Math.max(2, Math.round(r.width));
    const H = Math.max(2, Math.round(r.height));
    sizeRef.current = { w: W, h: H };
    cv.width = W; cv.height = H;
    const ctx = cv.getContext("2d");
    if (!ctx) return;
    ctxRef.current = ctx;
    const img = ctx.createImageData(W, H);
    for (let i = 3; i < img.data.length; i += 4) img.data[i] = 255;
    imgRef.current = img;
    const gcanvas = document.createElement("canvas");
    gcanvas.width = GW; gcanvas.height = GH;
    const gctx = gcanvas.getContext("2d");
    if (!gctx) return;
    gctxRef.current = gctx;
    const gimg = gctx.createImageData(GW, GH);
    for (let j = 3; j < gimg.data.length; j += 4) gimg.data[j] = 255;
    gimgRef.current = gimg;
    randRef.current = makePRNG(0x3190406);
    resetSim();
  }

  const prevRef = useRef(0) as Box<number>;
  function frame(now: number): void {
    const dt = Math.min(50, now - (prevRef.current || now));
    prevRef.current = now;
    sim(dt);
    compose(now);
    frRef.current++;
    rafRef.current = requestAnimationFrame(frame);
  }
  function stillDraw(): void {
    fit();
    for (let i = 0; i < 400; i++) sim(33);
    compose(0);
  }

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    colRef.current = {
      ink: tokRGB(root, "--flake-ink"),
      dusk: tokRGB(root, "--flake-dusk"),
      core: tokRGB(root, "--flake-core"),
      halo: tokRGB(root, "--flake-halo"),
      mint: tokRGB(root, "--flake-mint"),
      sky: tokRGB(root, "--flake-sky"),
      mist: tokRGB(root, "--flake-mist"),
    };
    buildLUT();
    fit();
    function onResize(): void {
      if (reduced()) stillDraw();
    }
    window.addEventListener("resize", onResize);
    if (reduced()) {
      stillDraw();
      setStill(true);
    } else {
      rafRef.current = requestAnimationFrame(frame);
    }
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(rafRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [n, sps, rings]);

  const rootCls = still ? `${styles.root} ${styles.isStill}` : styles.root;

  return (
    <main className={styles.stage}>
      <div className={rootCls} ref={rootRef} style={vars}>
        <p className={styles.hint}>
          <svg className={styles.ico} viewBox="0 0 256 256" aria-hidden="true"><circle cx={128} cy={128} r={16} fill="none" stroke="currentColor" strokeWidth={16}/><circle cx={128} cy={128} r={48} fill="none" stroke="currentColor" strokeWidth={12} opacity={.75}/><circle cx={128} cy={128} r={80} fill="none" stroke="currentColor" strokeWidth={10} opacity={.5}/><circle cx={128} cy={128} r={108} fill="none" stroke="currentColor" strokeWidth={8} opacity={.3}/></svg>
          <span>입자가 붙은 순간을 번호로 기록해 나이별로 색을 달리하면, 결정의 성장 연륜이 나무 나이테처럼 파스텔 동심원으로 읽힙니다</span>
        </p>
        <div className={styles.field} ref={fieldRef} role="application" aria-label={FIELD_LABEL} tabIndex={0}>
          <canvas className={styles.cv} ref={cvRef}></canvas>
        </div>
        <div className={styles.bar}>
          <span className={styles.meta}>연륜 <b className={styles.val}>{ringsShown}</b> · 응집 <b className={styles.val}>{spsShown}</b>/초</span>
          <span className={styles.metaDim}>캔버스 · ImageData · putImageData</span>
        </div>
      </div>
    </main>
  );
}