광택 말풍선이 천천히 위아래로 떠다니는 효과

import { useEffect, useRef } from "react";

const BUBBLE = "https://nnuer.site/brand/landing/bubble.webp";

/** A glossy speech bubble that drifts up 10px and back, slowly and forever */
export default function FloatingBubble() {
  const bubble = useRef<HTMLImageElement>(null);

  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const float = bubble.current?.animate(
      [{ translate: "0 0" }, { translate: "0 -10px" }, { translate: "0 0" }],
      { duration: 3200, iterations: Infinity, easing: "ease-in-out" },
    );
    return () => float?.cancel();
  }, []);

  return (
    <section className="grid w-full place-items-center bg-[#fbfbfc] px-4 py-24">
      <img ref={bubble} src={BUBBLE} alt="" className="block h-auto w-[150px]" />
    </section>
  );
}