shadcn/app/public/registry/styles/default/magnetic.json

{
  "name": "magnetic",
  "description": "Magnetic hover effect",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "magnetic.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MagneticProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  strength?: number\n}\n\nconst Magnetic = React.forwardRef<HTMLDivElement, MagneticProps>(\n  ({ className, children, strength = 0.3, ...props }, ref) => {\n    const [position, setPosition] = React.useState({ x: 0, y: 0 })\n    const elementRef = React.useRef<HTMLDivElement>(null)\n\n    const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n      const element = elementRef.current\n      if (!element) return\n\n      const rect = element.getBoundingClientRect()\n      const centerX = rect.left + rect.width / 2\n      const centerY = rect.top + rect.height / 2\n\n      const deltaX = (e.clientX - centerX) * strength\n      const deltaY = (e.clientY - centerY) * strength\n\n      setPosition({ x: deltaX, y: deltaY })\n    }\n\n    const handleMouseLeave = () => {\n      setPosition({ x: 0, y: 0 })\n    }\n\n    return (\n      <div\n        ref={elementRef}\n        className={cn(\"transition-transform\", className)}\n        style={{\n          transform: `translate(${position.x}px, ${position.y}px)`,\n        }}\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n)\nMagnetic.displayName = \"Magnetic\"\n\nexport { Magnetic }\n"
    }
  ],
  "type": "components:ui"
}