Ripple Button

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface RippleButtonProps extends React.ComponentProps<"button"> {
8  /** Milliseconds one ripple takes to cross the button and fade out. */
9  duration?: number
10  /** Colour of the ripple. Keep it translucent so the label stays readable. */
11  color?: string
12}
13 
14interface Ripple {
15  id: number
16  x: number
17  y: number
18  size: number
19}
20 
21/**
22 * The ripple is a circle scaled up from nothing, not a growing width, so a
23 * press costs one composited layer and no layout.
24 */
25export function RippleButton({
26  children,
27  className,
28  duration = 280,
29  color = "color-mix(in oklch, currentColor 22%, transparent)",
30  onPointerDown,
31  onKeyDown,
32  disabled,
33  style,
34  ...props
35}: RippleButtonProps) {
36  const [ripples, setRipples] = React.useState<Ripple[]>([])
37  const nextId = React.useRef(0)
38 
39  // Measured from the press point to the furthest corner, so the circle always
40  // finishes covering the button no matter where it started.
41  const spawn = React.useCallback(
42    (node: HTMLButtonElement, clientX?: number, clientY?: number) => {
43      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
44        return
45      }
46 
47      const rect = node.getBoundingClientRect()
48      const x = clientX === undefined ? rect.width / 2 : clientX - rect.left
49      const y = clientY === undefined ? rect.height / 2 : clientY - rect.top
50      const size =
51        2 *
52        Math.hypot(Math.max(x, rect.width - x), Math.max(y, rect.height - y))
53 
54      setRipples((current) => [
55        ...current,
56        { id: nextId.current++, x, y, size },
57      ])
58    },
59    []
60  )
61 
62  const drop = React.useCallback((id: number) => {
63    setRipples((current) => current.filter((ripple) => ripple.id !== id))
64  }, [])
65 
66  return (
67    <button
68      data-slot="ripple-button"
69      disabled={disabled}
70      onPointerDown={(event) => {
71        onPointerDown?.(event)
72        if (!disabled) {
73          spawn(event.currentTarget, event.clientX, event.clientY)
74        }
75      }}
76      // Enter and Space press a button without a pointer ever touching it, so
77      // the keyboard gets its own ripple from the middle rather than none.
78      onKeyDown={(event) => {
79        onKeyDown?.(event)
80        const isPress = event.key === "Enter" || event.key === " "
81        if (isPress && !event.repeat && !disabled) {
82          spawn(event.currentTarget)
83        }
84      }}
85      className={cn(
86// … truncated