09Tick-mark snap — a value between set tick marks is pulled to the nearest tick value

<main class="stage">
<div class="nspts is-demo" id="nspts">
  <div class="nspts__panel">
    <span class="nspts__label">Screen brightness</span>
    <span class="nspts__value" id="nsptsValue">5</span>
    <div class="nspts__track" id="nsptsTrack">
      <span class="nspts__tick" data-i="0"></span>
      <span class="nspts__tick" data-i="1"></span>
      <span class="nspts__tick" data-i="2"></span>
      <span class="nspts__tick" data-i="3"></span>
      <span class="nspts__tick" data-i="4"></span>
      <span class="nspts__tick" data-i="5"></span>
      <span class="nspts__tick" data-i="6"></span>
      <span class="nspts__tick" data-i="7"></span>
      <span class="nspts__tick" data-i="8"></span>
      <span class="nspts__tick" data-i="9"></span>
      <span class="nspts__tick" data-i="10"></span>
      <span class="nspts__handle" id="nsptsHandle"></span>
    </div>
    <span class="nspts__hint">Drag and release — it snaps to the nearest tick like a magnet</span>
  </div>
</div>
</main>

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

// 계산 겹: 손을 놓은 위치에서 가장 가까운 눈금까지 매 프레임 스프링 힘(거리*강성 - 속도*감쇠)을
// 계산해 자석처럼 빨려 들어가게 한다 — 드래그 중에도 눈금 근접도로 인력을 미리 섞는다.

$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-cream;

@include stage($stage-ink);

.stage { position: relative; }

.nspts {
  width: min(260px, 76vw);
}

.nspts__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-3;
  padding: $sp-5;
  border-radius: $r-card;
  background: $stage-paper;
}

.nspts__label {
  color: rgba($subject-ink, .72);
  font-weight: 700;
  font-size: 12px;
}

