Text Shimmer

1"use client"
2 
3import { cn } from "@/lib/utils"
4 
5export type TextShimmerProps = {
6  as?: string
7  duration?: number
8  spread?: number
9  children: React.ReactNode
10} & React.HTMLAttributes<HTMLElement>
11 
12export function TextShimmer({
13  as = "span",
14  className,
15  duration = 4,
16  spread = 20,
17  children,
18  ...props
19}: TextShimmerProps) {
20  const dynamicSpread = Math.min(Math.max(spread, 5), 45)
21  const Component = as as React.ElementType
22 
23  return (
24    <Component
25      className={cn(
26        "bg-size-[200%_auto] bg-clip-text font-medium text-transparent",
27        "animate-[shimmer_4s_infinite_linear]",
28        className
29      )}
30      style={{
31        backgroundImage: `linear-gradient(to right, var(--muted-foreground) ${50 - dynamicSpread}%, var(--foreground) 50%, var(--muted-foreground) ${50 + dynamicSpread}%)`,
32        animationDuration: `${duration}s`,
33      }}
34      {...props}
35    >
36      {children}
37    </Component>
38  )
39}