{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-hover",
  "title": "Magnetic Hover",
  "description": "A smooth magnetic hover interaction that subtly pulls elements toward the with using spring based motion animations.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/magnetic-hover.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\n\nimport { motion } from \"motion/react\";\n\ninterface MagneticHoverProps {\n  children: React.ReactNode;\n  strength?: number;\n}\n\nexport const MagneticHover = ({\n  children,\n  strength = 1,\n}: MagneticHoverProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!ref.current) return;\n\n    const { left, top, width, height } = ref.current.getBoundingClientRect();\n    const x = (e.clientX - (left + width / 2)) * strength;\n    const y = (e.clientY - (top + height / 2)) * strength;\n    setPosition({ x, y });\n  };\n\n  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {\n    setPosition({ x: 0, y: 0 });\n  };\n\n  const { x, y } = position;\n\n  return (\n    <motion.div\n      ref={ref}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      animate={{ x, y }}\n      transition={{ type: \"spring\", stiffness: 150, damping: 15, mass: 0.2 }}\n    >\n      {children}\n    </motion.div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}