{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"shiny-button","type":"registry:ui","title":"Shiny Button","description":"Gradient border and inner glow that follow the cursor.","dependencies":[],"registryDependencies":[],"files":[{"path":"registry/ui/shiny-button.tsx","type":"registry:ui","content":"\"use client\";\n\nimport type { ButtonHTMLAttributes, PointerEvent } from \"react\";\n\nexport interface ShinyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  gradientFrom?: string;\n  gradientTo?: string;\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst sizes = { sm: \"h-9 px-4 text-sm\", md: \"h-11 px-6 text-sm\", lg: \"h-13 px-8 text-base\" };\n\nexport function ShinyButton({\n  gradientFrom = \"#c6ff3d\",\n  gradientTo = \"#22d3ee\",\n  size = \"md\",\n  className,\n  children,\n  onPointerMove,\n  ...props\n}: ShinyButtonProps) {\n  const track = (e: PointerEvent<HTMLButtonElement>) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    e.currentTarget.style.setProperty(\"--shine-x\", `${e.clientX - r.left}px`);\n    e.currentTarget.style.setProperty(\"--shine-y\", `${e.clientY - r.top}px`);\n    onPointerMove?.(e);\n  };\n\n  return (\n    <button\n      {...props}\n      onPointerMove={track}\n      className={`group relative inline-flex items-center justify-center overflow-hidden rounded-full font-medium text-foreground outline-offset-4 transition-transform active:scale-[0.97] ${sizes[size]} ${className ?? \"\"}`}\n      style={{\n        background: `radial-gradient(160px circle at var(--shine-x, 50%) var(--shine-y, 50%), ${gradientFrom}, ${gradientTo} 45%, rgba(255,255,255,.12) 70%)`,\n      }}\n    >\n      {/* Inner fill leaves a 1px ring where the gradient shows as a border. */}\n      <span\n        aria-hidden\n        className=\"absolute inset-px rounded-full bg-card transition-colors group-hover:bg-muted\"\n      />\n      <span\n        aria-hidden\n        className=\"absolute inset-px rounded-full opacity-0 transition-opacity duration-300 group-hover:opacity-100\"\n        style={{\n          background: `radial-gradient(120px circle at var(--shine-x, 50%) var(--shine-y, 50%), ${gradientFrom}33, transparent 70%)`,\n        }}\n      />\n      <span className=\"relative\">{children}</span>\n    </button>\n  );\n}\n"}]}