Animated Button

1'use client';
2 
3import * as React from 'react';
4import { Slot } from '@radix-ui/react-slot';
5import { cva, type VariantProps } from 'class-variance-authority';
6import { cn } from '@/lib/utils';
7 
8interface CustomCSSProperties extends React.CSSProperties {
9  '--shimmer-color'?: string;
10  '--radius'?: string;
11  '--speed'?: string;
12  '--cut'?: string;
13  '--bg'?: string;
14  '--spread'?: string;
15  '--border-width'?: string;
16  '--border-segment'?: string;
17}
18 
19const buttonVariants = cva(
20  'group relative z-0 bg-white dark:bg-[rgba(0,0,0,1)] flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap  transform-gpu transition-all duration-300 ease-in-out active:translate-y-px',
21  {
22    variants: {
23      variant: {
24        default: 'text-cyan-400 border border-cyan-400/20 hover:text-cyan-300',
25        outline:
26          'bg-transparent text-cyan-400 border border-cyan-400 hover:text-cyan-300',
27        ghost: 'bg-transparent text-cyan-400 hover:bg-cyan-950/30',
28        glow: 'text-cyan-400 border border-cyan-400/30 hover:text-cyan-300 hover:shadow-glow',
29      },
30      size: {
31        default: 'h-10 px-6 py-2',
32        sm: 'h-8 px-4 py-1 text-xs',
33        lg: 'h-12 px-8 py-3 text-base',
34        icon: 'h-10 w-10',
35      },
36      glow: {
37        true: 'hover:shadow-[0_0_5px_#03e9f4,0_0_25px_#03e9f4]',
38        false: '',
39      },
40      textEffect: {
41        normal: 'group-hover:tracking-normal',
42        spread: 'group-hover:tracking-wider',
43      },
44      uppercase: {
45        true: '',
46        false: '',
47      },
48      rounded: {
49        default: 'rounded-md',
50        full: 'rounded-full',
51        none: 'rounded-none',
52        custom: 'rounded-[0.95rem]',
53      },
54    },
55    defaultVariants: {
56      variant: 'default',
57      size: 'default',
58      glow: false,
59      textEffect: 'normal',
60      uppercase: true,
61      rounded: 'custom',
62    },
63  },
64);
65 
66export interface AnimatedButtonProps
67  extends
68    React.ButtonHTMLAttributes<HTMLButtonElement>,
69    VariantProps<typeof buttonVariants> {
70  asChild?: boolean;
71  hideAnimations?: boolean;
72  shimmerColor?: string;
73  shimmerSize?: string;
74  borderRadius?: string;
75  shimmerDuration?: string;
76  background?: string;
77  style?: CustomCSSProperties;
78}
79 
80const AnimatedButton = React.forwardRef<HTMLButtonElement, AnimatedButtonProps>(
81  (
82    {
83      className,
84      variant,
85      size,
86      glow,
87      textEffect,
88      uppercase,
89      rounded,
90      asChild = false,
91      hideAnimations = false,
92// … truncated