Magnetic Hover

1"use client";
2 
3import { useRef, useState } from "react";
4 
5import { motion } from "motion/react";
6 
7interface MagneticHoverProps {
8  children: React.ReactNode;
9  strength?: number;
10}
11 
12export const MagneticHover = ({
13  children,
14  strength = 1,
15}: MagneticHoverProps) => {
16  const ref = useRef<HTMLDivElement>(null);
17 
18  const [position, setPosition] = useState({ x: 0, y: 0 });
19 
20  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
21    if (!ref.current) return;
22 
23    const { left, top, width, height } = ref.current.getBoundingClientRect();
24    const x = (e.clientX - (left + width / 2)) * strength;
25    const y = (e.clientY - (top + height / 2)) * strength;
26    setPosition({ x, y });
27  };
28 
29  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
30    setPosition({ x: 0, y: 0 });
31  };
32 
33  const { x, y } = position;
34 
35  return (
36    <motion.div
37      ref={ref}
38      onMouseMove={handleMouseMove}
39      onMouseLeave={handleMouseLeave}
40      animate={{ x, y }}
41      transition={{ type: "spring", stiffness: 150, damping: 15, mass: 0.2 }}
42    >
43      {children}
44    </motion.div>
45  );
46};