{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-button",
  "type": "registry:ui",
  "title": "Magnetic Button",
  "description": "Button that follows the cursor with spring physics.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/starkui/magnetic-button.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function MagneticButton({\n  children,\n  strength = 0.35,\n  className,\n  ...props\n}: React.ComponentProps<typeof motion.button> & { strength?: number }) {\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n  const springX = useSpring(x, { stiffness: 200, damping: 15 });\n  const springY = useSpring(y, { stiffness: 200, damping: 15 });\n\n  return (\n    <motion.button\n      style={{ x: springX, y: springY }}\n      onPointerMove={(e) => {\n        const rect = e.currentTarget.getBoundingClientRect();\n        x.set((e.clientX - rect.left - rect.width / 2) * strength);\n        y.set((e.clientY - rect.top - rect.height / 2) * strength);\n      }}\n      onPointerLeave={() => {\n        x.set(0);\n        y.set(0);\n      }}\n      className={cn(\n        \"inline-flex h-11 items-center justify-center rounded-xl bg-foreground px-6 text-sm font-medium text-background shadow-md transition-shadow hover:shadow-lg active:scale-95 cursor-pointer\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </motion.button>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/magnetic-button.tsx"
    }
  ]
}