← DOCS
text

GradientText

Animated gradient text with customizable colors and direction.

npx chaos add gradient-text

PREVIEW

GRADIENT

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { GradientText } from '@oalacea/chaosui/text/gradient-text';

<GradientText>RAINBOW</GradientText>
<GradientText colors={['#ff0040', '#ff00ff']} speed={5}>NEON</GradientText>
<GradientText direction="vertical">FLOW</GradientText>

PROPS

PropTypeDefault
childrenThe text to display
string-
colorsArray of colors for the gradient
string[]["#ff0000", "#ffff00", ...]
speedAnimation duration in seconds
number3
directionAnimation direction
"horizontal" | "vertical" | "diagonal""horizontal"
angleGradient angle in degrees (overrides direction)
number-
sizeGradient size percentage
number200
pauseOnHoverPause animation on hover
booleanfalse