Metallic Button

1'use client';
2 
3import { cn } from '@/lib/utils';
4import { LiquidMetal } from '@paper-design/shaders-react';
5import { type VariantProps, cva } from 'class-variance-authority';
6import * as React from 'react';
7 
8const metallicButtonVariants = cva(
9  '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',
10  {
11    variants: {
12      size: {
13        sm: 'size-12 [&_svg:not([class*=size-])]:size-4',
14        default: 'size-16 [&_svg:not([class*=size-])]:size-5',
15        lg: 'size-20 [&_svg:not([class*=size-])]:size-6',
16      },
17    },
18    defaultVariants: {
19      size: 'default',
20    },
21  }
22);
23 
24export interface MetallicButtonProps
25  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
26    VariantProps<typeof metallicButtonVariants> {
27  /** Inner face gradient top color */
28  lightColor?: string;
29  /** Inner face gradient bottom color */
30  darkColor?: string;
31  /** Icon / content color */
32  iconColor?: string;
33  /** Shader animation speed (0 = static) */
34  speed?: number;
35  /** Shader pattern stripe density */
36  repetition?: number;
37  /** Shader noise distortion (0-1) */
38  distortion?: number;
39  /** Shader pattern angle (0-360) */
40  angle?: number;
41}
42 
43const MetallicButton = React.forwardRef<HTMLButtonElement, MetallicButtonProps>(
44  (
45    {
46      children,
47      className,
48      size,
49      lightColor = '#444',
50      darkColor = '#000',
51      iconColor = '#65615f',
52      speed = 0.5,
53      repetition = 1.5,
54      distortion = 0,
55      angle = 100,
56      ...props
57    },
58    ref
59  ) => {
60    return (
61      <button
62        ref={ref}
63        className={cn(metallicButtonVariants({ size }), className)}
64        {...props}
65      >
66        <div className="absolute inset-0 overflow-hidden rounded-full">
67          <LiquidMetal
68            style={{
69              position: 'absolute',
70              inset: 0,
71              width: '100%',
72              height: '100%',
73            }}
74            speed={speed}
75            repetition={repetition}
76            distortion={distortion}
77            softness={0.5}
78            shiftRed={0.3}
79            shiftBlue={0.3}
80            contour={0}
81            angle={angle}
82            scale={1.5}
83            shape="circle"
84            offsetX={0.1}
85            offsetY={-0.1}
86          />
87        </div>
88 
89        <div
90// … truncated