06Cloth ripple

<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <symbol id="ico-hand" viewBox="0 0 256 256" fill="currentColor"><g><path d="M216 116v36a80 80 0 0 1-80 80c-44.18 0-55.81-24-93.32-90a20 20 0 0 1 34.64-20L96 152V44a20 20 0 0 1 40 0v56a20 20 0 0 1 40 0v16a20 20 0 0 1 40 0" opacity=".2"/><path d="M196 88a27.86 27.86 0 0 0-13.35 3.39A28 28 0 0 0 144 74.7V44a28 28 0 0 0-56 0v80l-3.82-6.13A28 28 0 0 0 35.73 146l4.67 8.23C74.81 214.89 89.05 240 136 240a88.1 88.1 0 0 0 88-88v-36a28 28 0 0 0-28-28m12 64a72.08 72.08 0 0 1-72 72c-37.63 0-47.84-18-81.68-77.68l-4.69-8.27V138A12 12 0 0 1 54 121.61a11.9 11.9 0 0 1 6-1.6a12 12 0 0 1 10.41 6a2 2 0 0 0 .14.23l18.67 30A8 8 0 0 0 104 152V44a12 12 0 0 1 24 0v68a8 8 0 0 0 16 0v-12a12 12 0 0 1 24 0v20a8 8 0 0 0 16 0v-4a12 12 0 0 1 24 0Z"/></g></symbol>
    <symbol id="ico-reset" viewBox="0 0 256 256" fill="currentColor"><g><path d="M232 136a104 104 0 1 1-38.17-80.55L208 60v-4a8 8 0 0 1 16 0v34a8 8 0 0 1-8 8h-34a8 8 0 0 1 0-16h7.6l-8.89-7.4A88 88 0 1 0 216 136a8 8 0 0 1 16 0Z" opacity=".2"/><path d="M232 136a104 104 0 1 1-38.17-80.55L208 60v-4a8 8 0 0 1 16 0v34a8 8 0 0 1-8 8h-34a8 8 0 0 1 0-16h7.6l-8.89-7.4A88 88 0 1 0 216 136a8 8 0 0 1 16 0Z"/></g></symbol>
  </defs>
</svg>
<main class="stage">
<div class="cl is-demo" id="cl">
  <p class="cl__hint"><svg class="cl__ico" aria-hidden="true"><use href="#ico-hand"/></svg><span>Rub the board and the dot grid ripples, the pull between neighbors spreading the wave</span></p>
  <div class="cl__field" id="field" role="application" aria-label="Cloth grid board" tabindex="0">
    <span class="cl__pin" aria-hidden="true"></span>
    <span class="cl__cursor" id="cursor" aria-hidden="true"><svg class="cl__cursorIco"><use href="#ico-hand"/></svg></span>
    <span class="cl__dots" id="dots" aria-hidden="true"></span>
  </div>
  <div class="cl__bar">
    <button class="cl__reset" id="reset" type="button">
      <svg class="cl__ico" aria-hidden="true"><use href="#ico-reset"/></svg><span>Let it settle</span>
    </button>
  </div>
</div>
</main>

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

// 천 출렁이기 — 맨 윗줄이 고정점(핀)인 점 격자. 커서 반경 안의 점을 밀고,
// 이웃 변위 끌림(가로 실 두 개 + 윗점) 이 파동을 번지게 하며 제자리 스프링이 잡아당긴다.
// 점마다 translate 오프셋 하나만 쓴다. 격자 미리보기(.is-demo)는 행별 위상이 어긋난 사인 물결을
// 키프레임으로 재생한다 — 아래 행일수록 진폭이 커지는 게 고정점에서 멀수록 출렁이는 천의 모양새다.

$duration: $dur-loop;
$easing: ease-in-out;
$color: $subject-blue;

@include stage($stage-paper);

.cl { display: flex; flex-direction: column; gap: $sp-3; width: 100%; max-width: 424px; }
.cl__hint {
  display: flex; align-items: center; gap: $sp-1; margin: 0;
  font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); color: $subject-ink;
}
.cl__ico { width: 16px; height: 16px; flex: 0 0 auto; color: $color; }

