Glowing Effect

1"use client";
2 
3import { memo, useCallback, useEffect, useRef } from "react";
4import { cn } from "@/lib/utils";
5import { animate } from "motion/react";
6 
7interface GlowingEffectProps {
8  blur?: number;
9  inactiveZone?: number;
10  proximity?: number;
11  spread?: number;
12  variant?: "default" | "white";
13  glow?: boolean;
14  className?: string;
15  disabled?: boolean;
16  movementDuration?: number;
17  borderWidth?: number;
18}
19const GlowingEffect = memo(
20  ({
21    blur = 0,
22    inactiveZone = 0.7,
23    proximity = 0,
24    spread = 20,
25    variant = "default",
26    glow = false,
27    className,
28    movementDuration = 2,
29    borderWidth = 1,
30    disabled = true,
31  }: GlowingEffectProps) => {
32    const containerRef = useRef<HTMLDivElement>(null);
33    const lastPosition = useRef({ x: 0, y: 0 });
34    const animationFrameRef = useRef<number>(0);
35 
36    const handleMove = useCallback(
37      (e?: MouseEvent | { x: number; y: number }) => {
38        if (!containerRef.current) return;
39 
40        if (animationFrameRef.current) {
41          cancelAnimationFrame(animationFrameRef.current);
42        }
43 
44        animationFrameRef.current = requestAnimationFrame(() => {
45          const element = containerRef.current;
46          if (!element) return;
47 
48          const { left, top, width, height } = element.getBoundingClientRect();
49          const mouseX = e?.x ?? lastPosition.current.x;
50          const mouseY = e?.y ?? lastPosition.current.y;
51 
52          if (e) {
53            lastPosition.current = { x: mouseX, y: mouseY };
54          }
55 
56          const center = [left + width * 0.5, top + height * 0.5];
57          const distanceFromCenter = Math.hypot(
58            mouseX - center[0],
59            mouseY - center[1]
60          );
61          const inactiveRadius = 0.5 * Math.min(width, height) * inactiveZone;
62 
63          if (distanceFromCenter < inactiveRadius) {
64            element.style.setProperty("--active", "0");
65            return;
66          }
67 
68          const isActive =
69            mouseX > left - proximity &&
70            mouseX < left + width + proximity &&
71            mouseY > top - proximity &&
72            mouseY < top + height + proximity;
73 
74          element.style.setProperty("--active", isActive ? "1" : "0");
75 
76          if (!isActive) return;
77 
78          const currentAngle =
79            parseFloat(element.style.getPropertyValue("--start")) || 0;
80          let targetAngle =
81            (180 * Math.atan2(mouseY - center[1], mouseX - center[0])) /
82              Math.PI +
83            90;
84 
85// … truncated