{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-hover-effect-02",
  "type": "registry:component",
  "title": "Magnetic Hover Effect",
  "author": "Toby Belhome",
  "description": "A Magnetic Button is a UI component designed to enhance user interaction. When a user's cursor or touch input approaches the button, it subtly moves towards the user, simulating the effect of magnetic attraction.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "examples/motion/animations/magnetic-hover-effect/02/magnetic-effect.tsx",
      "content": "\"use client\";\n\nimport React, { useState, useEffect, useRef } from \"react\";\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\n\nconst SPRING_CONFIG = { damping: 100, stiffness: 400 };\n\ntype MagneticEffectType = {\n  children: React.ReactNode;\n  distance?: number;\n};\n\nfunction MagneticEffect({ children, distance = 0.6 }: MagneticEffectType) {\n  const [isHovered, setIsHovered] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  const springX = useSpring(x, SPRING_CONFIG);\n  const springY = useSpring(y, SPRING_CONFIG);\n\n  useEffect(() => {\n    const calculateDistance = (e: MouseEvent) => {\n      if (ref.current) {\n        const rect = ref.current.getBoundingClientRect();\n        const centerX = rect.left + rect.width / 2;\n        const centerY = rect.top + rect.height / 2;\n        const distanceX = e.clientX - centerX;\n        const distanceY = e.clientY - centerY;\n\n        if (isHovered) {\n          x.set(distanceX * distance);\n          y.set(distanceY * distance);\n        } else {\n          x.set(0);\n          y.set(0);\n        }\n      }\n    };\n\n    document.addEventListener(\"mousemove\", calculateDistance);\n\n    return () => {\n      document.removeEventListener(\"mousemove\", calculateDistance);\n    };\n  }, [ref, isHovered]);\n\n  return (\n    <motion.div\n      ref={ref}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{\n        x: springX,\n        y: springY\n      }}>\n      {children}\n    </motion.div>\n  );\n}\n\nexport default MagneticEffect;\n",
      "type": "registry:component",
      "target": "components/magnetic-hover-effect/magnetic-effect.tsx"
    },
    {
      "path": "examples/motion/animations/magnetic-hover-effect/02/page.tsx",
      "content": "import MagneticButton from \"./magnetic-effect\";\nimport { Button } from \"@/components/ui/button\";\n\nexport default function MagneticButtonExample() {\n  return (\n    <MagneticButton>\n      <img\n        className=\"aspect-square max-w-80 object-cover\"\n        src=\"/images/products/list3.png\"\n        alt=\"...\"\n      />\n    </MagneticButton>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/magnetic-hover-effect/magnetic-hover-effect-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}