.nspts__value {
  color: $subject-ink;
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.nspts__track {
  position: relative;
  width: 200px;
  height: 4px;
  border-radius: $r-xs;
  background: rgba($subject-ink, .14);
  margin: $sp-4 0 $sp-1;
}

.nspts__tick {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: $r-pill;
  background: $subject-blue-deep;
  transform: translate(-50%, -50%);
  transform-origin: center;

  @for $i from 0 through 10 {
    &[data-i="#{$i}"] { left: calc(#{$i} / 10 * 100%); }
  }
}

.nspts__handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: $r-pill;
  background: $subject-blue-deep;
  box-shadow: $shadow-raised;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transform: translate(-50%, -50%);

  &:active { cursor: grabbing; }
}

.nspts__hint {
  color: rgba($subject-ink, .72);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 340px) {
  .nspts__panel { padding: $sp-4; gap: $sp-2; }
  .nspts__track { width: 160px; }
  .nspts__value { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .nspts__handle, .nspts__tick { transition: none !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);
}

.stage {
  position: relative;
}

.nspts {
  width: min(260px, 76vw);
}

.nspts__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 16px;
  background: #ffffff;
}

.nspts__label {
  color: rgba(23, 20, 26, 0.72);
  font-weight: 700;
  font-size: 12px;
}

.nspts__value {
  color: #17141a;
  font-weight: 700;
  font-size: 26px;
  font-variant-numeric: tabular-nums;
}

.nspts__track {
  position: relative;
  width: 200px;
  height: 4px;
  border-radius: 4px;
  background: rgba(23, 20, 26, 0.14);
  margin: 16px 0 4px;
}

.nspts__tick {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #0a4fe8;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.nspts__tick[data-i="0"] {
  left: calc(0 / 10 * 100%);
}
.nspts__tick[data-i="1"] {
  left: calc(1 / 10 * 100%);
}
.nspts__tick[data-i="2"] {
  left: calc(2 / 10 * 100%);
}
.nspts__tick[data-i="3"] {
  left: calc(3 / 10 * 100%);
}
.nspts__tick[data-i="4"] {
  left: calc(4 / 10 * 100%);
}
.nspts__tick[data-i="5"] {
  left: calc(5 / 10 * 100%);
}
.nspts__tick[data-i="6"] {
  left: calc(6 / 10 * 100%);
}
.nspts__tick[data-i="7"] {
  left: calc(7 / 10 * 100%);
}
.nspts__tick[data-i="8"] {
  left: calc(8 / 10 * 100%);
}
.nspts__tick[data-i="9"] {
  left: calc(9 / 10 * 100%);
}
.nspts__tick[data-i="10"] {
  left: calc(10 / 10 * 100%);
}

.nspts__handle {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0a4fe8;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  cursor: grab;
  touch-action: none;
  will-change: transform;
  transform: translate(-50%, -50%);
}
.nspts__handle:active {
  cursor: grabbing;
}

.nspts__hint {
  color: rgba(23, 20, 26, 0.72);
  font-size: 11px;
  text-align: center;
}

@media (max-width: 340px) {
  .nspts__panel {
    padding: 16px;
    gap: 8px;
  }
  .nspts__track {
    width: 160px;
  }
  .nspts__value {
    font-size: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nspts__handle, .nspts__tick {
    transition: none !important;
  }
}

(function () {
  var root = document.getElementById('nspts');
  var track = document.getElementById('nsptsTrack');
  var handle = document.getElementById('nsptsHandle');
  var valueEl = document.getElementById('nsptsValue');
  var ticks = Array.prototype.slice.call(track.querySelectorAll('.nspts__tick'));

  var TICK_COUNT = 11, TRACK_W = 200, GAP = TRACK_W / (TICK_COUNT - 1);
  var currentX = 5 * GAP;
  var dragging = false, startClientX = 0, startX = 0, settleRaf = null;

  function xToIndex(x) { return Math.max(0, Math.min(10, Math.round(x / GAP))); }
  function nearestTickX(x) { return xToIndex(x) * GAP; }

  function paint(x) {
    handle.style.transform = 'translate(-50%, -50%) translateX(' + x.toFixed(1) + 'px)';
    for (var i = 0; i < ticks.length; i++) {
      var tx = i * GAP;
      var d = Math.abs(x - tx);
      var proximity = Math.max(0, 1 - d / GAP);
      ticks[i].style.transform = 'translate(-50%, -50%) scale(' + (1 + proximity * 0.9).toFixed(2) + ')';
      ticks[i].style.opacity = (0.35 + proximity * 0.65).toFixed(2);
    }
    valueEl.textContent = String(xToIndex(x));
  }

  // 계산 겹: 놓는 순간의 위치(x0)에서 가장 가까운 눈금(target)까지 매 프레임 스프링 힘
  // (거리 * 강성 - 속도 * 감쇠)을 계산해 자석처럼 서서히 빨려 들어가게 만든다.
  var STIFF = 0.28, DAMP = 0.62;
  function springSettle(x0, target) {
    if (settleRaf) { cancelAnimationFrame(settleRaf); }
    var x = x0, v = 0;
    function frame() {
      var force = (target - x) * STIFF;
      v = (v + force) * DAMP;
      x += v;
      paint(x);
      if (Math.abs(target - x) > 0.3 || Math.abs(v) > 0.2) {
        settleRaf = requestAnimationFrame(frame);
      } else {
        x = target;
        paint(x);
        currentX = x;
        settleRaf = null;
      }
    }
    settleRaf = requestAnimationFrame(frame);
  }

  function moveTo(clientX) {
    var raw = Math.max(0, Math.min(TRACK_W, startX + (clientX - startClientX)));
    // 계산 겹: 가장 가까운 눈금까지 거리 비율로 자석 인력 세기(pull)를 계산해
    // 손가락 위치와 눈금 사이를 보간한다 — 드래그 중에도 살짝 끌려간다.
    var tx = nearestTickX(raw);
    var dist = Math.abs(raw - tx);
    var pull = Math.max(0, 1 - dist / (GAP * 0.9));
    var x = raw + (tx - raw) * pull * 0.55;
    currentX = x;
    paint(x);
  }

  handle.addEventListener('pointerdown', function (e) {
    root.classList.remove('is-demo'); stopAutoplay();
    if (settleRaf) { cancelAnimationFrame(settleRaf); settleRaf = null; }
    dragging = true;
    startClientX = e.clientX;
    startX = currentX;
    handle.setPointerCapture(e.pointerId);
  });
  handle.addEventListener('pointermove', function (e) { if (dragging) { moveTo(e.clientX); } });
  ['pointerup', 'pointercancel'].forEach(function (ev) {
    handle.addEventListener(ev, function () {
      if (!dragging) { return; }
      dragging = false;
      springSettle(currentX, nearestTickX(currentX));
    });
  });

  var seq = [3, 8, 1, 6, 9, 2, 5];
  var idx = 0;
  var autoplayTimer = null;
  function stopAutoplay() { if (autoplayTimer) { clearInterval(autoplayTimer); autoplayTimer = null; } }
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (!reduce) {
    autoplayTimer = setInterval(function () {
      springSettle(currentX, seq[idx % seq.length] * GAP);
      idx += 1;
    }, 850);
  }
  paint(currentX);
})();

import { useEffect, useRef } from "react";
import styles from "./NumberStepperTickMarkSnap.module.scss";

export type NumberStepperTickMarkSnapProps = {
  color?: string;
};

export default function NumberStepperTickMarkSnap({
  color = "#0a4fe8",
}: NumberStepperTickMarkSnapProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const track = root.querySelector<HTMLDivElement>(`.${styles.track}`);
    const handle = root.querySelector<HTMLSpanElement>(`.${styles.handle}`);
    const valueEl = root.querySelector<HTMLSpanElement>(`.${styles.value}`);
    const ticks = track ? Array.from(track.querySelectorAll<HTMLSpanElement>(`.${styles.tick}`)) : [];
    if (!track || !handle || !valueEl || ticks.length !== 11) return;

    const TICK_COUNT = 11, TRACK_W = 200, GAP = TRACK_W / (TICK_COUNT - 1);
    let currentX = 5 * GAP;
    let dragging = false, startClientX = 0, startX = 0, settleRaf: number | null = null;

    function xToIndex(x: number) { return Math.max(0, Math.min(10, Math.round(x / GAP))); }
    function nearestTickX(x: number) { return xToIndex(x) * GAP; }

    function paint(x: number) {
      handle!.style.transform = "translate(-50%, -50%) translateX(" + x.toFixed(1) + "px)";
      for (let i = 0; i < ticks.length; i++) {
        const tx = i * GAP;
        const d = Math.abs(x - tx);
        const proximity = Math.max(0, 1 - d / GAP);
        ticks[i].style.transform = "translate(-50%, -50%) scale(" + (1 + proximity * 0.9).toFixed(2) + ")";
        ticks[i].style.opacity = (0.35 + proximity * 0.65).toFixed(2);
      }
      valueEl!.textContent = String(xToIndex(x));
    }

    // 계산 겹: 놓는 순간의 위치(x0)에서 가장 가까운 눈금(target)까지 매 프레임 스프링 힘
    // (거리 * 강성 - 속도 * 감쇠)을 계산해 자석처럼 서서히 빨려 들어가게 만든다.
    const STIFF = 0.28, DAMP = 0.62;
    function springSettle(x0: number, target: number) {
      if (settleRaf) { cancelAnimationFrame(settleRaf); }
      let x = x0, v = 0;
      function frame() {
        const force = (target - x) * STIFF;
        v = (v + force) * DAMP;
        x += v;
        paint(x);
        if (Math.abs(target - x) > 0.3 || Math.abs(v) > 0.2) {
          settleRaf = requestAnimationFrame(frame);
        } else {
          x = target;
          paint(x);
          currentX = x;
          settleRaf = null;
        }
      }
      settleRaf = requestAnimationFrame(frame);
    }

    function moveTo(clientX: number) {
      const raw = Math.max(0, Math.min(TRACK_W, startX + (clientX - startClientX)));
      // 계산 겹: 가장 가까운 눈금까지 거리 비율로 자석 인력 세기(pull)를 계산해
      // 손가락 위치와 눈금 사이를 보간한다 — 드래그 중에도 살짝 끌려간다.
      const tx = nearestTickX(raw);
      const dist = Math.abs(raw - tx);
      const pull = Math.max(0, 1 - dist / (GAP * 0.9));
      const x = raw + (tx - raw) * pull * 0.55;
      currentX = x;
      paint(x);
    }

    const onDown = (e: PointerEvent) => {
      root!.classList.remove(styles.isDemo);
      stopAutoplay();
      if (settleRaf) { cancelAnimationFrame(settleRaf); settleRaf = null; }
      dragging = true;
      startClientX = e.clientX;
      startX = currentX;
      handle!.setPointerCapture(e.pointerId);
    };
    const onMove = (e: PointerEvent) => { if (dragging) { moveTo(e.clientX); } };
    const onUp = () => {
      if (!dragging) { return; }
      dragging = false;
      springSettle(currentX, nearestTickX(currentX));
    };
    handle.addEventListener("pointerdown", onDown);
    handle.addEventListener("pointermove", onMove);
    handle.addEventListener("pointerup", onUp);
    handle.addEventListener("pointercancel", onUp);

    const seq = [3, 8, 1, 6, 9, 2, 5];
    let idx = 0;
    let autoplayTimer: ReturnType<typeof setInterval> | null = null;
    function stopAutoplay() {
      if (autoplayTimer) { clearInterval(autoplayTimer); autoplayTimer = null; }
    }
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (!reduce) {
      autoplayTimer = setInterval(() => {
        springSettle(currentX, seq[idx % seq.length] * GAP);
        idx += 1;
      }, 850);
    }
    paint(currentX);

    return () => {
      stopAutoplay();
      if (settleRaf) cancelAnimationFrame(settleRaf);
      handle!.removeEventListener("pointerdown", onDown);
      handle!.removeEventListener("pointermove", onMove);
      handle!.removeEventListener("pointerup", onUp);
      handle!.removeEventListener("pointercancel", onUp);
    };
  }, []);

  return (
    <div ref={rootRef} className={`${styles.stage} ${styles.isDemo}`} style={{ ["--color" as string]: color }}>
      <div className={styles.panel}>
        <span className={styles.label}>화면 밝기</span>
        <span className={styles.value}>5</span>
        <div className={styles.track}>
          {Array.from({ length: 11 }).map((_, i) => (
            <span key={i} className={styles.tick} data-i={i} />
          ))}
          <span className={styles.handle} />
        </div>
        <span className={styles.hint}>끌어서 놓으면 가까운 눈금에 자석처럼 붙습니다</span>
      </div>
    </div>
  );
}