Glass Ripple

1"use client"
2 
3import * as React from "react"
4import { cn } from "@/lib/utils"
5 
6interface Ripple {
7  id: number
8  x: number
9  y: number
10  size: number
11}
12 
13interface GlassRippleProps extends React.HTMLAttributes<HTMLDivElement> {
14  color?: "cyan" | "purple" | "white" | "blue"
15  duration?: number
16  disabled?: boolean
17}
18 
19const rippleColors = {
20  cyan: "bg-cyan-400/30",
21  purple: "bg-purple-400/30",
22  white: "bg-white/30",
23  blue: "bg-blue-400/30",
24}
25 
26const GlassRipple = React.forwardRef<HTMLDivElement, GlassRippleProps>(
27  ({ className, children, color = "white", duration = 600, disabled = false, ...props }, ref) => {
28    const [ripples, setRipples] = React.useState<Ripple[]>([])
29    const containerRef = React.useRef<HTMLDivElement>(null)
30 
31    const createRipple = React.useCallback(
32      (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>) => {
33        if (disabled || !containerRef.current) return
34 
35        const rect = containerRef.current.getBoundingClientRect()
36        let x: number, y: number
37 
38        if ("touches" in e) {
39          x = e.touches[0].clientX - rect.left
40          y = e.touches[0].clientY - rect.top
41        } else {
42          x = e.clientX - rect.left
43          y = e.clientY - rect.top
44        }
45 
46        const size = Math.max(rect.width, rect.height) * 2
47 
48        const newRipple: Ripple = {
49          id: Date.now(),
50          x,
51          y,
52          size,
53        }
54 
55        setRipples((prev) => [...prev, newRipple])
56 
57        setTimeout(() => {
58          setRipples((prev) => prev.filter((r) => r.id !== newRipple.id))
59        }, duration)
60      },
61      [disabled, duration],
62    )
63 
64    return (
65      <div ref={ref} className={cn("relative overflow-hidden cursor-pointer", className)} {...props}>
66        <div ref={containerRef} className="absolute inset-0" onMouseDown={createRipple} onTouchStart={createRipple}>
67          {ripples.map((ripple) => (
68            <span
69              key={ripple.id}
70              className={cn(
71                "absolute rounded-full pointer-events-none",
72                "animate-[ripple_0.6s_ease-out_forwards]",
73                rippleColors[color],
74              )}
75              style={{
76                left: ripple.x - ripple.size / 2,
77                top: ripple.y - ripple.size / 2,
78                width: ripple.size,
79                height: ripple.size,
80              }}
81            />
82          ))}
83        </div>
84        <div className="relative z-10 pointer-events-none">{children}</div>
85// … truncated