{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "magnetic-fill-button",
  "title": "Magnetic Fill Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A magnetic pill button with a bottom-to-top background fill.",
  "files": [
    {
      "path": "registry/microkit/magnetic-fill-button.tsx",
      "content": "\"use client\";\n\nimport type { PointerEvent as ReactPointerEvent } from \"react\";\n\nexport function MagneticFillButton() {\n  const move = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    const bounds = event.currentTarget.getBoundingClientRect();\n    const x = (event.clientX - (bounds.left + bounds.width / 2)) * .14;\n    const y = (event.clientY - (bounds.top + bounds.height / 2)) * .22;\n    event.currentTarget.style.setProperty(\"--magnetic-x\", `${x}px`);\n    event.currentTarget.style.setProperty(\"--magnetic-y\", `${y}px`);\n  };\n  const reset = (event: ReactPointerEvent<HTMLButtonElement>) => {\n    event.currentTarget.style.setProperty(\"--magnetic-x\", \"0px\");\n    event.currentTarget.style.setProperty(\"--magnetic-y\", \"0px\");\n  };\n\n  return (\n    <button\n      onPointerMove={move}\n      onPointerLeave={reset}\n      className=\"group relative inline-flex items-center justify-center overflow-hidden rounded-[100px] border border-[light-dark(#14181e,#f0f0f0)] bg-transparent px-8 py-3 text-base font-medium text-[light-dark(#14181e,#f0f0f0)] [transform:translate(var(--magnetic-x,0px),var(--magnetic-y,0px))] transition-[transform,color] duration-[220ms] ease-[cubic-bezier(.16,1,.3,1)] hover:text-[light-dark(#f6f7f9,#111)] focus-visible:text-[light-dark(#f6f7f9,#111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\"\n    >\n      <span className=\"relative z-10\">Start a project</span>\n      <span className=\"absolute inset-x-0 bottom-0 h-0 bg-[#f97316] transition-[height] duration-[380ms] ease-[cubic-bezier(.16,1,.3,1)] group-hover:h-full group-focus-visible:h-full\" aria-hidden=\"true\" />\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/magnetic-fill-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/magnetic-fill-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}