보라·분홍·청록 점 세 개가 차례로 튀는 보내는 중 표시

import { useEffect, useRef } from "react";

const COLORS = ["#7c3aed", "#db2777", "#0891b2"];

/** Three dots in violet, pink and teal that hop in turn, like a message being sent */
export default function SendingDots() {
  const dots = useRef<(HTMLSpanElement | null)[]>([]);

  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const animations = dots.current.map((dot, i) =>
      dot?.animate([{ transform: "translateY(0)" }, { transform: "translateY(-8px)" }, { transform: "translateY(0)" }], {
        duration: 900,
        delay: i * 150,
        iterations: Infinity,
        easing: "ease-in-out",
      }),
    );
    return () => animations.forEach((a) => a?.cancel());
  }, []);

  return (
    <section className="grid w-full place-items-center bg-[#fbfbfc] px-4 py-28">
      <span role="status" aria-label="보내는 중" className="inline-flex gap-2">
        {COLORS.map((color, i) => (
          <span
            key={color}
            ref={(el) => {
              dots.current[i] = el;
            }}
            className="size-3.5 rounded-full"
            style={{ background: color }}
          />
        ))}
      </span>
    </section>
  );
}