svg-ripple-effect

1"use client"
2 
3import { clsx } from "clsx"
4import { motion } from "motion/react"
5 
6interface SvgRippleEffectProps {
7  transition?: {
8    duration?: number
9    repeat?: number
10    repeatDelay?: number
11  }
12  fade?: ("top" | "bottom")[]
13  whileHover?: boolean
14  image?: string
15}
16 
17export default function SvgRippleEffect({
18  transition = {
19    duration: 0.75,
20    repeat: Infinity,
21    repeatDelay: 1.25,
22  },
23  fade = [],
24  whileHover = false,
25  image,
26}: SvgRippleEffectProps) {
27  return (
28    <motion.div
29      className="group bg-white dark:bg-black"
30      initial="idle"
31      animate={whileHover ? "idle" : "active"}
32      whileHover={whileHover ? "active" : undefined}
33      variants={{ idle: {}, active: {} }}
34    >
35      <svg
36        viewBox="0 0 500 500"
37        fill="none"
38        className={clsx(
39          "col-start-1 row-start-1 size-full",
40          "mask-[linear-gradient(to_bottom,black_90%,transparent),radial-gradient(circle,rgba(0,0,0,1)_0%,rgba(0,0,0,0)_100%)] mask-intersect"
41        )}
42      >
43        {Array.from(Array(42).keys()).map((n) => (
44          <motion.circle
45            variants={{
46              idle: {
47                scale: 1,
48                strokeOpacity: 0.3,
49              },
50              active: {
51                scale: [1, 1.08, 1],
52                strokeOpacity: [0.3, 0.6, 0.3],
53                transition: { ...transition, delay: n * 0.05 },
54              },
55            }}
56            key={n}
57            cx="250"
58            cy="250"
59            r={n * 14 + 4}
60            className="stroke-gray-800 dark:stroke-gray-200"
61          />
62        ))}
63      </svg>
64      {fade.includes("top") && (
65        <div className="absolute inset-0 bg-gradient-to-b from-white to-[50%] dark:from-neutral-950 dark:to-[70%]" />
66      )}
67      {fade.includes("bottom") && (
68        <div className="absolute inset-0 bg-linear-to-t from-white to-[50%] dark:from-neutral-950 dark:to-[70%]" />
69      )}
70      {image && (
71        <div className="absolute inset-0 flex items-center justify-center">
72          <img
73            src={image}
74            alt=""
75            className="h-6 w-6 rounded-full bg-white object-cover sm:h-8 sm:w-8 dark:bg-neutral-950"
76          />
77        </div>
78      )}
79    </motion.div>
80  )
81}