{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-metal-button",
  "title": "Liquid Metal Button",
  "description": "A call-to-action button with a flowing chrome rim that speeds up on hover.",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/shaders/liquid-metal-button/liquid-metal-button.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LiquidMetal } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype LiquidMetalButtonProps = React.ComponentProps<\"button\"> & {\n  /** Width of the chrome rim, in px. */\n  rim?: number\n  colorTint?: string\n  speed?: number\n}\n\nfunction LiquidMetalButton({\n  rim = 4,\n  colorTint = \"#ffffff\",\n  speed = 0.6,\n  className,\n  children,\n  style,\n  onPointerEnter,\n  onPointerLeave,\n  ...props\n}: LiquidMetalButtonProps) {\n  const [hovered, setHovered] = React.useState(false)\n\n  return (\n    <button\n      data-slot=\"liquid-metal-button\"\n      className={cn(\n        \"group/liquid-metal relative isolate inline-flex h-12 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full text-sm font-medium whitespace-nowrap text-white shadow-lg shadow-black/20 outline-none select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background active:translate-y-px disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      style={{ padding: rim, ...style }}\n      onPointerEnter={(event) => {\n        setHovered(true)\n        onPointerEnter?.(event)\n      }}\n      onPointerLeave={(event) => {\n        setHovered(false)\n        onPointerLeave?.(event)\n      }}\n      {...props}\n    >\n      <LiquidMetal\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0 -z-10 size-full\"\n        shape=\"none\"\n        colorBack=\"#aaaaac\"\n        colorTint={colorTint}\n        // Speed the metal up while hovered so the button feels responsive.\n        speed={hovered ? speed * 4 : speed}\n        repetition={4}\n        softness={0.05}\n        shiftRed={0.3}\n        shiftBlue={0.3}\n        distortion={0.1}\n        contour={0.4}\n        angle={90}\n        scale={1}\n      />\n      <span className=\"flex size-full items-center justify-center gap-2 rounded-full bg-neutral-950 px-6 transition-colors group-hover/liquid-metal:bg-neutral-900 [&_svg]:size-4 [&_svg]:shrink-0\">\n        {children}\n      </span>\n    </button>\n  )\n}\n\nexport { LiquidMetalButton }\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "buttons"
  ],
  "type": "registry:component"
}