Ripple

const [ripples, setRipples] = useState<{ id: number; x: number; y: number }[]>([]);

function onTap(e: React.PointerEvent) {
  const r = e.currentTarget.getBoundingClientRect();
  setRipples((rs) => [...rs, { id: performance.now(), x: e.clientX - r.left, y: e.clientY - r.top }]);
}

<button onPointerDown={onTap} className="relative overflow-hidden">
  {ripples.map((r) => (
    <motion.span
      key={r.id}
      initial={{ scale: 0, opacity: 0.4 }}
      animate={{ scale: 4, opacity: 0 }}
      transition={{ duration: 0.6, ease: "easeOut" }}
      onAnimationComplete={() => setRipples((rs) => rs.filter((x) => x.id !== r.id))}
      style={{ position: "absolute", left: r.x, top: r.y, width: 40, height: 40, borderRadius: 999, background: "currentColor" }}
    />
  ))}
</button>