AnimatedGradientText
animated-gradient-textMoves a configurable gradient through text for animated emphasis.
Usage
Basic usage
Inline logo-level gradient flowing text, default chart token Eat light and dark theme.
<AnimatedGradientText className="text-2xl">🎉 New Hulian component library</AnimatedGradientText>Flow speed
speed Controls the gradient translation speed magnification (default 1).
<AnimatedGradientText className="text-2xl" speed={2.5}>
Limited time offer in progress
</AnimatedGradientText>Custom gradient color
colors Pass in the dock color array, and the beginning and end of the gradient will automatically connect into a seamless loop.
<AnimatedGradientText
className="text-2xl font-bold"
colors={["var(--color-primary)", "var(--color-chart-3)", "var(--color-chart-5)"]}
>
HanFlow Hulian
</AnimatedGradientText>When to use
Use AnimatedGradientText to add a moving gradient to a short inline phrase. It participates in normal inline layout and uses HulianUI chart tokens by default. For an aurora texture suited to large headings, use AuroraText. For a sweeping highlight on a badge or label, use AnimatedShinyText.
Import
import { AnimatedGradientText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | HulianUI chart tokens | Gradient stop colors. |
| speed | number | 1 | Animation speed multiplier. |
Inherits ComponentPropsWithoutRef<"span"> (except color), such as className / style.
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Text to render |
Example
<AnimatedGradientText className="text-2xl">🎉 New HulianUI component library</AnimatedGradientText>Usage guidelines
- The component renders an inline
<span>and reveals the gradient by clipping it to the text. Empty content has no visible effect, and the result inherits its font size from the surrounding text. - When using HulianUI tokens in a custom
colorsarray, include the--color-prefix so the values can be resolved inside the gradient. See the HulianUI token conventions.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<AnimatedGradientText speed={1}>🎉 Brand new Hulian </AnimatedGradientText>