흐림이 걷히며 아래에서 차례로 떠오르는 섹션 조립

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

const ART = "https://nnuer.site/brand/landing";
const KINDS = [
  { img: "kind-block.webp", label: "UI 블록" },
  { img: "kind-interaction.webp", label: "인터랙션" },
  { img: "kind-graphic.webp", label: "그래픽" },
];

/** A section that assembles itself: each piece rises out of a blur, 110ms after the one before */
export default function BlurRiseAssemble() {
  const pieces = useRef<(HTMLElement | null)[]>([]);
  const [run, setRun] = useState(0);
  const piece = (i: number) => (el: HTMLElement | null) => {
    pieces.current[i] = el;
  };

  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const animations = pieces.current.map((el, i) =>
      el?.animate(
        [
          { opacity: 0, transform: "translateY(26px) scale(0.98)", filter: "blur(10px)" },
          { opacity: 1, transform: "none", filter: "blur(0)" },
        ],
        { duration: 800, delay: 150 + i * 110, easing: "cubic-bezier(0.2, 0.8, 0.2, 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-16 sm:py-24">
      <h2 ref={piece(0)} className="text-center text-[26px] font-bold tracking-[-0.035em] text-[#111114] sm:text-[40px]">
        세 가지를 모읍니다
      </h2>
      <p ref={piece(1)} className="mt-3 max-w-[520px] text-center text-[14.5px] leading-[1.6] text-[#5c5c68] sm:text-[17px]">
        AI 도구에서 만들고, 한마디로 올리고, 원하는 스택으로 다시 만드세요.
      </p>
      <div className="mt-8 grid w-full max-w-[880px] grid-cols-3 gap-2.5 sm:gap-[18px]">
        {KINDS.map((k, i) => (
          <div
            key={k.label}
            ref={piece(i + 2)}
            className="rounded-[20px] border border-black/[0.07] bg-gradient-to-b from-white to-[#f4f3f8] p-3 shadow-[0_30px_60px_-36px_rgba(60,40,120,0.3)] sm:rounded-[28px] sm:p-7"
          >
            <img src={`${ART}/${k.img}`} alt="" className="h-12 w-12 object-contain sm:h-[88px] sm:w-[100px] sm:object-left" />
            <h3 className="mt-3 text-[14px] font-bold tracking-[-0.02em] text-[#111114] sm:mt-6 sm:text-[22px]">{k.label}</h3>
          </div>
        ))}
      </div>
      <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>
  );
}