Ripple

1"use client"
2 
3import * as React from "react"
4import { motion, AnimatePresence } from "motion/react"
5import { cn } from "@/registry/wise-ui/lib/utils"
6 
7interface RippleProps {
8  color?: string
9  duration?: number
10  ringCount?: number
11  mode?: "click" | "pulse"
12  children: React.ReactNode
13  className?: string
14}
15 
16interface RippleEntry {
17  x: number
18  y: number
19  id: number
20}
21 
22let nextId = 0
23 
24function Ripple({
25  color = "currentColor",
26  duration = 600,
27  ringCount = 3,
28  mode = "click",
29  children,
30  className,
31}: RippleProps) {
32  const [ripples, setRipples] = React.useState<RippleEntry[]>([])
33  const containerRef = React.useRef<HTMLDivElement>(null)
34 
35  function handleClick(e: React.MouseEvent<HTMLDivElement>) {
36    if (mode !== "click") return
37    const rect = containerRef.current!.getBoundingClientRect()
38    const x = e.clientX - rect.left
39    const y = e.clientY - rect.top
40    setRipples((prev) => [...prev, { x, y, id: nextId++ }])
41  }
42 
43  function removeRipple(id: number) {
44    setRipples((prev) => prev.filter((r) => r.id !== id))
45  }
46 
47  const durationS = duration / 1000
48 
49  return (
50    <div
51      ref={containerRef}
52      className={cn("relative overflow-hidden", className)}
53      onClick={handleClick}
54    >
55      {children}
56 
57      {/* Click ripples */}
58      <AnimatePresence>
59        {ripples.map((ripple) => (
60          <div
61            key={ripple.id}
62            className="pointer-events-none absolute inset-0"
63          >
64            {Array.from({ length: ringCount }, (_, i) => (
65              <motion.div
66                key={i}
67                className="absolute rounded-full"
68                style={{
69                  left: ripple.x,
70                  top: ripple.y,
71                  width: 20,
72                  height: 20,
73                  x: "-50%",
74                  y: "-50%",
75                  border: `1.5px solid ${color}`,
76                }}
77                initial={{ scale: 0, opacity: 0.6 }}
78                animate={{ scale: 2.5, opacity: 0 }}
79                transition={{
80                  duration: durationS,
81                  delay: i * (durationS * 0.2),
82                  ease: "easeOut",
83                }}
84                onAnimationComplete={() => {
85                  if (i === ringCount - 1) removeRipple(ripple.id)
86                }}
87              />
88            ))}
89          </div>
90        ))}
91      </AnimatePresence>
92 
93      {/* Pulse mode */}
94      {mode === "pulse" && (
95// … truncated