03Transition That Blooms in a Circle From the Clicked-Point Value

<main class="stage">
<div class="cr is-demo" id="cr">
  <div class="cr__panel" id="crPanel">
    <p class="cr__label" id="crLabel">Light mode</p>
    <div class="cr__swatches">
      <span class="cr__sw"></span><span class="cr__sw"></span><span class="cr__sw"></span>
    </div>
  </div>
  <button type="button" class="cr__toggle" id="crToggle" aria-label="Toggle theme — the circle spreads from the pressed coordinate value">
    <span class="cr__toggleDot" id="crDot"></span>
  </button>
</div>
</main>

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

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-enter;
$easing: $ease-out;
$color: $subject-cream;

@include stage($stage-orange);

.cr { position: relative; width: min(100%, 300px); height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: $sp-4; }

.cr__panel {
  position: relative; width: 100%; height: 140px; box-sizing: border-box; overflow: hidden;
  border-radius: $r-card; background: $subject-cream; padding: $sp-4;
  display: flex; flex-direction: column; justify-content: center; gap: $sp-3;
}
.cr__panel.is-dark { background: $subject-ink; }

.cr__label { margin: 0; font: 700 13px/1 -apple-system, "Segoe UI", sans-serif; color: $subject-ink; }
.cr__panel.is-dark .cr__label { color: $color; }

.cr__swatches { display: flex; gap: $sp-2; }
.cr__sw { width: 34px; height: 34px; border-radius: $r-control; background: $subject-blue; }
.cr__sw:nth-child(2) { background: $subject-orange-deep; }
.cr__sw:nth-child(3) { background: $subject-ink; }
.cr__panel.is-dark .cr__sw:nth-child(3) { background: $subject-cream; }

.cr__toggle {
  position: absolute; bottom: $sp-2; right: $sp-2; width: 40px; height: 40px; border-radius: $r-pill;
  border: none; background: $subject-ink; cursor: pointer; display: grid; place-items: center;
}
.cr__toggle:focus-visible { outline: 2px solid $subject-cream; outline-offset: 2px; }
.cr__toggleDot { width: 16px; height: 16px; border-radius: 50%; background: $color; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 340px) {
  .cr { height: 150px; gap: $sp-2; }
  .cr__panel { height: 108px; padding: $sp-3; gap: $sp-2; }
  .cr__sw { width: 26px; height: 26px; }
  .cr__toggle { width: 32px; height: 32px; }
  .cr__toggleDot { width: 12px; height: 12px; }
}

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

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

