Animated Shiny Text

1import {
2  type ComponentPropsWithoutRef,
3  type CSSProperties,
4  type FC,
5} from "react"
6 
7import { cn } from "@/lib/utils"
8 
9export interface AnimatedShinyTextProps extends ComponentPropsWithoutRef<"span"> {
10  shimmerWidth?: number
11}
12 
13export const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
14  children,
15  className,
16  shimmerWidth = 100,
17  ...props
18}) => {
19  return (
20    <span
21      style={
22        {
23          "--shiny-width": `${shimmerWidth}px`,
24        } as CSSProperties
25      }
26      className={cn(
27        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
28 
29        // Shine effect
30        "animate-shiny-text bg-size-[var(--shiny-width)_100%] bg-clip-text bg-position-[0_0] bg-no-repeat [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
31 
32        // Shine gradient
33        "bg-linear-to-r from-transparent via-black/80 via-50% to-transparent dark:via-white/80",
34 
35        className
36      )}
37      {...props}
38    >
39      {children}
40    </span>
41  )
42}