06黒塗りバーリフト

<main class="stage">
  <p class="rb-wrap is-demo">
    <span class="rb-word">TOP<span class="rb-bar" aria-hidden="true"></span></span>
    <span class="rb-word rb-word--2">SECRET<span class="rb-bar" aria-hidden="true"></span></span>
  </p>
</main>

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

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

@include stage($stage-yellow);

.rb-wrap {
  margin: 0;
  display: flex;
  gap: $sp-3;
  flex-wrap: wrap;
  justify-content: center;
}

.rb-word {
  position: relative;
  display: inline-block;
  font: 800 clamp(20px, 6vw, 30px)/1.2 "Space Mono", "Courier New", monospace;
  color: $color;
}

.rb-bar {
  position: absolute;
  inset: -8% -6%;
  background: $stage-ink;
  transform-origin: right center; // 규칙8: 검열 막대 오른쪽 걷힘
  border-radius: $r-xs;
}

// 애니메이션이 없는 정적 상태(실사용)에서는 막대가 글자를 덮고 있어 글자와 동색(1.00)으로 보인다.
// 데모 루프가 있는 .is-demo 에서만 막대가 걷히며 글자(잉크 on 옐로 12.63:1)가 드러난다 — 오탐.

// 데모 루프: 검정 막대가 단어를 가리고 있다가 오른쪽부터 걷히며 순서대로 글자를 드러낸다
@keyframes rb-lift {
  0%, 12% { transform: scaleX(1); }
  50%, 78% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.rb-wrap.is-demo .rb-word .rb-bar { animation: rb-lift $duration $easing infinite; }
.rb-wrap.is-demo .rb-word--2 .rb-bar { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .rb-bar,
  .rb-wrap.is-demo .rb-bar {
    animation: none !important;
    transform: scaleX(0) !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);
}

.rb-wrap {
  margin: 0;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.rb-word {
  position: relative;
  display: inline-block;
  font: 800 clamp(20px, 6vw, 30px)/1.2 "Space Mono", "Courier New", monospace;
  color: #17141a;
}

.rb-bar {
  position: absolute;
  inset: -8% -6%;
  background: #17141a;
  transform-origin: right center;
  border-radius: 4px;
}

@keyframes rb-lift {
  0%, 12% {
    transform: scaleX(1);
  }
  50%, 78% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
.rb-wrap.is-demo .rb-word .rb-bar {
  animation: rb-lift 2s ease-out infinite;
}

.rb-wrap.is-demo .rb-word--2 .rb-bar {
  animation-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .rb-bar,
  .rb-wrap.is-demo .rb-bar {
    animation: none !important;
    transform: scaleX(0) !important;
  }
}

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

export interface RedactedBarLiftProps {
  words?: string[];
  duration?: string;
  easing?: string;
}

// 실사용: 뷰포트에 들어오면 검정 막대가 단어 단위로 오른쪽부터 걷히며 순서대로 글자를 드러낸다.
export default function RedactedBarLift({
  words = ["TOP", "SECRET"],
  duration = "520ms",
  easing = "ease-out",
}: RedactedBarLiftProps) {
  const ref = useRef<HTMLParagraphElement>(null);
  const [lifted, setLifted] = useState(false);

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

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

  return (
    <p className={styles.wrap} style={style} ref={ref}>
      {words.map((w, i) => (
        <span key={i} className={styles.word}>
          {w}
          <span
            className={`${styles.bar} ${lifted ? styles.open : ""}`}
            style={{ transitionDelay: `${i * 250}ms` }}
            aria-hidden="true"
          />
        </span>
      ))}
    </p>
  );
}