Animated Gradient Text
Animated Gradient Text applies a moving multicolor gradient to text, with optional gradient border mode. You can control direction, speed, yoyo behavior, and pause-on-hover.
Clean Syntax
Basic Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | required | Text or inline content to render. |
className | string | "" | Additional classes for the wrapper. |
colors | string[] | ["#5227FF", "#FF9FFC", "#B497CF"] | Gradient palette sequence. |
animationSpeed | number | 8 | Duration in seconds for a forward pass. |
showBorder | boolean | false | Enables animated border treatment around the text. |
direction | "horizontal" | "vertical" | "diagonal" | "horizontal" | Direction of gradient movement. |
pauseOnHover | boolean | false | Pauses animation while hovered. |
yoyo | boolean | true | Reverses the animation back and forth each cycle. |
Border + Hover Pause
Loading...
Vertical Direction
Loading...
Tip: Use Alt + ← / → to navigate