shimmer-button

1"use client"
2 
3import React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface ShimmerButtonProps
8  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
9  shimmerColor?: string
10  shimmerSize?: string
11  borderRadius?: string
12  shimmerDuration?: string
13  background?: string
14  className?: string
15  children?: React.ReactNode
16}
17 
18const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
19  (
20    {
21      shimmerColor = "#ffffff",
22      shimmerSize = "0.05em",
23      shimmerDuration = "3s",
24      borderRadius = "100px",
25      background = "rgba(0, 0, 0, 1)",
26      className,
27      children,
28      ...props
29    },
30    ref,
31  ) => {
32    return (
33      <button
34        style={
35          {
36            "--spread": "90deg",
37            "--shimmer-color": shimmerColor,
38            "--radius": borderRadius,
39            "--speed": shimmerDuration,
40            "--cut": shimmerSize,
41            "--bg": background,
42          } as React.CSSProperties
43        }
44        className={cn(
45          "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
46          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
47          className,
48        )}
49        ref={ref}
50        {...props}
51      >
52        {/* spark container */}
53        <div
54          className={cn(
55            "-z-30 blur-[2px]",
56            "absolute inset-0 overflow-visible [container-type:size]",
57          )}
58        >
59          {/* spark */}
60          <div className="absolute inset-0 h-[100cqh] animate-shimmer-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
61            {/* spark before */}
62            <div className="animate-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
63          </div>
64        </div>
65        {children}
66 
67        {/* Highlight */}
68        <div
69          className={cn(
70            "insert-0 absolute size-full",
71            "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
72            "transform-gpu transition-all duration-300 ease-in-out",
73            "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
74            "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]",
75// … truncated