02대각선 와이프 마스크

<main class="stage">
  <div class="dw-wrap is-demo">
    <span class="dw-text">NEW COLLECTION</span>
    <span class="dw-mask" aria-hidden="true"></span>
  </div>
</main>

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

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

@include stage($stage-yellow);

.dw-wrap {
  position: relative;
  overflow: hidden;
  padding: $sp-2 0;
}

.dw-text {
  display: block;
  font: 800 clamp(20px, 6vw, 30px)/1.2 -apple-system, "Segoe UI", sans-serif;
  color: $color;
  letter-spacing: .01em;
  white-space: nowrap;
}

.dw-mask {
  position: absolute;
  inset: -20% -10%;
  background: $stage-yellow;
  transform: skewX(-18deg) translateX(0);
}

// 데모 루프: 무대와 같은 색 마스크가 사선으로 밀려나며 글자를 드러냈다가 다시 덮는다
// 한 겹: 관성 lerp — 마스크가 목표 지점(140%)을 지나쳤다가 되돌아오듯 $ease-lerp-settle 로 정착한다.
@keyframes dw-sweep {
  0%, 10% { transform: skewX(-18deg) translateX(0); }
  45%, 70% { transform: skewX(-18deg) translateX(140%); }
  100% { transform: skewX(-18deg) translateX(0); }
}

.dw-wrap.is-demo .dw-mask { animation: dw-sweep $duration $ease-lerp-settle infinite; }

@media (prefers-reduced-motion: reduce) {
  .dw-mask,
  .dw-wrap.is-demo .dw-mask {
    animation: none !important;
    transform: skewX(-18deg) translateX(140%) !important;
  }
}

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

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

.dw-wrap {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
}

.dw-text {
  display: block;
  font: 800 clamp(20px, 6vw, 30px)/1.2 -apple-system, "Segoe UI", sans-serif;
  color: #17141a;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.dw-mask {
  position: absolute;
  inset: -20% -10%;
  background: #ffd23f;
  transform: skewX(-18deg) translateX(0);
}

@keyframes dw-sweep {
  0%, 10% {
    transform: skewX(-18deg) translateX(0);
  }
  45%, 70% {
    transform: skewX(-18deg) translateX(140%);
  }
  100% {
    transform: skewX(-18deg) translateX(0);
  }
}
.dw-wrap.is-demo .dw-mask {
  animation: dw-sweep 2s linear(0, 0.051, 0.176, 0.341, 0.518, 0.685, 0.831, 0.947, 1.032, 1.087, 1.117, 1.126, 1.121, 1.105, 1.085, 1.062, 1.041, 1.022, 1.008, 0.997, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dw-mask,
  .dw-wrap.is-demo .dw-mask {
    animation: none !important;
    transform: skewX(-18deg) translateX(140%) !important;
  }
}

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

export interface DiagonalWipeMaskProps {
  text?: string;
  duration?: string;
  easing?: string;
}

// 실사용: 뷰포트에 들어오면 같은 배경색 마스크가 사선으로 한 번 밀려나며 글자를 드러낸다.
export default function DiagonalWipeMask({
  text = "NEW COLLECTION",
  duration = "700ms",
  easing = "ease-out",
}: DiagonalWipeMaskProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setInView(true); io.unobserve(e.target); } });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const style = { "--duration": duration, "--easing": easing } as CSSProperties;

  return (
    <div className={styles.wrap} style={style} ref={ref}>
      <span className={styles.text}>{text}</span>
      <span className={`${styles.mask} ${inView ? styles.swept : ""}`} aria-hidden="true" />
    </div>
  );
}