{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"orb-button","type":"registry:ui","title":"Orb Button","description":"A glowing gradient orb drifts inside the button and swells to chase the pointer on hover.","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"registry/ui/orb-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes, PointerEvent } from \"react\";\nimport { motion, useMotionValue, useSpring } from \"motion/react\";\n\nexport interface OrbButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Orb core color. */\n  colorA?: string;\n  /** Orb outer color. */\n  colorB?: string;\n}\n\nconst css = `@keyframes orb-button-drift{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.18) rotate(180deg)}}`;\nconst follow = { stiffness: 180, damping: 20, mass: 0.6 };\n\nexport function OrbButton({\n  colorA = \"#a78bfa\",\n  colorB = \"#22d3ee\",\n  className,\n  children,\n  onPointerMove,\n  onPointerLeave,\n  ...props\n}: OrbButtonProps) {\n  // Offsets from the button center; the orb eases toward them.\n  const tx = useMotionValue(0);\n  const ty = useMotionValue(0);\n  const x = useSpring(tx, follow);\n  const y = useSpring(ty, follow);\n\n  const move = (e: PointerEvent<HTMLButtonElement>) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    tx.set(e.clientX - r.left - r.width / 2);\n    ty.set(e.clientY - r.top - r.height / 2);\n    onPointerMove?.(e);\n  };\n  const leave = (e: PointerEvent<HTMLButtonElement>) => {\n    tx.set(0);\n    ty.set(0);\n    onPointerLeave?.(e);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      onPointerMove={move}\n      onPointerLeave={leave}\n      className={`group relative isolate inline-flex h-12 items-center justify-center gap-2 overflow-hidden rounded-full border border-border bg-card px-8 text-sm font-medium text-foreground shadow-[inset_0_1px_0_rgb(255_255_255/.08),0_10px_30px_-12px_rgb(0_0_0/.5)] transition-[scale,border-color] duration-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring enabled:hover:border-foreground/20 enabled:active:scale-[0.97] disabled:cursor-not-allowed disabled:opacity-50 ${className ?? \"\"}`}\n    >\n      <style href=\"orb-button\" precedence=\"default\">\n        {css}\n      </style>\n      <motion.span\n        aria-hidden\n        className=\"pointer-events-none absolute left-1/2 top-1/2 -z-10 -ml-14 -mt-14 size-28\"\n        style={{ x, y }}\n      >\n        <span className=\"block size-full scale-[.6] opacity-70 blur-lg transition-[scale,opacity] duration-500 ease-out group-focus-visible:scale-100 group-focus-visible:opacity-100 group-enabled:group-hover:scale-100 group-enabled:group-hover:opacity-100\">\n          <span\n            className=\"block size-full rounded-full [animation:orb-button-drift_7s_ease-in-out_infinite] motion-reduce:[animation:none]\"\n            style={{\n              background: `radial-gradient(circle at 50% 50%, rgb(255 255 255 / .5), transparent 22%), radial-gradient(circle at 38% 36%, ${colorA}, ${colorB} 52%, transparent 72%)`,\n            }}\n          />\n        </span>\n      </motion.span>\n      <span aria-hidden className=\"absolute inset-0 -z-10 rounded-full bg-gradient-to-b from-white/[.07] to-transparent\" />\n      {children}\n    </button>\n  );\n}\n"}]}