{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"magnetic-button","type":"registry:component","title":"Magnetic Button","description":"A button whose label leans toward the cursor with a springy pull.","dependencies":["framer-motion"],"registryDependencies":[],"files":[{"path":"components/viberdy/magnetic-button.tsx","content":"\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { motion } from \"framer-motion\";\n\nexport function MagneticButton({\n  label = \"Copy this\",\n  strength = 24,\n  rounded = true,\n  variant = \"red\",\n}: {\n  label?: string;\n  strength?: number;\n  rounded?: boolean;\n  variant?: \"red\" | \"outline\" | \"dark\";\n}) {\n  const ref = useRef<HTMLButtonElement>(null);\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n\n  function handleMove(e: React.MouseEvent<HTMLButtonElement>) {\n    const el = ref.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) / rect.width - 0.5) * strength;\n    const y = ((e.clientY - rect.top) / rect.height - 0.5) * strength;\n    setPos({ x, y });\n  }\n\n  const variantClasses =\n    variant === \"red\"\n      ? \"bg-red-500 text-white\"\n      : variant === \"outline\"\n        ? \"border border-neutral-900 bg-transparent text-neutral-900\"\n        : \"bg-neutral-900 text-white\";\n\n  return (\n    <button\n      ref={ref}\n      onMouseMove={handleMove}\n      onMouseLeave={() => setPos({ x: 0, y: 0 })}\n      className={\n        \"relative px-8 py-4 font-semibold tracking-tight transition-colors \" +\n        variantClasses +\n        (rounded ? \" rounded-full\" : \" rounded-none\")\n      }\n    >\n      <motion.span\n        animate={{ x: pos.x, y: pos.y }}\n        transition={{ type: \"spring\", stiffness: 150, damping: 12, mass: 0.4 }}\n        className=\"block\"\n      >\n        {label}\n      </motion.span>\n    </button>\n  );\n}\n","type":"registry:component","target":"components/viberdy/magnetic-button.tsx"}],"meta":{"tier":"free","tags":["button","cursor","spring","interaction"],"href":"https://viberdy.dev/library/magnetic-button","aiPrompt":"Create a React + Tailwind \"magnetic button\" component named MagneticButton.\n\nBehavior:\n- On mouse move over the button, the inner label offsets slightly toward the cursor position (magnetic pull effect), using a spring animation (Framer Motion spring: stiffness 150, damping 12, mass 0.4).\n- On mouse leave, it springs back to center.\n- Props: label (string), strength (number, how far it can drift in px).\n\nStyle: rounded-full pill button, bold red background (#FF2D2D), white bold text, generous horizontal padding (px-8 py-4). Feels tactile and alive, not corporate.\n\nOutput a single self-contained \"use client\" component using useRef + useState + framer-motion's motion.span for the inner label.","license":"https://viberdy.dev/license"}}