Dynamic Ripple

1"use client";
2import type React from "react";
3import { useRef, useEffect, useState, useMemo, useCallback } from "react";
4import { cn } from "@/lib/utils";
5 
6interface Drop {
7  x: number;
8  y: number;
9  radius: number;
10  maxRadius: number;
11  speed: number;
12  opacity: number;
13  color: string;
14}
15 
16export interface DynamicRippleProps
17  extends React.HTMLAttributes<HTMLDivElement> {
18  theme?: "blue" | "purple" | "green" | "amber" | "rose" | "custom";
19  customColors?: {
20    primary: string;
21    secondary: string;
22  };
23  intensity?: 1 | 2 | 3 | 4 | 5;
24  speed?: 1 | 2 | 3 | 4 | 5;
25  reactToCursor?: boolean;
26  autoAnimate?: boolean;
27  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
28  gradientOverlay?: boolean;
29  children: React.ReactNode;
30}
31 
32export function DynamicRipple({
33  theme = "blue",
34  customColors,
35  intensity = 3,
36  speed = 3,
37  reactToCursor = true,
38  autoAnimate = true,
39  rounded = "lg",
40  gradientOverlay = true,
41  className,
42  children,
43  ...props
44}: DynamicRippleProps) {
45  const containerRef = useRef<HTMLDivElement>(null);
46  const canvasRef = useRef<HTMLCanvasElement>(null);
47  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
48  const animationRef = useRef<number>(0);
49  const dropsRef = useRef<Drop[]>([]);
50 
51  const intensityFactors = useMemo(
52    () => ({
53      1: { size: 0.6, opacity: 0.3, count: 3 },
54      2: { size: 0.8, opacity: 0.4, count: 5 },
55      3: { size: 1.0, opacity: 0.5, count: 7 },
56      4: { size: 1.2, opacity: 0.6, count: 9 },
57      5: { size: 1.5, opacity: 0.7, count: 12 },
58    }),
59    [],
60  );
61 
62  const speedFactors = useMemo(
63    () => ({
64      1: 0.5,
65      2: 0.75,
66      3: 1.0,
67      4: 1.25,
68      5: 1.5,
69    }),
70    [],
71  );
72 
73  const themeColors = useMemo(
74    () => ({
75      blue: {
76        primary: "rgba(59, 130, 246, 0.7)",
77        secondary: "rgba(6, 182, 212, 0.7)",
78        overlay: "from-blue-500/10 to-cyan-500/10",
79      },
80      purple: {
81        primary: "rgba(139, 92, 246, 0.7)",
82        secondary: "rgba(216, 180, 254, 0.7)",
83        overlay: "from-purple-500/10 to-pink-500/10",
84      },
85      green: {
86        primary: "rgba(16, 185, 129, 0.7)",
87        secondary: "rgba(110, 231, 183, 0.7)",
88        overlay: "from-green-500/10 to-emerald-500/10",
89      },
90      amber: {
91        primary: "rgba(245, 158, 11, 0.7)",
92        secondary: "rgba(252, 211, 77, 0.7)",
93        overlay: "from-amber-500/10 to-yellow-500/10",
94      },
95      rose: {
96        primary: "rgba(244, 63, 94, 0.7)",
97// … truncated