{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metallic-button",
  "type": "registry:ui",
  "title": "Metallic Button",
  "description": "A liquid metal button with WebGL shader background and prismatic outline ring.",
  "dependencies": [
    "class-variance-authority",
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/bucharitesh/metallic-button.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { LiquidMetal } from '@paper-design/shaders-react';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nconst metallicButtonVariants = cva(\n  'group relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full outline-none select-none transition-transform active:scale-95 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      size: {\n        sm: 'size-12 [&_svg:not([class*=size-])]:size-4',\n        default: 'size-16 [&_svg:not([class*=size-])]:size-5',\n        lg: 'size-20 [&_svg:not([class*=size-])]:size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\nexport interface MetallicButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof metallicButtonVariants> {\n  /** Inner face gradient top color */\n  lightColor?: string;\n  /** Inner face gradient bottom color */\n  darkColor?: string;\n  /** Icon / content color */\n  iconColor?: string;\n  /** Shader animation speed (0 = static) */\n  speed?: number;\n  /** Shader pattern stripe density */\n  repetition?: number;\n  /** Shader noise distortion (0-1) */\n  distortion?: number;\n  /** Shader pattern angle (0-360) */\n  angle?: number;\n}\n\nconst MetallicButton = React.forwardRef<HTMLButtonElement, MetallicButtonProps>(\n  (\n    {\n      children,\n      className,\n      size,\n      lightColor = '#444',\n      darkColor = '#000',\n      iconColor = '#65615f',\n      speed = 0.5,\n      repetition = 1.5,\n      distortion = 0,\n      angle = 100,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(metallicButtonVariants({ size }), className)}\n        {...props}\n      >\n        <div className=\"absolute inset-0 overflow-hidden rounded-full\">\n          <LiquidMetal\n            style={{\n              position: 'absolute',\n              inset: 0,\n              width: '100%',\n              height: '100%',\n            }}\n            speed={speed}\n            repetition={repetition}\n            distortion={distortion}\n            softness={0.5}\n            shiftRed={0.3}\n            shiftBlue={0.3}\n            contour={0}\n            angle={angle}\n            scale={1.5}\n            shape=\"circle\"\n            offsetX={0.1}\n            offsetY={-0.1}\n          />\n        </div>\n\n        <div\n          className=\"absolute inset-[5%] rounded-full\"\n          style={{\n            background: `linear-gradient(${lightColor}, ${darkColor})`,\n            boxShadow: 'inset 0 2px 2px 2px rgba(255,255,255,0.3)',\n          }}\n        />\n\n        <div\n          className=\"pointer-events-none absolute inset-[-2%] rounded-full grayscale transition-[filter] duration-300 group-hover:grayscale-0\"\n          style={{\n            padding: 2,\n            WebkitMask:\n              'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',\n            WebkitMaskComposite: 'xor',\n            mask: 'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',\n            maskComposite: 'exclude',\n          }}\n        />\n\n        <span className=\"relative z-10\" style={{ color: iconColor }}>\n          {children}\n        </span>\n      </button>\n    );\n  }\n);\nMetallicButton.displayName = 'MetallicButton';\n\nexport { MetallicButton, metallicButtonVariants };\n",
      "type": "registry:ui"
    }
  ]
}