05色分離の値だけずれて壊れるグリッチ文字

<main class="stage">
<div class="gl is-demo" id="gl">
  <p class="gl__badge"><span class="gl__badgeLabel">分離距離</span> <span class="gl__badgeValue" id="glValue">0.0px</span></p>
  <button type="button" class="gl__word" id="glWord">グリッチ</button>
  <p class="gl__hint">クリックするとまた崩れる</p>
</div>
</main>

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

// 핵심: 값(mag) 하나를 고정 시드 PRNG 로 흔들어 빨강·파랑 그림자를 반대 방향으로 벌린다.
// mag 가 커질수록 화면이 어긋난 신호처럼 거칠게 깨진다. 클릭하면 시드를 새로 돌려 다시 깨진다.

$duration: $dur-instant;
$easing: linear;
$color: $subject-cream;

@include stage($stage-ink);

.gl {
  display: grid;
  gap: $sp-3;
  justify-items: center;
  text-align: center;
}

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

.gl__word {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(60px, 20vw, 116px);
  line-height: 1;
  white-space: nowrap;
  color: $color;
  font-family: inherit;
  will-change: text-shadow;
}

.gl__word:focus-visible {
  outline: 2px solid $subject-cream;
  outline-offset: 6px;
}

.gl__hint {
  margin: 0;
  color: rgba(255, 247, 230, .6);
  font-size: 11px;
}

@media (max-width: 340px) {
  .gl__word { font-size: clamp(44px, 22vw, 76px); }
}

@media (prefers-reduced-motion: reduce) {
  .gl__word { transition: none; }
}

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

