glowing-effect

1"use client";
2 
3import { memo, useCallback, useEffect, useRef, useState } from "react";
4import { cn } from "@/lib/utils";
5 
6interface GlowingEffectProps {
7    blur?: number;
8    inactiveZone?: number;
9    proximity?: number;
10    spread?: number;
11    variant?: "default" | "white";
12    glow?: boolean;
13    className?: string;
14    disabled?: boolean;
15    movementDuration?: number;
16    borderWidth?: number;
17}
18 
19const GlowingEffect = memo(
20    ({
21        blur = 0,
22        inactiveZone = 0.01,
23        proximity = 100,
24        spread = 40,
25        variant = "default",
26        glow = true,
27        className,
28        movementDuration = 0.15,
29        borderWidth = 2,
30        disabled = false,
31    }: GlowingEffectProps) => {
32        const containerRef = useRef<HTMLDivElement>(null);
33        const angleRef = useRef(0);
34        const [angle, setAngle] = useState(0);
35        const [isActive, setIsActive] = useState(false);
36        const animationRef = useRef<number>();
37 
38        const handlePointerMove = useCallback(
39            (e: PointerEvent) => {
40                if (disabled || !containerRef.current) return;
41 
42                const element = containerRef.current;
43                const rect = element.getBoundingClientRect();
44                const mouseX = e.clientX;
45                const mouseY = e.clientY;
46 
47                const centerX = rect.left + rect.width / 2;
48                const centerY = rect.top + rect.height / 2;
49 
50                // Check proximity
51                const isWithinProximity =
52                    mouseX > rect.left - proximity &&
53                    mouseX < rect.right + proximity &&
54                    mouseY > rect.top - proximity &&
55                    mouseY < rect.bottom + proximity;
56 
57                if (!isWithinProximity) {
58                    setIsActive(false);
59                    return;
60                }
61 
62                setIsActive(true);
63 
64                // Calculate target angle
65                const targetAngle = Math.atan2(mouseY - centerY, mouseX - centerX) * (180 / Math.PI) + 90;
66 
67                // Smooth angle interpolation
68                const currentAngle = angleRef.current;
69                let diff = targetAngle - currentAngle;
70 
71                // Handle 360-degree wrap
72                if (diff > 180) diff -= 360;
73                if (diff < -180) diff += 360;
74 
75                const newAngle = currentAngle + diff * 0.15; // Smooth factor
76                angleRef.current = newAngle;
77                setAngle(newAngle);
78// … truncated