{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "Magnet-JS-CSS",
	"title": "Magnet",
	"description": "Elements magnetically ease toward the cursor then settle back with spring physics.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "Magnet/Magnet.jsx",
			"content": "import { useState, useEffect, useRef } from 'react';\n\nconst Magnet = ({\n  children,\n  padding = 100,\n  disabled = false,\n  magnetStrength = 2,\n  activeTransition = 'transform 0.3s ease-out',\n  inactiveTransition = 'transform 0.5s ease-in-out',\n  wrapperClassName = '',\n  innerClassName = '',\n  ...props\n}) => {\n  const [isActive, setIsActive] = useState(false);\n  const [position, setPosition] = useState({ x: 0, y: 0 });\n  const magnetRef = useRef(null);\n\n  useEffect(() => {\n    if (disabled) {\n      setPosition({ x: 0, y: 0 });\n      return;\n    }\n\n    const handleMouseMove = e => {\n      if (!magnetRef.current) return;\n\n      const { left, top, width, height } = magnetRef.current.getBoundingClientRect();\n      const centerX = left + width / 2;\n      const centerY = top + height / 2;\n\n      const distX = Math.abs(centerX - e.clientX);\n      const distY = Math.abs(centerY - e.clientY);\n\n      if (distX < width / 2 + padding && distY < height / 2 + padding) {\n        setIsActive(true);\n\n        const offsetX = (e.clientX - centerX) / magnetStrength;\n        const offsetY = (e.clientY - centerY) / magnetStrength;\n        setPosition({ x: offsetX, y: offsetY });\n      } else {\n        setIsActive(false);\n        setPosition({ x: 0, y: 0 });\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => {\n      window.removeEventListener('mousemove', handleMouseMove);\n    };\n  }, [padding, disabled, magnetStrength]);\n\n  const transitionStyle = isActive ? activeTransition : inactiveTransition;\n\n  return (\n    <div\n      ref={magnetRef}\n      className={wrapperClassName}\n      style={{ position: 'relative', display: 'inline-block' }}\n      {...props}\n    >\n      <div\n        className={innerClassName}\n        style={{\n          transform: `translate3d(${position.x}px, ${position.y}px, 0)`,\n          transition: transitionStyle,\n          willChange: 'transform'\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default Magnet;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}