.cl__field {
  position: relative; height: 176px; border-radius: $r-card;
  background: rgba($subject-blue, .05);
  box-shadow: inset 0 0 0 1px rgba($subject-ink, .12);
  overflow: hidden; touch-action: none;
}
.cl__field:focus-visible { outline: 2px solid $color; outline-offset: 2px; }

.cl__pin {
  position: absolute; left: 0; right: 0; top: 10px; height: 4px; margin: 0 $sp-2;
  border-radius: $r-pill; background: rgba($subject-ink, .3);
}
.cl__dot {
  position: absolute; left: 0; top: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%; background: $color;
  transform: translate(var(--hx), var(--hy));
}
// 고정점(첫 행)은 진폭 0 — 핀에 꽂힌 천의 윗변
.cl__dot--pin { background: $subject-ink; }
.cl__cursor {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba($subject-ink, .85); color: $stage-paper;
  transform: translate(-60px, -60px);
  pointer-events: none;
}
.cl__cursorIco { width: 14px; height: 14px; }

.cl__bar { display: flex; align-items: center; justify-content: flex-end; gap: $sp-2; flex-wrap: wrap; }
.cl__reset {
  display: inline-flex; align-items: center; gap: $sp-1; border: 0; border-radius: $r-pill;
  padding: $sp-1 $sp-3; background: $color; color: $stage-paper; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: clamp(10px, 2.6vw, 11px); line-height: 1;
}
.cl__reset .cl__ico { color: $stage-paper; }

// ── 격자 미리보기 루프 ─────────────────────────────────────────────
// 행 r 의 진폭(--amp) 과 위상(-r * 90ms) 으로 아래로 갈수록 크고 늦게 흔들리는 물결.
// 12fps 표본에서 2초에 두 번 왕복이라 광과민성 한계(초당 3회) 아래다.
.cl.is-demo .cl__dot:not(.cl__dot--pin) {
  animation-name: clWave; animation-duration: $duration; animation-timing-function: $easing;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--r) * -90ms);
  --amp: calc(var(--r) * 5px);
}
@keyframes clWave {
  0%   { transform: translate(var(--hx), var(--hy)); }
  25%  { transform: translate(var(--hx), calc(var(--hy) - var(--amp))); }
  50%  { transform: translate(var(--hx), var(--hy)); }
  75%  { transform: translate(var(--hx), calc(var(--hy) + var(--amp))); }
  100% { transform: translate(var(--hx), var(--hy)); }
}
// 손 커서는 물결을 따라 천 위를 한 바퀴 쓸고 지나간다 — 좌우 왕복이라 경계가 닫혀 있다
.cl.is-demo .cl__cursor {
  animation-name: clSweep; animation-duration: $duration; animation-timing-function: $ease-out;
  animation-iteration-count: infinite;
}
@keyframes clSweep {
  0%   { transform: translate(20px, 120px); }
  42%  { transform: translate(380px, 60px); }
  50%  { transform: translate(380px, 60px); }
  92%  { transform: translate(20px, 120px); }
  100% { transform: translate(20px, 120px); }
}

@media (max-width: 340px) {
  .cl { gap: $sp-2; }
  .cl__field { height: 104px; }
  .cl__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
  .cl__cursor { width: 22px; height: 22px; }
  .cl__cursorIco { width: 12px; height: 12px; }
}

// reduce 에서는 가만히 멈춘 격자 한 장을 둔다
@media (prefers-reduced-motion: reduce) {
  .cl.is-demo .cl__dot,
  .cl.is-demo .cl__cursor { animation: none !important; }
  .cl.is-demo .cl__dot { transform: translate(var(--hx), var(--hy)) !important; }
  .cl.is-demo .cl__cursor { transform: translate(20px, 40px) !important; opacity: .5 !important; }
}

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

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

.cl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 424px;
}

.cl__hint {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  color: #17141a;
}

.cl__ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #2f6df6;
}

