보라 링이 계속 퍼져 나가는 검정 알약 버튼

import { useEffect, useRef } from "react";

/** A black pill button with a violet ring that keeps spreading out from it and fading */
export default function RingPulseButton() {
  const button = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const ring = button.current?.animate(
      [{ boxShadow: "0 0 0 0 rgba(124, 58, 237, 0.45)" }, { boxShadow: "0 0 0 18px rgba(124, 58, 237, 0)" }],
      { duration: 1800, delay: 1000, iterations: Infinity, easing: "ease-out" },
    );
    return () => ring?.cancel();
  }, []);

  return (
    <section className="grid w-full place-items-center bg-[#fbfbfc] px-4 py-24">
      <a
        ref={button}
        href="#"
        className="inline-flex h-[50px] items-center justify-center whitespace-nowrap rounded-full bg-[#111114] px-[26px] text-[16px] font-semibold text-white transition-[transform,background-color] duration-150 hover:bg-[#2a2a31] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-[#7c3aed] active:scale-[0.97]"
      >
        첫 블록 올리기
      </a>
    </section>
  );
}