Aurora Text

1"use client"
2 
3import React, { memo } from "react"
4 
5interface AuroraTextProps {
6  children: React.ReactNode
7  className?: string
8  colors?: string[]
9  speed?: number
10}
11 
12export const AuroraText = memo(
13  ({
14    children,
15    className = "",
16    colors = ["#FF0080", "#7928CA", "#0070F3", "#38bdf8"],
17    speed = 1,
18  }: AuroraTextProps) => {
19    const gradientStyle = {
20      backgroundImage: `linear-gradient(135deg, ${colors.join(", ")}, ${
21        colors[0]
22      })`,
23      WebkitBackgroundClip: "text",
24      WebkitTextFillColor: "transparent",
25      animationDuration: `${10 / speed}s`,
26    }
27 
28    return (
29      <span className={`relative inline-block ${className}`}>
30        <span className="sr-only">{children}</span>
31        <span
32          className="animate-aurora relative bg-size-[200%_auto] bg-clip-text text-transparent"
33          style={gradientStyle}
34          aria-hidden="true"
35        >
36          {children}
37        </span>
38      </span>
39    )
40  }
41)
42 
43AuroraText.displayName = "AuroraText"