헤드라인 속 광택 타일이 회전하며 튀어나오는 등장 효과

import { useEffect, useRef, useState } from "react";

const ART = "https://nnuer.site/brand/landing";
const ROWS = [
  { before: "AI로 만든", tile: "tile-violet.webp", after: "화면을" },
  { before: "프롬프트", tile: "tile-pink.webp", after: "그대로" },
  { before: "다시 만드는", tile: "tile-cyan.webp", after: "곳" },
];

/** Glossy tiles inside a headline spin and spring up from nothing, one line after another */
export default function TilePopHeadline() {
  const tiles = useRef<(HTMLImageElement | null)[]>([]);
  const [run, setRun] = useState(0);

  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const animations = tiles.current.map((tile, i) =>
      tile?.animate([{ transform: "scale(0) rotate(-30deg)" }, { transform: "scale(1) rotate(0deg)" }], {
        duration: 700,
        delay: 250 + i * 110,
        easing: "cubic-bezier(0.2, 1.4, 0.4, 1)",
        fill: "both",
      }),
    );
    return () => animations.forEach((a) => a?.cancel());
  }, [run]);

  return (
    <section className="flex w-full flex-col items-center bg-[#fbfbfc] px-4 py-20 sm:py-28">
      <h2 className="text-center text-[clamp(26px,9vw,38px)] font-bold leading-[1.1] tracking-[-0.045em] text-[#111114] sm:text-[80px]">
        {ROWS.map((row, i) => (
          <span key={row.tile} className="block whitespace-nowrap">
            {row.before}{" "}
            <img
              ref={(el) => {
                tiles.current[i] = el;
              }}
              src={`${ART}/${row.tile}`}
              alt=""
              className="relative -top-[3px] mx-0.5 inline-block w-[1.05em] align-middle sm:-top-1.5 sm:mx-1.5 sm:w-[84px]"
            />{" "}
            {row.after}
          </span>
        ))}
      </h2>
      <button
        type="button"
        onClick={() => setRun((n) => n + 1)}
        className="mt-10 rounded-full border border-black/10 bg-white px-4 py-2 text-[13px] font-semibold text-[#5c5c68] hover:text-[#111114] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#7c3aed]"
      >
        다시 보기
      </button>
    </section>
  );
}