magnetic

1"use client";
2 
3import {
4  motion,
5  type SpringOptions,
6  useMotionValue,
7  useSpring,
8} from "motion/react";
9import type React from "react";
10import { useEffect, useRef, useState } from "react";
11 
12const SPRING_CONFIG = { stiffness: 26.7, damping: 4.1, mass: 0.2 };
13 
14export type MagneticProps = {
15  children: React.ReactNode;
16  intensity?: number;
17  range?: number;
18  actionArea?: "self" | "parent" | "global";
19  springOptions?: SpringOptions;
20};
21 
22export function Magnetic({
23  children,
24  intensity = 0.6,
25  range = 100,
26  actionArea = "self",
27  springOptions = SPRING_CONFIG,
28}: MagneticProps) {
29  const [isHovered, setIsHovered] = useState(false);
30  const ref = useRef<HTMLDivElement>(null);
31 
32  const x = useMotionValue(0);
33  const y = useMotionValue(0);
34 
35  const springX = useSpring(x, springOptions);
36  const springY = useSpring(y, springOptions);
37 
38  useEffect(() => {
39    const calculateDistance = (e: MouseEvent) => {
40      if (ref.current) {
41        const rect = ref.current.getBoundingClientRect();
42        const centerX = rect.left + rect.width / 2;
43        const centerY = rect.top + rect.height / 2;
44        const distanceX = e.clientX - centerX;
45        const distanceY = e.clientY - centerY;
46 
47        const absoluteDistance = Math.sqrt(distanceX ** 2 + distanceY ** 2);
48 
49        if (isHovered && absoluteDistance <= range) {
50          const scale = 1 - absoluteDistance / range;
51          x.set(distanceX * intensity * scale);
52          y.set(distanceY * intensity * scale);
53        } else {
54          x.set(0);
55          y.set(0);
56        }
57      }
58    };
59 
60    document.addEventListener("mousemove", calculateDistance);
61 
62    return () => {
63      document.removeEventListener("mousemove", calculateDistance);
64    };
65  }, [isHovered, intensity, range, x.set, y.set, y, x]);
66 
67  useEffect(() => {
68    if (actionArea === "parent" && ref.current?.parentElement) {
69      const parent = ref.current.parentElement;
70 
71      const handleParentEnter = () => setIsHovered(true);
72      const handleParentLeave = () => setIsHovered(false);
73 
74      parent.addEventListener("mouseenter", handleParentEnter);
75      parent.addEventListener("mouseleave", handleParentLeave);
76 
77      return () => {
78        parent.removeEventListener("mouseenter", handleParentEnter);
79        parent.removeEventListener("mouseleave", handleParentLeave);
80      };
81    } else if (actionArea === "global") {
82      setIsHovered(true);
83    }
84  }, [actionArea]);
85 
86  const handleMouseEnter = () => {
87    if (actionArea === "self") {
88// … truncated