.cr {
  position: relative;
  width: min(100%, 300px);
  height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.cr__panel {
  position: relative;
  width: 100%;
  height: 140px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px;
  background: #fff7e6;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.cr__panel.is-dark {
  background: #17141a;
}

.cr__label {
  margin: 0;
  font: 700 13px/1 -apple-system, "Segoe UI", sans-serif;
  color: #17141a;
}

.cr__panel.is-dark .cr__label {
  color: #fff7e6;
}

.cr__swatches {
  display: flex;
  gap: 8px;
}

.cr__sw {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #2f6df6;
}

.cr__sw:nth-child(2) {
  background: #c93000;
}

.cr__sw:nth-child(3) {
  background: #17141a;
}

.cr__panel.is-dark .cr__sw:nth-child(3) {
  background: #fff7e6;
}

.cr__toggle {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: #17141a;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.cr__toggle:focus-visible {
  outline: 2px solid #fff7e6;
  outline-offset: 2px;
}

.cr__toggleDot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff7e6;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
@media (max-width: 340px) {
  .cr {
    height: 150px;
    gap: 8px;
  }
  .cr__panel {
    height: 108px;
    padding: 12px;
    gap: 8px;
  }
  .cr__sw {
    width: 26px;
    height: 26px;
  }
  .cr__toggle {
    width: 32px;
    height: 32px;
  }
  .cr__toggleDot {
    width: 12px;
    height: 12px;
  }
}

(function () {
  var SUPPORTS_VT = 'startViewTransition' in document;

  var root = document.getElementById('cr');
  var panel = document.getElementById('crPanel');
  var label = document.getElementById('crLabel');
  var toggle = document.getElementById('crToggle');
  var dot = document.getElementById('crDot');
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  var dark = false;
  var isDemo = true;
  var CLIP_START_RADIUS_PX = 0;

  function human() {
    if (isDemo) { root.classList.remove('is-demo'); isDemo = false; }
  }

  function renderState() {
    panel.classList.toggle('is-dark', dark);
    label.textContent = dark ? 'Dark mode' : 'Light mode';
  }

  // 계산 겹: 누른 좌표 값(x, y)에서 패널의 네 꼭짓점까지 거리 중 가장 먼 값을 반지름으로 쓴다 —
  // 그래야 원이 다 자랐을 때 패널 전체를 남김없이 덮는다.
  function farthestCornerRadius(x, y, rect) {
    var corners = [
      [0, 0], [rect.width, 0], [0, rect.height], [rect.width, rect.height]
    ];
    var r = 0;
    for (var i = 0; i < corners.length; i++) {
      var dx = x - corners[i][0];
      var dy = y - corners[i][1];
      r = Math.max(r, Math.hypot(dx, dy));
    }
    return r;
  }

  function playClip(x, y, rect) {
    if (!SUPPORTS_VT || !panel.animate) { renderState(); return; }
    var radius = farthestCornerRadius(x, y, rect);
    panel.style.viewTransitionName = 'cr-panel';
    var t = document.startViewTransition(function () { renderState(); });
    t.ready.then(function () {
      document.documentElement.animate(
        { clipPath: ['circle(' + CLIP_START_RADIUS_PX + 'px at ' + x + 'px ' + y + 'px)', 'circle(' + radius.toFixed(1) + 'px at ' + x + 'px ' + y + 'px)'] },
        { duration: 520, easing: 'ease-in', pseudoElement: '::view-transition-new(cr-panel)' }
      );
    });
    t.finished.then(function () { panel.style.viewTransitionName = ''; });
  }

  function toggleAt(x, y) {
    dark = !dark;
    var rect = panel.getBoundingClientRect();
    var lx = x - rect.left;
    var ly = y - rect.top;
    playClip(lx, ly, rect);
  }

  toggle.addEventListener('click', function (e) {
    human();
    toggleAt(e.clientX, e.clientY);
  });
  root.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' || e.key === ' ') {
      human();
      var r = toggle.getBoundingClientRect();
      e.preventDefault();
      toggleAt(r.left + r.width / 2, r.top + r.height / 2);
    }
  });

  var corners = [
    function () { var r = panel.getBoundingClientRect(); return [r.left + 8, r.top + 8]; },
    function () { var r = panel.getBoundingClientRect(); return [r.right - 8, r.bottom - 8]; }
  ];
  var ci = 0;
  var HOLD_MS = 1000;
  function loop() {
    if (!isDemo) return;
    var p = corners[ci % corners.length](); ci++;
    dark = !dark;
    playClip(p[0] - panel.getBoundingClientRect().left, p[1] - panel.getBoundingClientRect().top, panel.getBoundingClientRect());
    window.setTimeout(loop, HOLD_MS);
  }

  if (!reduce) {
    window.setTimeout(loop, HOLD_MS);
  } else {
    root.classList.remove('is-demo');
  }
})();

// ClipCircleReveal — vanilla 판(run/401/demo/03-view-transition-clip-circle-reveal/index.html) 의 React 포트.
// 계산 겹: 누른 좌표 값(x, y)에서 패널의 네 꼭짓점까지 거리 중 가장 먼 값을 반지름으로 써서
// 원이 다 자랐을 때 패널 전체를 남김없이 덮는다.
import { useEffect, useRef } from "react";
import styles from "./ClipCircleReveal.module.scss";

type Box<T> = { current: T };

const HOLD_MS = 1000;
const CLIP_START_RADIUS_PX = 0;

function farthestCornerRadius(x: number, y: number, rect: { width: number; height: number }): number {
  const corners: [number, number][] = [
    [0, 0], [rect.width, 0], [0, rect.height], [rect.width, rect.height],
  ];
  let r = 0;
  for (let i = 0; i < corners.length; i++) {
    const dx = x - corners[i][0];
    const dy = y - corners[i][1];
    r = Math.max(r, Math.hypot(dx, dy));
  }
  return r;
}

