Magnetic

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