43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { motion, AnimatePresence } from "motion/react"
|
|
|
|
export function useRipple() {
|
|
const [ripples, setRipples] = useState([])
|
|
|
|
const addRipple = (e) => {
|
|
const rect = e.currentTarget.getBoundingClientRect()
|
|
const x = e.clientX - rect.left
|
|
const y = e.clientY - rect.top
|
|
const id = Date.now()
|
|
|
|
setRipples((prev) => [...prev, { x, y, id }])
|
|
|
|
setTimeout(() => {
|
|
setRipples((prev) => prev.filter((r) => r.id !== id))
|
|
}, 600)
|
|
}
|
|
|
|
const Ripples = (
|
|
<AnimatePresence>
|
|
{ripples.map((ripple) => (
|
|
<motion.span
|
|
key={ripple.id}
|
|
initial={{ scale: 0, opacity: 0.6 }}
|
|
animate={{ scale: 4, opacity: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
style={{
|
|
left: ripple.x,
|
|
top: ripple.y,
|
|
}}
|
|
className="absolute h-8 w-8 rounded-full bg-white/70 pointer-events-none -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
))}
|
|
</AnimatePresence>
|
|
)
|
|
|
|
return { addRipple, Ripples }
|
|
}
|