Simon
40 lines
903 B
TypeScript
40 lines
903 B
TypeScript
import React, { memo } from 'react'
|
|
|
|
interface AuroraTextProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
colors?: string[]
|
|
speed?: number
|
|
}
|
|
|
|
export const AuroraText = memo(
|
|
({
|
|
children,
|
|
className = '',
|
|
colors = ['#FF0080', '#7928CA', '#0070F3', '#38bdf8'],
|
|
speed = 1,
|
|
}: AuroraTextProps) => {
|
|
const gradientStyle = {
|
|
backgroundImage: `linear-gradient(135deg, ${colors.join(', ')}, ${colors[0]})`,
|
|
WebkitBackgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
animationDuration: `${10 / speed}s`,
|
|
}
|
|
|
|
return (
|
|
<span className={`relative inline-block ${className}`}>
|
|
<span className="sr-only">{children}</span>
|
|
<span
|
|
className="animate-aurora relative bg-[length:200%_auto] bg-clip-text text-transparent"
|
|
style={gradientStyle}
|
|
aria-hidden="true"
|
|
>
|
|
{children}
|
|
</span>
|
|
</span>
|
|
)
|
|
}
|
|
)
|
|
|
|
AuroraText.displayName = 'AuroraText'
|