.cl__field {
  position: relative;
  height: 176px;
  border-radius: 16px;
  background: rgba(47, 109, 246, 0.05);
  box-shadow: inset 0 0 0 1px rgba(23, 20, 26, 0.12);
  overflow: hidden;
  touch-action: none;
}

.cl__field:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: 2px;
}

.cl__pin {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  height: 4px;
  margin: 0 8px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.3);
}

.cl__dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #2f6df6;
  transform: translate(var(--hx), var(--hy));
}

.cl__dot--pin {
  background: #17141a;
}

.cl__cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(23, 20, 26, 0.85);
  color: #ffffff;
  transform: translate(-60px, -60px);
  pointer-events: none;
}

.cl__cursorIco {
  width: 14px;
  height: 14px;
}

.cl__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.cl__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 999px;
  padding: 4px 12px;
  background: #2f6df6;
  color: #ffffff;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(10px, 2.6vw, 11px);
  line-height: 1;
}

.cl__reset .cl__ico {
  color: #ffffff;
}

.cl.is-demo .cl__dot:not(.cl__dot--pin) {
  animation-name: clWave;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--r) * -90ms);
  --amp: calc(var(--r) * 5px);
}

@keyframes clWave {
  0% {
    transform: translate(var(--hx), var(--hy));
  }
  25% {
    transform: translate(var(--hx), calc(var(--hy) - var(--amp)));
  }
  50% {
    transform: translate(var(--hx), var(--hy));
  }
  75% {
    transform: translate(var(--hx), calc(var(--hy) + var(--amp)));
  }
  100% {
    transform: translate(var(--hx), var(--hy));
  }
}
.cl.is-demo .cl__cursor {
  animation-name: clSweep;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

@keyframes clSweep {
  0% {
    transform: translate(20px, 120px);
  }
  42% {
    transform: translate(380px, 60px);
  }
  50% {
    transform: translate(380px, 60px);
  }
  92% {
    transform: translate(20px, 120px);
  }
  100% {
    transform: translate(20px, 120px);
  }
}
@media (max-width: 340px) {
  .cl {
    gap: 8px;
  }
  .cl__field {
    height: 104px;
  }
  .cl__dot {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
  }
  .cl__cursor {
    width: 22px;
    height: 22px;
  }
  .cl__cursorIco {
    width: 12px;
    height: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cl.is-demo .cl__dot,
  .cl.is-demo .cl__cursor {
    animation: none !important;
  }
  .cl.is-demo .cl__dot {
    transform: translate(var(--hx), var(--hy)) !important;
  }
  .cl.is-demo .cl__cursor {
    transform: translate(20px, 40px) !important;
    opacity: 0.5 !important;
  }
}

var root = document.getElementById('cl');
var field = document.getElementById('field');
var dotsBox = document.getElementById('dots');
var cursor = document.getElementById('cursor');
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
// 점 격자 12×5 — 맨 윗줄은 고정점(핀). 나머지는 제자리 스프링 + 이웃 끌림으로 파동이 번진다
var COLS = 12, ROWS = 5, dots = [];
function homeXY(c, r) {
  return {
    x: (c + 0.5) * field.clientWidth / COLS,
    y: 14 + r * (field.clientHeight - 22) / (ROWS - 1)
  };
}
for (var r = 0; r < ROWS; r++) {
  for (var c = 0; c < COLS; c++) {
    var el = document.createElement('i');
    var home = homeXY(c, r);
    el.className = 'cl__dot' + (r === 0 ? ' cl__dot--pin' : '');
    el.style.setProperty('--hx', home.x.toFixed(1) + 'px');
    el.style.setProperty('--hy', home.y.toFixed(1) + 'px');
    el.style.setProperty('--r', String(r));
    dotsBox.appendChild(el);
    dots.push({ el: el, c: c, r: r, hx: home.x, hy: home.y, ox: 0, oy: 0, vx: 0, vy: 0 });
  }
}
var ptr = { x: -60, y: -60 }, last = 0, running = false, idleAt = 0;

function paint() {
  for (var i = 0; i < dots.length; i++) {
    var d = dots[i];
    d.el.style.transform = 'translate(calc(var(--hx) + ' + d.ox.toFixed(1) + 'px), calc(var(--hy) + ' + d.oy.toFixed(1) + 'px))';
  }
  cursor.style.transform = 'translate(' + ptr.x + 'px, ' + ptr.y + 'px)';
}
function wake() {
  root.classList.remove('is-demo');
  if (reduce.matches) { paint(); return false; }
  idleAt = performance.now();
  if (!running) { running = true; last = performance.now(); requestAnimationFrame(step); }
  return true;
}
function step(now) {
  var dt = Math.min((now - last) / 1000, 0.033);
  last = now;
  var lively = now - idleAt < 1400, allCalm = true;
  for (var i = 0; i < dots.length; i++) {
    var d = dots[i];
    if (d.r === 0) { continue; }   // 고정점은 안 흔든다
    var x = d.hx + d.ox, y = d.hy + d.oy;
    // 커서 반경 36px 안의 점을 밀어낸다 — 커서가 지나가는 길이 파동의 시작점이다
    var dx = x - ptr.x, dy = y - ptr.y, dist2 = dx * dx + dy * dy;
    if (dist2 < 1296 && dist2 > 0.01) {
      var dist = Math.sqrt(dist2), push = (1 - dist / 36) * 900;
      d.vx += (dx / dist) * push * dt;
      d.vy += (dy / dist) * push * dt;
      allCalm = false;
    }
    // 이웃 끌림 — Left·Right·위 점의 현재 변위를 조금 따라간다 (천의 가로 실)
    var L = dots[d.r * COLS + Math.max(0, d.c - 1)];
    var R = dots[d.r * COLS + Math.min(COLS - 1, d.c + 1)];
    var U = dots[Math.max(0, d.r - 1) * COLS + d.c];
    d.vx += ((L.ox + R.ox) / 2 - d.ox) * 60 * dt;
    d.vy += ((L.oy + R.oy + U.oy) / 3 - d.oy) * 60 * dt;
    // 제자리 스프링 + Damping
    d.vx += -d.ox * 90 * dt; d.vy += -d.oy * 90 * dt;
    d.vx *= 0.9; d.vy *= 0.9;
    d.ox += d.vx * dt; d.oy += d.vy * dt;
    if (Math.abs(d.ox) + Math.abs(d.oy) > 0.25 || Math.abs(d.vx) + Math.abs(d.vy) > 2) { allCalm = false; }
  }
  paint();
  if (!lively && allCalm) { running = false; return; }
  requestAnimationFrame(step);
}
field.addEventListener('pointermove', function (e) {
  var r = field.getBoundingClientRect();
  ptr.x = e.clientX - r.left - 14; ptr.y = e.clientY - r.top - 14;
  wake();
});
field.addEventListener('pointerleave', function () { ptr.x = -60; ptr.y = -60; paint(); });
field.addEventListener('keydown', function (e) {
  var JUMP = 24;
  if (e.key === 'ArrowLeft') { ptr.x -= JUMP; }
  else if (e.key === 'ArrowRight') { ptr.x += JUMP; }
  else if (e.key === 'ArrowUp') { ptr.y -= JUMP; }
  else if (e.key === 'ArrowDown') { ptr.y += JUMP; }
  else { return; }
  e.preventDefault();
  wake();
});
document.getElementById('reset').addEventListener('click', function () {
  for (var i = 0; i < dots.length; i++) {
    dots[i].ox = 0; dots[i].oy = 0; dots[i].vx = 0; dots[i].vy = 0;
  }
  paint();
});
window.addEventListener('resize', function () {
  for (var i = 0; i < dots.length; i++) {
    var home = homeXY(dots[i].c, dots[i].r);
    dots[i].hx = home.x; dots[i].hy = home.y;
    dots[i].el.style.setProperty('--hx', home.x.toFixed(1) + 'px');
    dots[i].el.style.setProperty('--hy', home.y.toFixed(1) + 'px');
  }
  paint();
});
paint();

// ClothRipple — vanilla 판(run/292/demo/06-physics-cloth-rope/index.html) 의 React 포트.
// 맨 윗줄이 고정점(핀)인 12x5 점 격자. 커서 반경 36px 안의 점을 밀고, 이웃 변위 끌림
// (가로 실 두 개 + 윗점) 이 파동을 번지게 하며 제자리 스프링(90)과 감쇠(0.9)가 잡아당긴다.
// 물리 상수·식은 vanilla 와 같은 값이다. 격자 미리보기(isDemo)는 module.scss 의 키프레임이 돌린다.
import { useEffect, useRef, useState } from "react";
import type { CSSProperties, PointerEvent as ReactPointerEvent } from "react";
import styles from "./ClothRipple.module.scss";

export type ClothRippleProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type DotVars = CSSProperties & { "--hx"?: string; "--hy"?: string; "--r"?: string };
// useRef 는 T | null 을 돌려준다. 처음부터 값이 있고 절대 비지 않는 상자는 이렇게 좁혀 쓴다
type Box<T> = { current: T };
// React 의 KeyboardEvent 제네릭이 없는 환경이라 필요한 것만 로컬로 선언한다
type KeyEvt = { key: string; preventDefault(): void };
type Dot = { c: number; r: number; hx: number; hy: number; ox: number; oy: number; vx: number; vy: number };
type Home = { hx: number; hy: number; r: number };

const COLS = 12;
const ROWS = 5;
const JUMP = 24; // 키보드 한 번에 커서가 옮겨 가는 거리
const HINT = "판을 문지르면 점 격자가 출렁이고 이웃 점 끌림으로 파동이 퍼집니다";
const FIELD_LABEL = "천 격자판";
const RESET_LABEL = "가만히 두기";

function HandIcon({ className }: { className: string }) {
  return (
    <svg viewBox="0 0 256 256" className={className} aria-hidden="true" fill="currentColor"><g><path d="M216 116v36a80 80 0 0 1-80 80c-44.18 0-55.81-24-93.32-90a20 20 0 0 1 34.64-20L96 152V44a20 20 0 0 1 40 0v56a20 20 0 0 1 40 0v16a20 20 0 0 1 40 0" opacity=".2"/><path d="M196 88a27.86 27.86 0 0 0-13.35 3.39A28 28 0 0 0 144 74.7V44a28 28 0 0 0-56 0v80l-3.82-6.13A28 28 0 0 0 35.73 146l4.67 8.23C74.81 214.89 89.05 240 136 240a88.1 88.1 0 0 0 88-88v-36a28 28 0 0 0-28-28m12 64a72.08 72.08 0 0 1-72 72c-37.63 0-47.84-18-81.68-77.68l-4.69-8.27V138A12 12 0 0 1 54 121.61a11.9 11.9 0 0 1 6-1.6a12 12 0 0 1 10.41 6a2 2 0 0 0 .14.23l18.67 30A8 8 0 0 0 104 152V44a12 12 0 0 1 24 0v68a8 8 0 0 0 16 0v-12a12 12 0 0 1 24 0v20a8 8 0 0 0 16 0v-4a12 12 0 0 1 24 0Z"/></g></svg>
  );
}

function ResetIcon({ className }: { className: string }) {
  return (
    <svg viewBox="0 0 256 256" className={className} aria-hidden="true" fill="currentColor"><g><path d="M232 136a104 104 0 1 1-38.17-80.55L208 60v-4a8 8 0 0 1 16 0v34a8 8 0 0 1-8 8h-34a8 8 0 0 1 0-16h7.6l-8.89-7.4A88 88 0 1 0 216 136a8 8 0 0 1 16 0Z" opacity=".2"/><path d="M232 136a104 104 0 1 1-38.17-80.55L208 60v-4a8 8 0 0 1 16 0v34a8 8 0 0 1-8 8h-34a8 8 0 0 1 0-16h7.6l-8.89-7.4A88 88 0 1 0 216 136a8 8 0 0 1 16 0Z"/></g></svg>
  );
}

export default function ClothRipple({
  duration = 2000,
  easing = "ease-in-out",
  color = "#2f6df6",
}: ClothRippleProps) {
  const fieldRef = useRef<HTMLDivElement | null>(null);
  const cursorRef = useRef<HTMLSpanElement | null>(null);
  const elsBox = useRef<Array<HTMLElement | null>>([]) as Box<Array<HTMLElement | null>>;
  const dotsBox = useRef<Dot[]>([]) as Box<Dot[]>;
  const ptrBox = useRef({ x: -60, y: -60 }) as Box<{ x: number; y: number }>;
  const lastBox = useRef(0) as Box<number>;
  const idleBox = useRef(0) as Box<number>;
  const runningBox = useRef(false) as Box<boolean>;
  const frameBox = useRef(0) as Box<number>;
  const [homes, setHomes] = useState<Home[]>([]);
  const [demo, setDemo] = useState(true);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

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

  function homeXY(c: number, r: number, w: number, h: number): { x: number; y: number } {
    return { x: ((c + 0.5) * w) / COLS, y: 14 + (r * (h - 22)) / (ROWS - 1) };
  }

  // 점 격자를 판 크기에 맞춰 놓는다 — 첫 마운트와 창 크기 변화에서 같은 함수를 쓴다
  function layout(): void {
    const field = fieldRef.current;
    if (!field) { return; }
    const w = field.clientWidth;
    const h = field.clientHeight;
    const dots = dotsBox.current;
    const fresh = dots.length === 0;
    const next: Home[] = [];
    for (let r = 0; r < ROWS; r++) {
      for (let c = 0; c < COLS; c++) {
        const home = homeXY(c, r, w, h);
        if (fresh) {
          dots.push({ c: c, r: r, hx: home.x, hy: home.y, ox: 0, oy: 0, vx: 0, vy: 0 });
        } else {
          const d = dots[r * COLS + c];
          d.hx = home.x;
          d.hy = home.y;
        }
        next.push({ hx: home.x, hy: home.y, r: r });
      }
    }
    setHomes(next);
  }

  function paint(): void {
    const dots = dotsBox.current;
    const els = elsBox.current;
    for (let i = 0; i < dots.length; i++) {
      const el = els[i];
      if (!el) { continue; }
      const d = dots[i];
      el.style.transform =
        "translate(calc(var(--hx) + " + d.ox.toFixed(1) + "px), calc(var(--hy) + " + d.oy.toFixed(1) + "px))";
    }
    const cursor = cursorRef.current;
    if (cursor) {
      cursor.style.transform = "translate(" + ptrBox.current.x + "px, " + ptrBox.current.y + "px)";
    }
  }

  function wake(): boolean {
    setDemo(false);
    if (reduced()) { paint(); return false; }
    idleBox.current = performance.now();
    if (!runningBox.current) {
      runningBox.current = true;
      lastBox.current = performance.now();
      frameBox.current = requestAnimationFrame(step);
    }
    return true;
  }

  function step(now: number): void {
    const dt = Math.min((now - lastBox.current) / 1000, 0.033);
    lastBox.current = now;
    const lively = now - idleBox.current < 1400;
    let allCalm = true;
    const dots = dotsBox.current;
    const ptr = ptrBox.current;
    for (let i = 0; i < dots.length; i++) {
      const d = dots[i];
      if (d.r === 0) { continue; } // 고정점은 안 흔든다
      const x = d.hx + d.ox;
      const y = d.hy + d.oy;
      // 커서 반경 36px 안의 점을 밀어낸다 — 커서가 지나가는 길이 파동의 시작점이다
      const dx = x - ptr.x;
      const dy = y - ptr.y;
      const dist2 = dx * dx + dy * dy;
      if (dist2 < 1296 && dist2 > 0.01) {
        const dist = Math.sqrt(dist2);
        const push = (1 - dist / 36) * 900;
        d.vx += (dx / dist) * push * dt;
        d.vy += (dy / dist) * push * dt;
        allCalm = false;
      }
      // 이웃 끌림 — 왼쪽·오른쪽·위 점의 현재 변위를 조금 따라간다 (천의 가로 실)
      const left = dots[d.r * COLS + Math.max(0, d.c - 1)];
      const right = dots[d.r * COLS + Math.min(COLS - 1, d.c + 1)];
      const up = dots[Math.max(0, d.r - 1) * COLS + d.c];
      d.vx += ((left.ox + right.ox) / 2 - d.ox) * 60 * dt;
      d.vy += ((left.oy + right.oy + up.oy) / 3 - d.oy) * 60 * dt;
      // 제자리 스프링 + 감쇠
      d.vx += -d.ox * 90 * dt;
      d.vy += -d.oy * 90 * dt;
      d.vx *= 0.9;
      d.vy *= 0.9;
      d.ox += d.vx * dt;
      d.oy += d.vy * dt;
      if (Math.abs(d.ox) + Math.abs(d.oy) > 0.25 || Math.abs(d.vx) + Math.abs(d.vy) > 2) { allCalm = false; }
    }
    paint();
    if (!lively && allCalm) { runningBox.current = false; return; }
    frameBox.current = requestAnimationFrame(step);
  }

  function onPointerMove(event: ReactPointerEvent<HTMLDivElement>): void {
    const field = fieldRef.current;
    if (!field) { return; }
    const r = field.getBoundingClientRect();
    ptrBox.current.x = event.clientX - r.left - 14;
    ptrBox.current.y = event.clientY - r.top - 14;
    wake();
  }

  function onPointerLeave(): void {
    ptrBox.current.x = -60;
    ptrBox.current.y = -60;
    paint();
  }

  function onKeyDown(event: KeyEvt): void {
    const ptr = ptrBox.current;
    if (event.key === "ArrowLeft") { ptr.x -= JUMP; }
    else if (event.key === "ArrowRight") { ptr.x += JUMP; }
    else if (event.key === "ArrowUp") { ptr.y -= JUMP; }
    else if (event.key === "ArrowDown") { ptr.y += JUMP; }
    else { return; }
    event.preventDefault();
    wake();
  }

  function onReset(): void {
    const dots = dotsBox.current;
    for (let i = 0; i < dots.length; i++) {
      dots[i].ox = 0;
      dots[i].oy = 0;
      dots[i].vx = 0;
      dots[i].vy = 0;
    }
    paint();
  }

  useEffect(() => {
    layout();
    const onResize = (): void => { layout(); paint(); };
    window.addEventListener("resize", onResize);
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(frameBox.current);
    };
  }, []);

  // 점이 새로 그려진 뒤에 현재 변위를 한 번 칠한다
  useEffect(() => { paint(); }, [homes]);

  const cls = [styles.root, demo ? styles.isDemo : ""].filter(Boolean).join(" ");
  return (
    <main className={styles.stage}>
      <div className={cls} style={vars}>
        <p className={styles.hint}><HandIcon className={styles.ico} /><span>{HINT}</span></p>
        <div
          className={styles.field}
          ref={fieldRef}
          role="application"
          aria-label={FIELD_LABEL}
          tabIndex={0}
          onPointerMove={onPointerMove}
          onPointerLeave={onPointerLeave}
          onKeyDown={onKeyDown}
        >
          <span className={styles.pin} aria-hidden="true"></span>
          <span className={styles.cursor} ref={cursorRef} aria-hidden="true">
            <HandIcon className={styles.cursorIco} />
          </span>
          <span aria-hidden="true">
            {homes.map((home, i) => (
              <i
                key={i}
                className={home.r === 0 ? `${styles.dot} ${styles.dotPin}` : styles.dot}
                ref={(el: HTMLElement | null) => { elsBox.current[i] = el; }}
                style={{
                  "--hx": home.hx.toFixed(1) + "px",
                  "--hy": home.hy.toFixed(1) + "px",
                  "--r": String(home.r),
                } as DotVars}
              />
            ))}
          </span>
        </div>
        <div className={styles.bar}>
          <button className={styles.reset} type="button" onClick={onReset}>
            <ResetIcon className={styles.ico} /><span>{RESET_LABEL}</span>
          </button>
        </div>
      </div>
    </main>
  );
}