01Circle-pin basics — a fixed skip that blooms a flower

<main class="stage">
<div class="sa is-demo" id="saRoot" role="application" aria-label="Circle-pin wrapping board" tabindex="0">
  <canvas class="sa__cv" id="saCv"></canvas>
  <p class="sa__hint">
    <span class="sa__title">Circle-pin basics</span>
    <span class="sa__desc">Run thread across a circle of pins with a fixed skip and a curve-flower blooms on its own</span>
  </p>
  <div class="sa__bar">
    <span class="sa__meta">120 pins · skip 49 · 120 threads</span>
    <span class="sa__meta sa__meta--dim">sin·cos · lineTo</span>
  </div>
</div>
</main>

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

// 스트링아트 기본(01) — @keyframes 를 두지 않는다. 움직임은 전부 캔버스 rAF 루프(감기 진행 재계산)가 만든다.
// 무대 잉크 — 어두운 판 위 파스텔 실로 장미꼴 포락선을 띄운다. 캔버스가 판 전체다.

$sa-stage: #1a1720;
@include stage($sa-stage);

$sa-panel:  #241f2d;   // 감기판 바닥 — 무대보다 한 단계 밝은 먹보라
$sa-text:   #d5cfe6;   // 라벨 글자 — 밝은 라일락 회색
$sa-thread: #cfd9e7;   // 실 — 파스텔 아이리스 블루
$sa-pin:    #f0e6d2;   // 감긴 핀 — 크림
$sa-dim:    #4d4459;   // 아직 안 감긴 핀 — 저채도 보라
$sa-glow:   #e8d5e2;   // 활 실 끝 광택 — 벚꽃 파스텔

$duration: $dur-loop;
$easing: $ease-out;
$color: $sa-thread;

.sa {
  --sa-panel:  #{$sa-panel};
  --sa-thread: #{$sa-thread};
  --sa-pin:    #{$sa-pin};
  --sa-dim:    #{$sa-dim};
  --sa-glow:   #{$sa-glow};

  position: relative;
  display: flex; flex-direction: column;
  width: 100%; height: 100%; min-height: 164px;   // 폰 뷰포트(320×200) 안 — 스테이지 패딩 2회분 여유
  overflow: hidden;
}

.sa__cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.sa__hint {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 0; margin: 0;
  padding: $sp-2 $sp-3 0;
  font-weight: 700; font-size: clamp(10px, 2.8vw, 12px); line-height: 1.35;
  color: $sa-text;
}
.sa__title { text-shadow: 0 1px 6px rgba($sa-panel, 1); }
.sa__desc {
  margin-top: $sp-1;
  font-weight: 500; font-size: clamp(9px, 2.4vw, 10px); line-height: 1.4;
  color: rgba($sa-text, .78);
  text-shadow: 0 1px 6px rgba($sa-panel, 1);
}

.sa__bar {
  position: relative; z-index: 1;
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: $sp-2;
  padding: 0 $sp-3 $sp-2;
}
.sa__meta {
  font-size: 10px; font-weight: 500; color: rgba($sa-text, .78);
  background: rgba($sa-panel, .8);
  border-radius: $r-xs;
  padding: 4px $sp-1;
}

.sa:focus-visible { outline: 2px solid $sa-thread; outline-offset: -2px; }

@media (max-width: 340px) {
  .sa__meta--dim { display: none; }
}

