Text Gradient

1import * as React from "react"
2import { cn } from "@/lib/utils"
3 
4type CSSVariableStyle = React.CSSProperties & {
5  "--spread"?: string
6}
7 
8interface TextGradientProps extends React.HTMLAttributes<HTMLSpanElement> {
9  children: React.ReactNode
10  /**
11   * The spread distance for the gradient effect in pixels
12   * @default 22
13   */
14  spread?: number
15  /**
16   * The background color for the gradient highlight
17   * Can be a CSS variable or any valid CSS color
18   * @default "hsl(var(--background))"
19   */
20  highlightColor?: string
21  /**
22   * The base text color (shows through the gradient)
23   * Can be a CSS variable or any valid CSS color
24   * @default "hsl(var(--muted-foreground))"
25   */
26  baseColor?: string
27  /**
28   * Animation duration in seconds
29   * @default 3
30   */
31  duration?: number
32}
33 
34const TextGradient = React.forwardRef<HTMLSpanElement, TextGradientProps>(
35  (
36    {
37      children,
38      className,
39      spread = 22,
40      highlightColor = "var(--background)",
41      baseColor = "var(--muted-foreground)",
42      duration = 2,
43      style,
44      ...props
45    },
46    ref,
47  ) => {
48    const inlineStyle: CSSVariableStyle = {
49      "--spread": `${spread}px`,
50      ...style,
51      backgroundImage: `linear-gradient(90deg, transparent calc(50% - var(--spread)), ${highlightColor} 50%, transparent calc(50% + var(--spread))), linear-gradient(${baseColor}, ${baseColor})`,
52      backgroundSize: "250% 100%, 100% 100%",
53      animation: `text-gradient-shift ${duration}s linear infinite`,
54    }
55 
56    return (
57      <span
58        ref={ref}
59        className={cn(
60          "relative inline-block bg-clip-text text-transparent",
61          "[background-repeat:no-repeat,padding-box]",
62          className,
63        )}
64        style={inlineStyle}
65        {...props}
66      >
67        <style>
68          {`
69            @keyframes text-gradient-shift {
70              from { background-position: 100% center; }
71              to { background-position: 0% center; }
72            }
73          `}
74        </style>
75        {children}
76      </span>
77    )
78  },
79)
80 
81TextGradient.displayName = "TextGradient"
82 
83export { TextGradient }
84export default TextGradient