03Background Image Swept by a Diagonal Boundary Value

<main class="stage">
<div class="mwi is-demo" id="mwiRoot">
  <div class="mwi__badge" id="mwiBadge">entry range 0%~0%</div>
  <button class="mwi__ctrl" id="mwiCtrl" type="button">Pause</button>
  <div class="mwi__view" id="mwiView">
    <div class="mwi__track" id="mwiTrack">
      <div class="mwi__spacer mwi__spacer--top"></div>
      <div class="mwi__frame" id="mwiFrame">
        <div class="mwi__pic" id="mwiPic"></div>
      </div>
      <div class="mwi__spacer mwi__spacer--bottom"></div>
    </div>
  </div>
</div>
</main>

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

// 핵심: animation-timeline: view() + animation-range: entry 로 등록 커스텀 프로퍼티
// --wipe(퍼센트)를 진입 구간 값에 직접 묶고, mask-image 그라디언트 경계를 그 값으로
// 계산해 번지듯 드러낸다. 미지원 환경은 교차 비율로 같은 그라디언트를 계산해 그린다.

@property --wipe {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

$duration: $dur-loop;
$easing: linear;
$color: $subject-orange-deep;

@include stage($stage-orange);

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

.mwi__badge {
  padding: $sp-1 $sp-3;
  border-radius: $r-pill;
  background: rgba(23, 20, 26, .10);
  color: $subject-ink;
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mwi__ctrl {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: $r-xs;
  padding: $sp-1 $sp-2;
  background: rgba(23, 20, 26, .14);
  color: $subject-ink;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}
.mwi__ctrl:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }

.mwi__view {
  box-sizing: border-box;
  width: 100%;
  height: 176px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: $r-card;
  background: rgba(23, 20, 26, .08);
  scrollbar-width: thin;
}

.mwi__track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mwi__spacer--top { height: 190px; flex: 0 0 auto; }
.mwi__spacer--bottom { height: 40px; flex: 0 0 auto; }

.mwi__frame {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 216px;
  height: 96px;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
}

.mwi__pic {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, $subject-sky 0%, transparent 55%),
    linear-gradient(135deg, $subject-blue-deep, $color);
  -webkit-mask-image: linear-gradient(135deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
  mask-image: linear-gradient(135deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
}

.supports-vt .mwi__pic {
  animation-name: mwiWipe;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry;
}
@keyframes mwiWipe {
  0%   { --wipe: 0%; }
  100% { --wipe: 100%; }
}

@media (max-width: 340px) {
  .mwi { gap: $sp-2; }
  .mwi__view { height: 130px; }
  .mwi__spacer--top { height: 130px; }
  .mwi__spacer--bottom { height: 26px; }
  .mwi__frame { width: 176px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .mwi__pic {
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

@property --wipe {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}
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);
}

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

.mwi__badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(23, 20, 26, 0.1);
  color: #17141a;
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mwi__ctrl {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  background: rgba(23, 20, 26, 0.14);
  color: #17141a;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.4;
  cursor: pointer;
}

.mwi__ctrl:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.mwi__view {
  box-sizing: border-box;
  width: 100%;
  height: 176px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 16px;
  background: rgba(23, 20, 26, 0.08);
  scrollbar-width: thin;
}

.mwi__track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mwi__spacer--top {
  height: 190px;
  flex: 0 0 auto;
}

.mwi__spacer--bottom {
  height: 40px;
  flex: 0 0 auto;
}

.mwi__frame {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 216px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}

.mwi__pic {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, #6ec8ff 0%, transparent 55%), linear-gradient(135deg, #0a4fe8, #c93000);
  -webkit-mask-image: linear-gradient(135deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
  mask-image: linear-gradient(135deg, #000 calc(var(--wipe) - 12%), transparent var(--wipe));
}

.supports-vt .mwi__pic {
  animation-name: mwiWipe;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: view();
  animation-range: entry;
}

@keyframes mwiWipe {
  0% {
    --wipe: 0%;
  }
  100% {
    --wipe: 100%;
  }
}
@media (max-width: 340px) {
  .mwi {
    gap: 8px;
  }
  .mwi__view {
    height: 130px;
  }
  .mwi__spacer--top {
    height: 130px;
  }
  .mwi__spacer--bottom {
    height: 26px;
  }
  .mwi__frame {
    width: 176px;
    height: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mwi__pic {
    animation: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

(function () {
  var supportsVt = CSS.supports('animation-timeline: view()');
  var root = document.getElementById('mwiRoot');
  var view = document.getElementById('mwiView');
  var frame = document.getElementById('mwiFrame');
  var pic = document.getElementById('mwiPic');
  var badge = document.getElementById('mwiBadge');
  var ctrl = document.getElementById('mwiCtrl');
  root.classList.add(supportsVt ? 'supports-vt' : 'no-vt');

  // 계산 한 겹: 요소 높이·뷰포트 높이에서 진입 구간(시작~끝 %) 값을 구해 배지에 표시한다.
  function entryRangePct() {
    var elH = frame.offsetHeight;
    var viewH = view.clientHeight;
    return Math.round(Math.min(100, (elH / viewH) * 100));
  }
  var rangeEnd = entryRangePct();
  var rangeText = 'entry range 0%~' + rangeEnd + '%';

  function render(ratio) {
    if (!supportsVt) {
      var edge = Math.max(0, ratio * 100 - 12);
      var full = ratio * 100;
      var grad = 'linear-gradient(135deg, #000 ' + edge.toFixed(1) + '%, transparent ' + full.toFixed(1) + '%)';
      pic.style.maskImage = grad;
      pic.style.webkitMaskImage = grad;
    }
    badge.textContent = rangeText + ' · progress ' + Math.round(ratio * 100) + '%';
  }

  var lastRatio = 0;
  if (!supportsVt) {
    var STEPS = [];
    for (var s = 0; s <= 50; s += 1) { STEPS.push(s / 50); }
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        lastRatio = entry.intersectionRatio;
        render(lastRatio);
      });
    }, { root: view, threshold: STEPS });
    io.observe(frame);
  } else {
    badge.textContent = rangeText;
  }

  view.addEventListener('scroll', function () {
    if (supportsVt) {
      var max = view.scrollHeight - view.clientHeight;
      var p = max > 0 ? Math.min(1, Math.max(0, view.scrollTop / max)) : 0;
      badge.textContent = rangeText + ' · scroll ' + Math.round(p * 100) + '%';
    }
  }, { passive: true });

  // 자동 시연: rAF 로 프레임을 누적해 컨테이너를 왕복 스크롤한다.
  var playing = true;
  var frameN = 0;
  var PERIOD = 66;
  function tick() {
    if (playing) {
      frameN += 1;
      var max = view.scrollHeight - view.clientHeight;
      var t = frameN % (PERIOD * 2);
      var f = t < PERIOD ? (t / PERIOD) : ((PERIOD * 2 - t) / PERIOD);
      view.scrollTop = f * max;
    }
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);

  function stopAuto() {
    if (root.classList.contains('is-demo')) { root.classList.remove('is-demo'); }
    playing = false;
    ctrl.textContent = 'Play';
  }
  view.addEventListener('wheel', stopAuto, { passive: true });
  view.addEventListener('touchstart', stopAuto, { passive: true });

  ctrl.addEventListener('click', function () {
    playing = !playing;
    ctrl.textContent = playing ? 'Pause' : 'Play';
    if (playing) { root.classList.add('is-demo'); }
  });
  ctrl.addEventListener('keydown', function (e) {
    if (e.key === 'r' || e.key === 'R') {
      frameN = 0;
      view.scrollTop = 0;
      lastRatio = 0;
      render(0);
      playing = true;
      root.classList.add('is-demo');
      ctrl.textContent = 'Pause';
    }
  });

  window.addEventListener('resize', function () {
    rangeEnd = entryRangePct();
    rangeText = 'entry range 0%~' + rangeEnd + '%';
  });

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) {
    playing = false;
    root.classList.remove('is-demo');
    lastRatio = 1;
    render(1);
    pic.style.maskImage = 'none';
    pic.style.webkitMaskImage = 'none';
    badge.textContent = rangeText + ' · final state';
  }
})();

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

// 핵심: animation-timeline: view() + animation-range: entry 로 등록 커스텀 프로퍼티
// --wipe(퍼센트)를 진입 구간 값에 직접 묶고, mask-image 그라디언트 경계를 그 값으로
// 계산해 대각선으로 번지듯 드러낸다. 미지원 환경은 교차 비율로 같은 그라디언트를 계산한다.
export default function MaskWipeImage() {
  const rootRef = useRef<HTMLDivElement>(null);
  const viewRef = useRef<HTMLDivElement>(null);
  const frameRef = useRef<HTMLDivElement>(null);
  const picRef = useRef<HTMLDivElement>(null);
  const [badge, setBadge] = useState("진입 구간 0%~0%");
  const [demo, setDemo] = useState(true);
  const [supportsVt, setSupportsVt] = useState(false);

  useEffect(() => {
    const view = viewRef.current;
    const frame = frameRef.current;
    const pic = picRef.current;
    const root = rootRef.current;
    if (!view || !frame || !pic || !root) { return; }

    const vt = CSS.supports("animation-timeline: view()");
    setSupportsVt(vt);

    function entryRangePct() {
      const elH = frame!.offsetHeight;
      const viewH = view!.clientHeight;
      return Math.round(Math.min(100, (elH / viewH) * 100));
    }
    let rangeEnd = entryRangePct();
    let rangeText = "진입 구간 0%~" + rangeEnd + "%";

    function render(ratio: number) {
      if (!vt) {
        const edge = Math.max(0, ratio * 100 - 12);
        const full = ratio * 100;
        const grad = "linear-gradient(135deg, #000 " + edge.toFixed(1) + "%, transparent " + full.toFixed(1) + "%)";
        pic!.style.maskImage = grad;
        pic!.style.webkitMaskImage = grad;
      }
      setBadge(rangeText + " · 진행 " + Math.round(ratio * 100) + "%");
    }

    let io: IntersectionObserver | null = null;
    if (!vt) {
      const STEPS: number[] = [];
      for (let s = 0; s <= 50; s += 1) { STEPS.push(s / 50); }
      io = new IntersectionObserver((entries) => {
        entries.forEach((entry) => { render(entry.intersectionRatio); });
      }, { root: view, threshold: STEPS });
      io.observe(frame);
    } else {
      setBadge(rangeText);
    }

    function onScroll() {
      if (vt) {
        const max = view!.scrollHeight - view!.clientHeight;
        const p = max > 0 ? Math.min(1, Math.max(0, view!.scrollTop / max)) : 0;
        setBadge(rangeText + " · 스크롤 " + Math.round(p * 100) + "%");
      }
    }
    view.addEventListener("scroll", onScroll, { passive: true });

    let playing = true;
    let frameN = 0;
    const PERIOD = 66;
    let rafId = 0;
    function tick() {
      if (playing) {
        frameN += 1;
        const max = view!.scrollHeight - view!.clientHeight;
        const t = frameN % (PERIOD * 2);
        const f = t < PERIOD ? (t / PERIOD) : ((PERIOD * 2 - t) / PERIOD);
        view!.scrollTop = f * max;
      }
      rafId = requestAnimationFrame(tick);
    }
    rafId = requestAnimationFrame(tick);

    function stopAuto() {
      setDemo(false);
      playing = false;
    }
    view.addEventListener("wheel", stopAuto, { passive: true });
    view.addEventListener("touchstart", stopAuto, { passive: true });

    function onClick() {
      playing = !playing;
      setDemo(playing);
    }
    function onKeyDown(e: KeyboardEvent) {
      if (e.key === "r" || e.key === "R") {
        frameN = 0;
        view!.scrollTop = 0;
        render(0);
        playing = true;
        setDemo(true);
      }
    }
    root.addEventListener("keydown", onKeyDown);

    function onResize() {
      rangeEnd = entryRangePct();
      rangeText = "진입 구간 0%~" + rangeEnd + "%";
    }
    window.addEventListener("resize", onResize);

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      playing = false;
      setDemo(false);
      render(1);
      pic.style.maskImage = "none";
      pic.style.webkitMaskImage = "none";
      setBadge(rangeText + " · 최종 상태");
    }

    const ctrl = root.querySelector("button");
    ctrl?.addEventListener("click", onClick);

    return () => {
      cancelAnimationFrame(rafId);
      io?.disconnect();
      view.removeEventListener("scroll", onScroll);
      view.removeEventListener("wheel", stopAuto);
      view.removeEventListener("touchstart", stopAuto);
      root.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("resize", onResize);
      ctrl?.removeEventListener("click", onClick);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <main className={styles.stage}>
      <div ref={rootRef} className={`${styles.mwi} ${demo ? styles["is-demo"] : ""} ${supportsVt ? styles["supports-vt"] : styles["no-vt"]}`}>
        <div className={styles["mwi__badge"]}>{badge}</div>
        <button className={styles["mwi__ctrl"]} type="button">{demo ? "일시정지" : "재생"}</button>
        <div ref={viewRef} className={styles["mwi__view"]}>
          <div className={styles["mwi__track"]}>
            <div className={`${styles["mwi__spacer"]} ${styles["mwi__spacer--top"]}`} />
            <div ref={frameRef} className={styles["mwi__frame"]}>
              <div ref={picRef} className={styles["mwi__pic"]} />
            </div>
            <div className={`${styles["mwi__spacer"]} ${styles["mwi__spacer--bottom"]}`} />
          </div>
        </div>
      </div>
    </main>
  );
}