Ripple effect

import { useState, type PointerEvent, type ReactNode } from 'react';
import { motion, useReducedMotion } from 'motion/react';

type Ripple = { id: number; x: number; y: number; size: number };

export function RippleButton({ children }: { children: ReactNode }) {
  const [ripples, setRipples] = useState<Ripple[]>([]);
  const reduceMotion = useReducedMotion();

  function spawn(rect: DOMRect, x: number, y: number) {
    if (reduceMotion) return;
    // Big enough to reach the farthest corner from the press point.
    const size =
      2 * Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y));
    setRipples((list) => [...list, { id: performance.now(), x, y, size }]);
  }

  function onPointerDown(event: PointerEvent<HTMLButtonElement>) {
    const rect = event.currentTarget.getBoundingClientRect();
    spawn(rect, event.clientX - rect.left, event.clientY - rect.top);
  }

  return (
    <button
      type='button'
      onPointerDown={onPointerDown}
      onKeyDown={(event) => {
        if (event.repeat || (event.key !== 'Enter' && event.key !== ' '))
          return;
        const rect = event.currentTarget.getBoundingClientRect();
        spawn(rect, rect.width / 2, rect.height / 2);
      }}
      className='relative isolate overflow-hidden rounded-full bg-blue-600 px-6 py-3 text-sm font-medium text-white'
    >
      {ripples.map((ripple) => (
        <motion.span
          key={ripple.id}
          aria-hidden
          initial={{ scale: 0, opacity: 0.3 }}
          animate={{ scale: 1, opacity: 0 }}
          transition={{ duration: 0.5, ease: 'easeOut' }}
          onAnimationComplete={() =>
            setRipples((list) => list.filter((r) => r.id !== ripple.id))
          }
          className='pointer-events-none absolute rounded-full bg-white'
          style={{
            left: ripple.x - ripple.size / 2,
            top: ripple.y - ripple.size / 2,
            width: ripple.size,
            height: ripple.size
          }}
        />
      ))}
      <span className='relative'>{children}</span>
    </button>
  );
}