GradientText — 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