Animated Gradient Text

1import { type ComponentPropsWithoutRef } from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export interface AnimatedGradientTextProps extends ComponentPropsWithoutRef<"div"> {
6  speed?: number
7  colorFrom?: string
8  colorTo?: string
9}
10 
11export function AnimatedGradientText({
12  children,
13  className,
14  speed = 1,
15  colorFrom = "#ffaa40",
16  colorTo = "#9c40ff",
17  ...props
18}: AnimatedGradientTextProps) {
19  return (
20    <span
21      style={
22        {
23          "--bg-size": `${speed * 300}%`,
24          "--color-from": colorFrom,
25          "--color-to": colorTo,
26        } as React.CSSProperties
27      }
28      className={cn(
29        `animate-gradient inline bg-linear-to-r from-(--color-from) via-(--color-to) to-(--color-from) bg-size-[var(--bg-size)_100%] bg-clip-text text-transparent`,
30        className
31      )}
32      {...props}
33    >
34      {children}
35    </span>
36  )
37}