AuroraText
aurora-textAnimates a multicolor aurora gradient across inline text.
Usage
Basic usage
Uses the Hulian chart-token gradient by default and adapts to the active theme.
<AuroraText className="text-4xl font-bold">Hulian</AuroraText>Flow speed
speed Controls the streamer speed magnification, the larger it is, the faster it is (default 1).
<AuroraText className="text-4xl font-bold" speed={3}>
Aurora
</AuroraText>Custom gradient color
colors Pass in any dock color array (it is recommended to use token for light and dark).
<AuroraText
className="text-4xl font-bold"
colors={["var(--color-chart-2)", "var(--color-chart-4)", "var(--color-primary)"]}
>
Spectrum
</AuroraText>Title level typesetting
As a headline embellishment, ordinary text is mixed and only the keywords are highlighted.
Brand new Hulian Design System
<h2 className="text-3xl font-bold text-foreground">
Brand new <AuroraText>Hulian</AuroraText> design system
</h2>When to use
Use AuroraText to add an animated aurora gradient to a short heading or brand phrase. It clips the background to the text and uses four HulianUI chart tokens by default, so it follows light and dark themes. For a sweeping highlight, use AnimatedShinyText. For a moving inline gradient, use AnimatedGradientText. Use Text for ordinary copy, and avoid animating long passages.
Import
import { AuroraText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | 4 HulianUI chart tokens | Gradient stop colors that follow the active theme by default. |
| speed | number | 1 | Animation speed multiplier; larger values move faster. |
Inherits ComponentPropsWithoutRef<"span"> except color, including className and style.
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Text to render. |
Usage guidelines
- The component renders a
<span>. The visible effect depends on surroundingtext-*andfont-*styles; empty content has no visible effect. - Every custom
colorsentry must be a valid CSS color. HulianUI tokens need the--color-prefix when used in SVG or gradients; see the HulianUI token conventions.
Related
Text · Heading · Prose · Markdown · AnimatedShinyText · AnimatedGradientText
Playground
<AuroraText speed={1}>Hulian</AuroraText>