export default function ClipCircleReveal() {
  const rootRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const panelRef = useRef(null) as unknown as Box<HTMLDivElement>;
  const labelRef = useRef(null) as unknown as Box<HTMLElement>;
  const toggleRef = useRef(null) as unknown as Box<HTMLButtonElement>;
  const timerRef = useRef(0) as unknown as Box<number>;

  useEffect(() => {
    const SUPPORTS_VT = "startViewTransition" in document;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let isDemo = true;
    let dark = false;

    function human() {
      if (isDemo) { rootRef.current?.classList.remove(styles.isDemo); isDemo = false; }
    }

    function renderState() {
      panelRef.current?.classList.toggle(styles.isDark, dark);
      if (labelRef.current) labelRef.current.textContent = dark ? "어두운 모드" : "밝은 모드";
    }

    function playClip(x: number, y: number, rect: DOMRect) {
      const panel = panelRef.current;
      if (!SUPPORTS_VT || !panel || !panel.animate) { renderState(); return; }
      const radius = farthestCornerRadius(x, y, rect);
      panel.style.viewTransitionName = "cr-panel";
      const t = document.startViewTransition(() => { renderState(); });
      t.ready.then(() => {
        document.documentElement.animate(
          { clipPath: ["circle(" + CLIP_START_RADIUS_PX + "px at " + x + "px " + y + "px)", "circle(" + radius.toFixed(1) + "px at " + x + "px " + y + "px)"] },
          { duration: 520, easing: "ease-in", pseudoElement: "::view-transition-new(cr-panel)" }
        );
      });
      t.finished.then(() => { if (panel) panel.style.viewTransitionName = ""; });
    }

    function toggleAt(x: number, y: number) {
      dark = !dark;
      const panel = panelRef.current;
      if (!panel) return;
      const rect = panel.getBoundingClientRect();
      playClip(x - rect.left, y - rect.top, rect);
    }

    function onToggleClick(e: MouseEvent) { human(); toggleAt(e.clientX, e.clientY); }
    function onKeydown(e: KeyboardEvent) {
      if (e.key === "Enter" || e.key === " ") {
        human();
        const r = toggleRef.current?.getBoundingClientRect();
        if (!r) return;
        e.preventDefault();
        toggleAt(r.left + r.width / 2, r.top + r.height / 2);
      }
    }

    toggleRef.current?.addEventListener("click", onToggleClick);
    rootRef.current?.addEventListener("keydown", onKeydown);

    const corners = [
      () => { const r = panelRef.current!.getBoundingClientRect(); return [r.left + 8, r.top + 8]; },
      () => { const r = panelRef.current!.getBoundingClientRect(); return [r.right - 8, r.bottom - 8]; },
    ];
    let ci = 0;
    function loop() {
      if (!isDemo) return;
      const p = corners[ci % corners.length](); ci++;
      dark = !dark;
      const rect = panelRef.current!.getBoundingClientRect();
      playClip(p[0] - rect.left, p[1] - rect.top, rect);
      timerRef.current = window.setTimeout(loop, HOLD_MS);
    }

    if (!reduce) {
      timerRef.current = window.setTimeout(loop, HOLD_MS);
    } else {
      rootRef.current?.classList.remove(styles.isDemo);
    }

    return () => {
      window.clearTimeout(timerRef.current);
      toggleRef.current?.removeEventListener("click", onToggleClick);
      rootRef.current?.removeEventListener("keydown", onKeydown);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.cr + " " + styles.isDemo} ref={rootRef}>
        <div className={styles.panel} ref={panelRef}>
          <p className={styles.label} ref={labelRef}>밝은 모드</p>
          <div className={styles.swatches}>
            <span className={styles.sw} /><span className={styles.sw} /><span className={styles.sw} />
          </div>
        </div>
        <button type="button" className={styles.toggle} ref={toggleRef} aria-label="테마 전환 — 누른 좌표 값에서 원이 번진다">
          <span className={styles.toggleDot} />
        </button>
      </div>
    </main>
  );
}