// reduce — rAF 를 돌리지 않고 다 감긴 꽃 한 장만 남는다.
@media (prefers-reduced-motion: reduce) {
  .sa.is-still { 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: #1a1720;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.sa {
  --sa-panel: #241f2d;
  --sa-thread: #cfd9e7;
  --sa-pin: #f0e6d2;
  --sa-dim: #4d4459;
  --sa-glow: #e8d5e2;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 164px;
  overflow: hidden;
}

.sa__cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.sa__hint {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 8px 12px 0;
  font-weight: 700;
  font-size: clamp(10px, 2.8vw, 12px);
  line-height: 1.35;
  color: #d5cfe6;
}

.sa__title {
  text-shadow: 0 1px 6px #241f2d;
}

.sa__desc {
  margin-top: 4px;
  font-weight: 500;
  font-size: clamp(9px, 2.4vw, 10px);
  line-height: 1.4;
  color: rgba(213, 207, 230, 0.78);
  text-shadow: 0 1px 6px #241f2d;
}

.sa__bar {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 8px;
}

.sa__meta {
  font-size: 10px;
  font-weight: 500;
  color: rgba(213, 207, 230, 0.78);
  background: rgba(36, 31, 45, 0.8);
  border-radius: 4px;
  padding: 4px 4px;
}

.sa:focus-visible {
  outline: 2px solid #cfd9e7;
  outline-offset: -2px;
}

@media (max-width: 340px) {
  .sa__meta--dim {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa.is-still {
    cursor: default !important;
  }
}

// 스트링아트 기본(01) — 원 둘레 핀 + 일정 칸 건너뛰기의 최소 구현.
// 핀 i 의 좌표는 (cx + R cos(2πi/N), cy + R sin(2πi/N)).
// 실은 i 번 핀에서 i + SKIP 번 핀으로 한 올씩 감긴다. 직선 현만 그리는데
// 현들이 겹치는 밝기가 원판 안에 장미꼴 포락선을 띄운다.
// 감기 진행량 progress 0→1 이 주기 안에 차오르고, 감는 손이 지나간 올은
// 최근일수록 밝다(광택) — 감기가 어디까지 왔는지 눈이 따라간다.
(function () {
  // ── 변형 상수 블록 — 아래 값 하나만 바꿔 변형을 만든다 ──
  var N     = 120;   // 핀 개수 — 더 올리면 곡선이 매끈해진다
  var SKIP  = 49;    // 건너뛰기 칸수 — 2로 내리면 꽃잎이 크고 무늬가 성기다(변형 1)
  var CYCLE = 2.0;   // 감기 완료 주기(초)
  // ────────────────────────────────────────────────────

  var root = document.getElementById('saRoot');
  var cvEl = document.getElementById('saCv');
  if (!root || !cvEl) return;

  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 COL_THRD = tokRGB('--sa-thread');
  var COL_PIN  = tokRGB('--sa-pin');
  var COL_GLOW = tokRGB('--sa-glow');
  var COL_PANEL = tokRGB('--sa-panel');
  var COL_DIM  = tokRGB('--sa-dim');

  var ctx = cvEl.getContext('2d');
  var W = 0, H = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
  var R = 0;

  function fit() {
    var r = root.getBoundingClientRect();
    W = Math.round(r.width); H = Math.round(r.height);
    cvEl.width = Math.round(W * dpr); cvEl.height = Math.round(H * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    R = Math.min(W, H) * 0.46;
  }

  function pinXY(i) {
    var a = Math.PI * 2 * i / N - Math.PI / 2;   // 0번 핀을 12시에 두고 시계 방향
    return [W / 2 + Math.cos(a) * R, H / 2 + Math.sin(a) * R];
  }

  function draw(progress, t) {
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = 'rgb(' + COL_PANEL.join(',') + ')';
    ctx.fillRect(0, 0, W, H);

    // 실 — 감기 순서대로. progress 만큼의 올이 걸려 있다.
    var total = N;                      // 한 바퀴 = N 올 (i → i+SKIP, N번)
    var seg = progress * total;
    var full = Math.floor(seg);
    var frac = seg - full;

    ctx.lineCap = 'round';
    ctx.shadowBlur = 5;                 // 실 광택 — 올 주위 헤일로그가 겹침 밝기를 더한다
    for (var i = 0; i < full; i++) {
      var a = pinXY(i), b = pinXY(i + SKIP);
      // 감기 근처의 최근 올은 진하게 — 감는 손이 지나가는 자리가 밝다
      var recency = (full - i) / total;           // 1(방금) → 0(처음)
      var alpha = 0.34 + 0.62 * Math.pow(recency, 1.6);
      ctx.strokeStyle = 'rgba(' + COL_THRD.join(',') + ',' + alpha.toFixed(3) + ')';
      ctx.shadowColor = 'rgba(' + COL_GLOW.join(',') + ',' + (alpha * 0.5).toFixed(3) + ')';
      ctx.lineWidth = 1 + recency * 1.4;
      ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke();
    }
    // 이어지는 한 올 — 부드러운 진행
    if (full < total && frac > 0) {
      var a = pinXY(full), b = pinXY(full + SKIP);
      ctx.strokeStyle = 'rgba(' + COL_GLOW.join(',') + ',0.95)';
      ctx.shadowColor = 'rgba(' + COL_GLOW.join(',') + ',0.8)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(a[0], a[1]);
      ctx.lineTo(a[0] + (b[0] - a[0]) * frac, a[1] + (b[1] - a[1]) * frac);
      ctx.stroke();
    }
    ctx.shadowBlur = 0;

    // 핀 — 감긴 실이 지나간 핀은 밝게 숨쉰다(유지 구간에도 순차 맥동)
    for (var p = 0; p < N; p++) {
      var xy = pinXY(p);
      var done = p <= full;
      if (done) {
        var pulse = 0.5 + 0.5 * Math.sin(t * 4 - p * 0.3);
        ctx.fillStyle = 'rgba(' + COL_PIN.join(',') + ',' + (0.65 + 0.35 * pulse).toFixed(3) + ')';
        ctx.beginPath(); ctx.arc(xy[0], xy[1], 1.4 + 1.2 * pulse, 0, Math.PI * 2); ctx.fill();
      } else {
        ctx.fillStyle = 'rgb(' + COL_DIM.join(',') + ')';
        ctx.beginPath(); ctx.arc(xy[0], xy[1], 1.2, 0, Math.PI * 2); ctx.fill();
      }
    }

    // 활 실 끝의 광택 — 현재 감는 지점을 알린다(다 감긴 뒤엔 꽃 중심이 숨쉰다)
    if (full < total) {
      var tip = pinXY(full);
      ctx.fillStyle = 'rgba(' + COL_GLOW.join(',') + ',0.9)';
      ctx.beginPath(); ctx.arc(tip[0], tip[1], 3.2, 0, Math.PI * 2); ctx.fill();
    } else {
      var breathe = 0.5 + 0.5 * Math.sin(t * 5);
      ctx.fillStyle = 'rgba(' + COL_GLOW.join(',') + ',' + (0.35 + 0.45 * breathe).toFixed(3) + ')';
      ctx.beginPath(); ctx.arc(W / 2, H / 2, 4 + 2.5 * breathe, 0, Math.PI * 2); ctx.fill();
    }
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var t0 = -1;
  function frame(now) {
    if (t0 < 0) t0 = now;
    var t = ((now - t0) / 1000) % CYCLE;
    // 0→0.78 감기 · 0.78→1 유지(다 감긴 꽃을 볼 시간)
    var progress = Math.min(1, t / CYCLE / 0.78);
    draw(progress, t);
    requestAnimationFrame(frame);
  }
  window.addEventListener('resize', function () {
    fit();
    if (reduce) draw(1, 0);
  });
  fit();
  if (reduce) {
    draw(1, 0);   // reduce — 다 감긴 꽃 한 장만 고정
    root.classList.add('is-still');
  } else {
    requestAnimationFrame(frame);
  }
})();

// StringPinCircleBasic — vanilla 판(run/326/demo/01-string-pin-circle-basic/index.html) 의 React 포트.
// 원 둘레 핀 사이를 정해진 칸수로 건너 실을 감는 스트링아트 기본.
// 핀 i 의 좌표는 (cx + R·cos(2πi/N), cy + R·sin(2πi/N)). 실은 i 번 핀에서 i+SKIP 번 핀으로
// 한 올씩 감기고, 직선 현만 그리는데 현들이 겹치는 밝기가 원판 안에 장미꼴 포락선을 띄운다.
// progress 0→1 이 주기 안에 차오르고, 감는 손이 지나간 올은 최근일수록 밝다(광택).
import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./StringPinCircleBasic.module.scss";

export type StringPinCircleBasicProps = {
  duration?: string;
  easing?: string;
  color?: string;
  n?: number;      // 핀 개수 — 더 올리면 곡선이 매끈해진다
  skip?: number;   // 건너뛰기 칸수 — 2로 내리면 꽃잎이 크고 무늬가 성기다(변형 1)
  cycle?: number;  // 감기 완료 주기(초)
};

// ── 변형 상수(기본값) — vanilla 판과 동일 ──
const N     = 120;   // 핀 개수
const SKIP  = 49;    // 건너뛰기 칸수
const CYCLE = 2.0;   // 감기 완료 주기(초) — 설정 초(2s)와 같아 한 감기가 한 루프

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type Box<T> = { current: T };
type RGB = [number, number, number];
type XY = [number, number];

const BOARD_LABEL = "원핀 감기판";
const META_LEFT = "핀 120개 · 건너뛰기 49칸 · 실 올 120";
const META_RIGHT = "sin·cos · lineTo";
const HINT_TITLE = "원핀 기본";
const HINT_DESC = "원 둘레 핀 사이를 정해진 칸수로 건너 실을 감으면 곡선 꽃이 절로 핀다";

export default function StringPinCircleBasic({
  duration = "2s",
  easing = "ease-out",
  color = "#cfd9e7",
  n = N,
  skip = SKIP,
  cycle = CYCLE
}: StringPinCircleBasicProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const cvRef = useRef<HTMLCanvasElement | null>(null);
  const ctxRef = useRef<CanvasRenderingContext2D | null>(null);
  const colRef = useRef<{ thrd: RGB; pin: RGB; glow: RGB; panel: RGB; dim: RGB } | null>(null);
  const wRef = useRef(0) as Box<number>;
  const hRef = useRef(0) as Box<number>;
  const rRef = useRef(0) as Box<number>;
  const rafRef = useRef(0) as Box<number>;
  const [still, setStill] = useState(false);
  const vars: Vars = { "--duration": duration, "--easing": easing, "--color": color };

  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 fit(): void {
    const root = rootRef.current;
    const cv = cvRef.current;
    const ctx = ctxRef.current;
    if (!root || !cv || !ctx) return;
    const r = root.getBoundingClientRect();
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    wRef.current = Math.round(r.width);
    hRef.current = Math.round(r.height);
    cv.width = Math.round(wRef.current * dpr);
    cv.height = Math.round(hRef.current * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    rRef.current = Math.min(wRef.current, hRef.current) * 0.46;
  }

  function pinXY(i: number): XY {
    const a = Math.PI * 2 * i / n - Math.PI / 2;   // 0번 핀을 12시에 두고 시계 방향
    return [wRef.current / 2 + Math.cos(a) * rRef.current, hRef.current / 2 + Math.sin(a) * rRef.current];
  }

  function draw(progress: number, t: number): void {
    const ctx = ctxRef.current;
    const col = colRef.current;
    const W = wRef.current, H = hRef.current;
    if (!ctx || !col) return;
    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = "rgb(" + col.panel.join(",") + ")";
    ctx.fillRect(0, 0, W, H);

    // 실 — 감기 순서대로. progress 만큼의 올이 걸려 있다.
    const total = n;                      // 한 바퀴 = n 올 (i → i+SKIP, n번)
    const seg = progress * total;
    const full = Math.floor(seg);
    const frac = seg - full;

    ctx.lineCap = "round";
    ctx.shadowBlur = 5;                   // 실 광택 — 올 주위 헤일로그가 겹침 밝기를 더한다
    for (let i = 0; i < full; i++) {
      const a = pinXY(i), b = pinXY(i + skip);
      // 감기 근처의 최근 올은 진하게 — 감는 손이 지나가는 자리가 밝다
      const recency = (full - i) / total;          // 1(방금) → 0(처음)
      const alpha = 0.34 + 0.62 * Math.pow(recency, 1.6);
      ctx.strokeStyle = "rgba(" + col.thrd.join(",") + "," + alpha.toFixed(3) + ")";
      ctx.shadowColor = "rgba(" + col.glow.join(",") + "," + (alpha * 0.5).toFixed(3) + ")";
      ctx.lineWidth = 1 + recency * 1.4;
      ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke();
    }
    // 이어지는 한 올 — 부드러운 진행
    if (full < total && frac > 0) {
      const a = pinXY(full), b = pinXY(full + skip);
      ctx.strokeStyle = "rgba(" + col.glow.join(",") + ",0.95)";
      ctx.shadowColor = "rgba(" + col.glow.join(",") + ",0.8)";
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(a[0], a[1]);
      ctx.lineTo(a[0] + (b[0] - a[0]) * frac, a[1] + (b[1] - a[1]) * frac);
      ctx.stroke();
    }
    ctx.shadowBlur = 0;

    // 핀 — 감긴 실이 지나간 핀은 밝게 숨쉰다(유지 구간에도 순차 맥동)
    for (let p = 0; p < n; p++) {
      const xy = pinXY(p);
      const done = p <= full;
      if (done) {
        const pulse = 0.5 + 0.5 * Math.sin(t * 4 - p * 0.3);
        ctx.fillStyle = "rgba(" + col.pin.join(",") + "," + (0.65 + 0.35 * pulse).toFixed(3) + ")";
        ctx.beginPath(); ctx.arc(xy[0], xy[1], 1.4 + 1.2 * pulse, 0, Math.PI * 2); ctx.fill();
      } else {
        ctx.fillStyle = "rgb(" + col.dim.join(",") + ")";
        ctx.beginPath(); ctx.arc(xy[0], xy[1], 1.2, 0, Math.PI * 2); ctx.fill();
      }
    }

    // 활 실 끝의 광택 — 현재 감는 지점을 알린다(다 감긴 뒤엔 꽃 중심이 숨쉰다)
    if (full < total) {
      const tip = pinXY(full);
      ctx.fillStyle = "rgba(" + col.glow.join(",") + ",0.9)";
      ctx.beginPath(); ctx.arc(tip[0], tip[1], 3.2, 0, Math.PI * 2); ctx.fill();
    } else {
      const breathe = 0.5 + 0.5 * Math.sin(t * 5);
      ctx.fillStyle = "rgba(" + col.glow.join(",") + "," + (0.35 + 0.45 * breathe).toFixed(3) + ")";
      ctx.beginPath(); ctx.arc(W / 2, H / 2, 4 + 2.5 * breathe, 0, Math.PI * 2); ctx.fill();
    }
  }

  let t0 = -1;
  function frame(now: number): void {
    if (t0 < 0) t0 = now;
    const t = ((now - t0) / 1000) % cycle;
    // 0→0.78 감기 · 0.78→1 유지(다 감긴 꽃을 볼 시간)
    const progress = Math.min(1, t / cycle / 0.78);
    draw(progress, t);
    rafRef.current = requestAnimationFrame(frame);
  }

  useEffect(() => {
    const root = rootRef.current;
    const cv = cvRef.current;
    if (!root || !cv) return;
    colRef.current = {
      thrd: tokRGB(root, "--sa-thread"),
      pin: tokRGB(root, "--sa-pin"),
      glow: tokRGB(root, "--sa-glow"),
      panel: tokRGB(root, "--sa-panel"),
      dim: tokRGB(root, "--sa-dim")
    };
    ctxRef.current = cv.getContext("2d");
    fit();
    function onResize(): void {
      fit();
      if (reduced()) draw(1, 0);
    }
    window.addEventListener("resize", onResize);
    if (reduced()) {
      draw(1, 0);                                // reduce — 다 감긴 꽃 한 장만 고정
      setStill(true);
    } else {
      t0 = -1;
      rafRef.current = requestAnimationFrame(frame);
    }
    return () => {
      window.removeEventListener("resize", onResize);
      cancelAnimationFrame(rafRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [n, skip, cycle]);

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

  return (
    <main className={styles.stage}>
      <div
        className={rootCls}
        ref={rootRef}
        style={vars}
        role="application"
        aria-label={BOARD_LABEL}
        tabIndex={0}
      >
        <canvas className={styles.cv} ref={cvRef}></canvas>
        <p className={styles.hint}>
          <span className={styles.title}>{HINT_TITLE}</span>
          <span className={styles.desc}>{HINT_DESC}</span>
        </p>
        <div className={styles.bar}>
          <span className={styles.meta}>{META_LEFT}</span>
          <span className={styles.metaDim}>{META_RIGHT}</span>
        </div>
      </div>
    </main>
  );
}