{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-metal",
  "type": "registry:ui",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "components/ui/liquid-metal.tsx",
      "content": "\"use client\";\r\n\r\nimport React, { memo, forwardRef } from \"react\";\r\nimport { LiquidMetal as LiquidMetalShader } from \"@paper-design/shaders-react\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n// ============================================================================\r\n// LiquidMetal - Base shader wrapper component\r\n// ============================================================================\r\n\r\nexport interface LiquidMetalProps {\r\n    /** Base background color of the liquid metal */\r\n    colorBack?: string;\r\n    /** Tint/highlight color for the chrome effect */\r\n    colorTint?: string;\r\n    /** Animation speed (0.1 - 2.0 recommended) */\r\n    speed?: number;\r\n    /** Pattern complexity/repetition (1 - 10) */\r\n    repetition?: number;\r\n    /** Wave distortion amount (0 - 1) */\r\n    distortion?: number;\r\n    /** Texture scale */\r\n    scale?: number;\r\n    /** Additional CSS classes */\r\n    className?: string;\r\n    /** Inline styles */\r\n    style?: React.CSSProperties;\r\n}\r\n\r\nexport const LiquidMetal = memo(function LiquidMetal({\r\n    colorBack = \"#aaaaac\",\r\n    colorTint = \"#ffffff\",\r\n    speed = 0.5,\r\n    repetition = 4,\r\n    distortion = 0.1,\r\n    scale = 1,\r\n    className,\r\n    style,\r\n}: LiquidMetalProps) {\r\n    return (\r\n        <div\r\n            className={cn(\"absolute inset-0 z-0 overflow-hidden\", className)}\r\n            style={style}\r\n        >\r\n            <LiquidMetalShader\r\n                colorBack={colorBack}\r\n                colorTint={colorTint}\r\n                speed={speed}\r\n                repetition={repetition}\r\n                distortion={distortion}\r\n                softness={0}\r\n                shiftRed={0.3}\r\n                shiftBlue={-0.3}\r\n                angle={45}\r\n                shape=\"none\"\r\n                scale={scale}\r\n                fit=\"cover\"\r\n                style={{ width: \"100%\", height: \"100%\" }}\r\n            />\r\n        </div>\r\n    );\r\n});\r\n\r\nLiquidMetal.displayName = \"LiquidMetal\";\r\n\r\n// ============================================================================\r\n// LiquidMetalButton - Premium button with liquid metal border effect\r\n// ============================================================================\r\n\r\nexport interface LiquidMetalButtonProps\r\n    extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /** Button content */\r\n    children: React.ReactNode;\r\n    /** Optional icon displayed on the left */\r\n    icon?: React.ReactNode;\r\n    /** Border width in pixels */\r\n    borderWidth?: number;\r\n    /** Configuration for the LiquidMetal shader */\r\n    metalConfig?: Omit<LiquidMetalProps, \"className\" | \"style\">;\r\n    /** Size variant */\r\n    size?: \"sm\" | \"md\" | \"lg\";\r\n}\r\n\r\nexport const LiquidMetalButton = forwardRef<\r\n    HTMLButtonElement,\r\n    LiquidMetalButtonProps\r\n>(\r\n    (\r\n        {\r\n            children,\r\n            icon,\r\n            borderWidth = 4,\r\n            metalConfig,\r\n            size = \"md\",\r\n            className,\r\n            disabled,\r\n            ...props\r\n        },\r\n        ref\r\n    ) => {\r\n        const sizeStyles = {\r\n            sm: \"py-2 pl-2 pr-6 gap-3 text-sm\",\r\n            md: \"py-3 pl-3 pr-8 gap-4 text-base\",\r\n            lg: \"py-4 pl-4 pr-10 gap-6 text-lg\",\r\n        };\r\n\r\n        const iconSizes = {\r\n            sm: \"w-8 h-8\",\r\n            md: \"w-10 h-10\",\r\n            lg: \"w-12 h-12\",\r\n        };\r\n\r\n        return (\r\n            <button\r\n                ref={ref}\r\n                disabled={disabled}\r\n                className={cn(\r\n                    \"relative group cursor-pointer border-none bg-transparent p-0 outline-none transition-transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none\",\r\n                    className\r\n                )}\r\n                {...props}\r\n            >\r\n                <div\r\n                    className=\"relative rounded-full overflow-hidden shadow-[0_20px_50px_-12px_rgba(0,0,0,0.25)]\"\r\n                    style={{ padding: borderWidth }}\r\n                >\r\n                    {/* Liquid Metal Border Layer */}\r\n                    <LiquidMetal\r\n                        colorBack={metalConfig?.colorBack ?? \"#888888\"}\r\n                        colorTint={metalConfig?.colorTint ?? \"#ffffff\"}\r\n                        speed={metalConfig?.speed ?? 0.4}\r\n                        repetition={metalConfig?.repetition ?? 4}\r\n                        distortion={metalConfig?.distortion ?? 0.15}\r\n                        scale={metalConfig?.scale ?? 1}\r\n                        className=\"absolute inset-0 z-0 rounded-full\"\r\n                    />\r\n\r\n                    {/* Inner Button Body */}\r\n                    <div\r\n                        className={cn(\r\n                            \"relative z-10 rounded-full flex items-center\",\r\n                            \"bg-white dark:bg-black\",\r\n                            \"transition-colors duration-200\",\r\n                            \"group-hover:bg-neutral-50 dark:group-hover:bg-neutral-900\",\r\n                            sizeStyles[size]\r\n                        )}\r\n                    >\r\n                        {icon && (\r\n                            <div\r\n                                className={cn(\r\n                                    \"rounded-full flex items-center justify-center\",\r\n                                    \"bg-neutral-100 dark:bg-neutral-800\",\r\n                                    \"shadow-[inset_0_2px_4px_rgba(0,0,0,0.06)]\",\r\n                                    iconSizes[size]\r\n                                )}\r\n                            >\r\n                                <span className=\"text-neutral-700 dark:text-neutral-300\">\r\n                                    {icon}\r\n                                </span>\r\n                            </div>\r\n                        )}\r\n                        <span className=\"font-medium tracking-tight text-neutral-900 dark:text-white\">\r\n                            {children}\r\n                        </span>\r\n                    </div>\r\n                </div>\r\n            </button>\r\n        );\r\n    }\r\n);\r\n\r\nLiquidMetalButton.displayName = \"LiquidMetalButton\";\r\n\r\nexport default LiquidMetalButton;\r\n",
      "type": "registry:ui",
      "target": "components/ui/liquid-metal.tsx"
    }
  ]
}