.gl {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

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

.gl__word {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: clamp(60px, 20vw, 116px);
  line-height: 1;
  white-space: nowrap;
  color: #fff7e6;
  font-family: inherit;
  will-change: text-shadow;
}

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

.gl__hint {
  margin: 0;
  color: rgba(255, 247, 230, 0.6);
  font-size: 11px;
}

@media (max-width: 340px) {
  .gl__word {
    font-size: clamp(44px, 22vw, 76px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl__word {
    transition: none;
  }
}

(function () {
  var GLITCH_SPLIT_PX = 2;
  var BURST_PX = GLITCH_SPLIT_PX * 14;
  var PULSE_MS = 480;

  var word = document.getElementById('glWord');
  var value = document.getElementById('glValue');
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var seed = 11;

  // 고정 시드 PRNG — Math.random 대신 프레임마다 같은 규칙으로 다음 값을 만든다
  function seedRand(s) {
    return function () {
      s = (s * 1103515245 + 12345) & 0x7fffffff;
      return s / 0x7fffffff;
    };
  }
  var rnd = seedRand(seed);

  // 값(mag) 하나를 시드 노이즈로 흔들어 빨강·파랑 그림자를 반대 방향으로 어긋나게 한다
  function buildGlitchShadow(mag) {
    var rx = (mag * (rnd() * 2 - 1)).toFixed(2);
    var ry = (mag * 0.28 * (rnd() * 2 - 1)).toFixed(2);
    var bx = (-mag * (rnd() * 2 - 1)).toFixed(2);
    var by = (-mag * 0.28 * (rnd() * 2 - 1)).toFixed(2);
    return [
      rx + 'px ' + ry + 'px 0 rgba(255,54,96,.88)',
      bx + 'px ' + by + 'px 0 rgba(58,164,255,.88)'
    ].join(', ');
  }

  function renderGlitch(mag) {
    word.style.textShadow = buildGlitchShadow(mag);
    value.textContent = mag.toFixed(1) + 'px';
  }

  var burstUntil = 0;
  var startTime = null;
  function loop(now) {
    if (startTime === null) startTime = now;
    var t = (now - startTime) % PULSE_MS;
    var tri = Math.abs((t / PULSE_MS) * 2 - 1);
    var mag = GLITCH_SPLIT_PX * (0.3 + tri * 9.5);
    if (now < burstUntil) mag = BURST_PX;
    renderGlitch(mag);
    requestAnimationFrame(loop);
  }

  word.addEventListener('click', function () {
    seed = (seed * 977 + 313) & 0x7fffffff;
    rnd = seedRand(seed || 1);
    burstUntil = performance.now() + 220;
    if (reduce) renderGlitch(BURST_PX);
  });

  if (reduce) {
    renderGlitch(GLITCH_SPLIT_PX);
  } else {
    requestAnimationFrame(loop);
  }
})();

// TextShadowGlitchRgbSplit — vanilla 판(run/412/demo/05-text-shadow-glitch-rgb-split/index.html) 의 React 포트.
// 값(mag) 하나를 고정 시드 PRNG 로 흔들어 빨강·파랑 그림자를 반대 방향으로 벌린다.
// 클릭하면 시드를 새로 돌려 다시 깨진다.
import { useEffect, useRef, useState } from "react";
import styles from "./TextShadowGlitchRgbSplit.module.scss";

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

const GLITCH_SPLIT_PX = 2;
const BURST_PX = GLITCH_SPLIT_PX * 14;
const PULSE_MS = 480;

function seedRand(s: number): () => number {
  let state = s;
  return function () {
    state = (state * 1103515245 + 12345) & 0x7fffffff;
    return state / 0x7fffffff;
  };
}

function buildGlitchShadow(mag: number, rnd: () => number): string {
  const rx = (mag * (rnd() * 2 - 1)).toFixed(2);
  const ry = (mag * 0.28 * (rnd() * 2 - 1)).toFixed(2);
  const bx = (-mag * (rnd() * 2 - 1)).toFixed(2);
  const by = (-mag * 0.28 * (rnd() * 2 - 1)).toFixed(2);
  return [
    rx + "px " + ry + "px 0 rgba(255,54,96,.88)",
    bx + "px " + by + "px 0 rgba(58,164,255,.88)"
  ].join(", ");
}

export default function TextShadowGlitchRgbSplit() {
  const wordRef = useRef<HTMLButtonElement | null>(null);
  const valueRef = useRef<HTMLSpanElement | null>(null);
  const t0Ref = useRef<number>(0) as Box<number>;
  const frameRef = useRef<number>(0) as Box<number>;
  const seedRef = useRef<number>(11) as Box<number>;
  const rndRef = useRef<() => number>(seedRand(11)) as Box<() => number>;
  const burstUntilRef = useRef<number>(0) as Box<number>;
  const [reduce, setReduce] = useState(false);

  function render(mag: number): void {
    const word = wordRef.current;
    const value = valueRef.current;
    if (!word || !value) return;
    word.style.textShadow = buildGlitchShadow(mag, rndRef.current);
    value.textContent = mag.toFixed(1) + "px";
  }

  useEffect(() => {
    setReduce(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
  }, []);

  useEffect(() => {
    if (reduce) {
      render(GLITCH_SPLIT_PX);
      return;
    }
    function loop(now: number): void {
      if (t0Ref.current === 0) t0Ref.current = now;
      const t = (now - t0Ref.current) % PULSE_MS;
      const tri = Math.abs((t / PULSE_MS) * 2 - 1);
      let mag = GLITCH_SPLIT_PX * (0.3 + tri * 9.5);
      if (now < burstUntilRef.current) mag = BURST_PX;
      render(mag);
      frameRef.current = requestAnimationFrame(loop);
    }
    frameRef.current = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(frameRef.current);
  }, [reduce]);

  function onClick(): void {
    seedRef.current = (seedRef.current * 977 + 313) & 0x7fffffff;
    rndRef.current = seedRand(seedRef.current || 1);
    burstUntilRef.current = performance.now() + 220;
    if (reduce) render(BURST_PX);
  }

  return (
    <main className={styles.stage}>
      <div className={[styles.gl, styles.isDemo].join(" ")}>
        <p className={styles.badge}><span>분리 거리</span> <span ref={valueRef}>0.0px</span></p>
        <button type="button" className={styles.word} ref={wordRef} onClick={onClick}>글리치</button>
        <p className={styles.hint}>클릭하면 다시 깨진다</p>
      </div>
    </main>
  );
}