{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-hover-demo",
  "title": "Magnetic Hover Demo",
  "description": "Example of a smooth magnetic hover interaction that subtly pulls elements toward the with using spring based motion animations.",
  "registryDependencies": [
    "https://atlasui.dev/r/magnetic-hover.json"
  ],
  "files": [
    {
      "path": "registry/react/examples/magnetic-hover-demo.tsx",
      "content": "import Link from \"next/link\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { MagneticHover } from \"@/registry/react/atlasui/magnetic-hover\";\n\nexport const MagneticHoverDemo = () => {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-4\">\n      <MagneticHover>\n        <Button>Hover Me</Button>\n      </MagneticHover>\n\n      <div className=\"text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm\">\n        <span>The cursor has</span>\n\n        <MagneticHover strength={0.5}>\n          <Link\n            href=\"#\"\n            className=\"text-foreground font-medium underline underline-offset-4\"\n          >\n            magnetic powers\n          </Link>\n        </MagneticHover>\n\n        <span>now.</span>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:example",
      "target": "components/magnetic-hover-demo.tsx"
    }
  ],
  "type": "registry:example"
}