05QR Code That Folds Into a Checkmark the Instant It Is Read

<main class="stage">
<div class="ssc is-demo" id="sscRoot">
  <div class="ssc__badge" id="sscBadge">Waiting to scan</div>
  <button class="ssc__ctrl" id="sscCtrl" type="button">Pause</button>
  <div class="ssc__canvas-wrap">
    <canvas class="ssc__canvas" id="sscCanvas" width="240" height="200"></canvas>
  </div>
</div>
</main>

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

// 핵심: 팝 단계의 배지 스케일을 감쇠 코사인 근사(스프링 오버슛)로 계산한다 —
// 목표 크기를 살짝 넘겼다가 제자리로 돌아오는 단일 식이라 CSS 트윈보다 자연스럽다.

@include stage($stage-ink);

.ssc {
  position: relative;
  width: min(100%, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-3;
}

.ssc__badge {
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: rgba(255, 247, 230, .08);
  color: $subject-cream;
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ssc__ctrl {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: $r-xs;
  padding: $sp-1 $sp-2;
  background: rgba(255, 247, 230, .12);
  color: $subject-cream;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
.ssc__ctrl:focus-visible { outline: 2px solid $subject-blue-light; outline-offset: 2px; }

.ssc__canvas-wrap {
  width: 100%;
  aspect-ratio: 7 / 5;
  border-radius: $r-card;
  background: rgba(255, 255, 255, .04);
  display: grid;
  place-items: center;
  overflow: hidden;
}

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

@media (max-width: 340px) {
  .ssc { gap: $sp-1; }
  .ssc__badge { padding: $sp-1 $sp-2; font-size: 10px; }
  .ssc__canvas-wrap { max-width: 150px; aspect-ratio: 3 / 2; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ssc__canvas-wrap { background: rgba(255, 255, 255, .04); }
}

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);
}

.ssc {
  position: relative;
  width: min(100%, 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ssc__badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 247, 230, 0.08);
  color: #fff7e6;
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.ssc__ctrl {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(255, 247, 230, 0.12);
  color: #fff7e6;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}

.ssc__ctrl:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 2px;
}

.ssc__canvas-wrap {
  width: 100%;
  aspect-ratio: 7/5;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  place-items: center;
  overflow: hidden;
}

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

@media (max-width: 340px) {
  .ssc {
    gap: 4px;
  }
  .ssc__badge {
    padding: 4px 8px;
    font-size: 10px;
  }
  .ssc__canvas-wrap {
    max-width: 150px;
    aspect-ratio: 3/2;
    margin: 0 auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ssc__canvas-wrap {
    background: rgba(255, 255, 255, 0.04);
  }
}

(function () {
  // SUCCESS_CHECK_SPRING_OVERSHOOT — 변형 1: 0.18 → 0.32 로 늘리면 체크 배지가 더 크게 튕긴다.
  var SUCCESS_CHECK_SPRING_OVERSHOOT = 0.18;
  var LOOP_MS = 2000;
  var DRAW_START = 200, DRAW_END = 620;
  var POP_START = 560, POP_END = 980;

  var canvas = document.getElementById('sscCanvas');
  var ctx = canvas.getContext('2d');
  var badge = document.getElementById('sscBadge');
  var ctrl = document.getElementById('sscCtrl');
  var root = document.getElementById('sscRoot');

  // 계산 한 겹: 감쇠 스프링 근사 — overshoot 비율만큼 목표를 넘었다가 되돌아오는
  // 단일 코사인 감쇠식으로 배지 스케일을 만든다 (linear tween 아님).
  function springScale(p, overshoot) {
    if (p <= 0) return 0;
    if (p >= 1) return 1;
    var decay = Math.exp(-4.5 * p);
    return 1 + overshoot * decay * Math.cos(p * Math.PI * 2.2);
  }

  function clamp01(v) { return v < 0 ? 0 : (v > 1 ? 1 : v); }

  function draw(elapsed) {
    var cw = canvas.width, ch = canvas.height;
    ctx.clearRect(0, 0, cw, ch);
    var cx = cw / 2, cy = ch / 2;

    var drawP = clamp01((elapsed - DRAW_START) / (DRAW_END - DRAW_START));
    var popP = clamp01((elapsed - POP_START) / (POP_END - POP_START));

    var box = 70;
    ctx.strokeStyle = 'rgba(255,255,255,.14)';
    ctx.lineWidth = 2;
    ctx.strokeRect(cx - box / 2, cy - box / 2, box, box);

    if (drawP > 0 && popP < 1) {
      ctx.save();
      ctx.strokeStyle = 'rgba(120,200,255,.9)';
      ctx.lineWidth = 3;
      ctx.beginPath();
      ctx.moveTo(cx - box / 2 + 6, cy - box / 2 + drawP * (box - 12) + 6);
      ctx.stroke();
      ctx.restore();
    }

    if (popP > 0) {
      var scale = springScale(popP, SUCCESS_CHECK_SPRING_OVERSHOOT);
      var r = 40 * scale;
      ctx.fillStyle = 'rgba(120,220,170,.92)';
      ctx.beginPath();
      ctx.arc(cx, cy, Math.max(0, r), 0, Math.PI * 2);
      ctx.fill();

      if (r > 8) {
        ctx.strokeStyle = 'rgb(20,26,38)';
        ctx.lineWidth = 4;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.beginPath();
        ctx.moveTo(cx - 14, cy + 1);
        ctx.lineTo(cx - 4, cy + 12);
        ctx.lineTo(cx + 16, cy - 12);
        ctx.stroke();
      }
    }

    if (popP >= 1) {
      badge.textContent = 'Scan complete';
    } else if (drawP > 0) {
      badge.textContent = 'Verifying ' + Math.round(drawP * 100) + '%';
    } else {
      badge.textContent = 'Waiting to scan';
    }
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var playing = true;
  var elapsed = reduce ? POP_END : 0;
  if (reduce) {
    playing = false;
    root.classList.remove('is-demo');
  }

  var lastTs = null;
  function tick(ts) {
    if (lastTs === null) lastTs = ts;
    var dt = ts - lastTs;
    lastTs = ts;
    if (playing) {
      elapsed += dt;
      if (elapsed >= LOOP_MS) elapsed -= LOOP_MS;
    }
    draw(elapsed);
    requestAnimationFrame(tick);
  }
  draw(elapsed);
  requestAnimationFrame(tick);

  ctrl.addEventListener('click', function () {
    playing = !playing;
    ctrl.textContent = playing ? 'Pause' : 'Play';
  });
  ctrl.addEventListener('keydown', function (e) {
    if ((e.key === 'r' || e.key === 'R') && !reduce) {
      elapsed = 0;
      playing = true;
      ctrl.textContent = 'Pause';
    }
  });
})();

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

export default function ScanSuccessCheckmark() {
  const rootRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const ctrlRef = useRef<HTMLButtonElement>(null);
  const [badge, setBadge] = useState("스캔 대기");
  const [ctrlLabel, setCtrlLabel] = useState("일시정지");

  useEffect(() => {
    const root = rootRef.current;
    const canvas = canvasRef.current;
    const ctrl = ctrlRef.current;
    if (!root || !canvas || !ctrl) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    // SUCCESS_CHECK_SPRING_OVERSHOOT — 변형 1: 0.18 → 0.32 로 늘리면 체크 배지가 더 크게 튕긴다.
    const SUCCESS_CHECK_SPRING_OVERSHOOT = 0.18;
    const LOOP_MS = 2000;
    const DRAW_START = 200, DRAW_END = 620;
    const POP_START = 560, POP_END = 980;

    // 계산 한 겹: 감쇠 스프링 근사 — overshoot 비율만큼 목표를 넘었다가 되돌아오는
    // 단일 코사인 감쇠식으로 배지 스케일을 만든다 (linear tween 아님).
    function springScale(p: number, overshoot: number) {
      if (p <= 0) return 0;
      if (p >= 1) return 1;
      const decay = Math.exp(-4.5 * p);
      return 1 + overshoot * decay * Math.cos(p * Math.PI * 2.2);
    }

    function clamp01(v: number) { return v < 0 ? 0 : v > 1 ? 1 : v; }

    function draw(elapsed: number) {
      const cw = canvas!.width, ch = canvas!.height;
      ctx!.clearRect(0, 0, cw, ch);
      const cx = cw / 2, cy = ch / 2;

      const drawP = clamp01((elapsed - DRAW_START) / (DRAW_END - DRAW_START));
      const popP = clamp01((elapsed - POP_START) / (POP_END - POP_START));

      const box = 70;
      ctx!.strokeStyle = "rgba(255,255,255,.14)";
      ctx!.lineWidth = 2;
      ctx!.strokeRect(cx - box / 2, cy - box / 2, box, box);

      if (drawP > 0 && popP < 1) {
        ctx!.save();
        ctx!.strokeStyle = "rgba(120,200,255,.9)";
        ctx!.lineWidth = 3;
        ctx!.beginPath();
        ctx!.moveTo(cx - box / 2 + 6, cy - box / 2 + drawP * (box - 12) + 6);
        ctx!.stroke();
        ctx!.restore();
      }

      if (popP > 0) {
        const scale = springScale(popP, SUCCESS_CHECK_SPRING_OVERSHOOT);
        const r = 40 * scale;
        ctx!.fillStyle = "rgba(120,220,170,.92)";
        ctx!.beginPath();
        ctx!.arc(cx, cy, Math.max(0, r), 0, Math.PI * 2);
        ctx!.fill();

        if (r > 8) {
          ctx!.strokeStyle = "rgb(20,26,38)";
          ctx!.lineWidth = 4;
          ctx!.lineCap = "round";
          ctx!.lineJoin = "round";
          ctx!.beginPath();
          ctx!.moveTo(cx - 14, cy + 1);
          ctx!.lineTo(cx - 4, cy + 12);
          ctx!.lineTo(cx + 16, cy - 12);
          ctx!.stroke();
        }
      }

      if (popP >= 1) {
        setBadge("스캔 완료");
      } else if (drawP > 0) {
        setBadge("확인 중 " + Math.round(drawP * 100) + "%");
      } else {
        setBadge("스캔 대기");
      }
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let playing = true;
    let elapsed = reduce ? POP_END : 0;
    if (reduce) {
      playing = false;
      root.classList.remove("is-demo");
    }

    let lastTs: number | null = null;
    let raf = 0;
    function tick(ts: number) {
      if (lastTs === null) lastTs = ts;
      const dt = ts - lastTs;
      lastTs = ts;
      if (playing) {
        elapsed += dt;
        if (elapsed >= LOOP_MS) elapsed -= LOOP_MS;
      }
      draw(elapsed);
      raf = requestAnimationFrame(tick);
    }
    draw(elapsed);
    raf = requestAnimationFrame(tick);

    function onClick() {
      playing = !playing;
      setCtrlLabel(playing ? "일시정지" : "재생");
    }
    function onKeydown(e: KeyboardEvent) {
      if ((e.key === "r" || e.key === "R") && !reduce) {
        elapsed = 0;
        playing = true;
        setCtrlLabel("일시정지");
      }
    }
    ctrl.addEventListener("click", onClick);
    ctrl.addEventListener("keydown", onKeydown);

    return () => {
      cancelAnimationFrame(raf);
      ctrl.removeEventListener("click", onClick);
      ctrl.removeEventListener("keydown", onKeydown);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={`${styles.ssc} is-demo`} ref={rootRef}>
        <div className={styles.ssc__badge}>{badge}</div>
        <button className={styles.ssc__ctrl} type="button" ref={ctrlRef}>{ctrlLabel}</button>
        <div className={styles["ssc__canvas-wrap"]}>
          <canvas className={styles.ssc__canvas} ref={canvasRef} width={240} height={200} />
        </div>
      </div>
    </main>
  );
}