문장 속 알약 안의 단어가 2초마다 위로 굴러 바뀌는 칩

import { useEffect, useState } from "react";

const TOOLS = ["채팅 AI", "코딩 에이전트", "코드 에디터", "터미널", "디자인 툴"];

/**
 * A pill inside a sentence whose word rolls up to the next one every two
 * seconds. Every word sits in the same grid cell, so the pill keeps the
 * widest word's width and the sentence never reflows.
 */
export default function RollingWordChip() {
  const [roll, setRoll] = useState({ now: 0, prev: -1 });
  const [still, setStill] = useState(false);

  useEffect(() => {
    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;
    setStill(reduced);
    if (reduced) return;
    const id = setInterval(() => setRoll((r) => ({ now: (r.now + 1) % TOOLS.length, prev: r.now })), 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="grid w-full place-items-center bg-[#fbfbfc] px-4 py-24">
      <p className="max-w-[480px] text-center text-[15.5px] leading-[1.65] text-[#5c5c68] sm:text-[18px]">
        직접 붙여 넣거나,{" "}
        <span className="sr-only">{TOOLS.join(", ")} 같은 AI 도구</span>
        <span
          aria-hidden
          className="mx-[0.12em] inline-grid h-[1.9em] overflow-hidden rounded-full border border-black/[0.08] bg-white px-[0.7em] align-[-0.55em]"
        >
          {TOOLS.map((tool, i) => {
            const state = still ? (i === 0 ? "in" : "") : i === roll.now ? "in" : i === roll.prev ? "out" : "";
            return (
              <span
                key={tool}
                className={`col-start-1 row-start-1 inline-flex items-center justify-center whitespace-nowrap font-semibold text-[#111114] transition-[transform,opacity] duration-[450ms] ease-[cubic-bezier(0.2,0.8,0.2,1)] ${
                  state === "in"
                    ? "translate-y-0 opacity-100"
                    : state === "out"
                      ? "-translate-y-full opacity-0"
                      : "translate-y-full opacity-0 duration-0"
                }`}
              >
                {tool}
              </span>
            );
          })}
        </span>
        에서 한마디로 보내세요. 처음엔 비공개로 저장됩니다.
      </p>
    </section>
  );
}