Aurora Text
Gradient text with a rainbow aurora that drifts across the letters.
Ship beautiful UI
Installation
pnpm dlx shadcn@latest add @godui/aurora-textRequires the @godui namespace in your components.json (one-time setup):
{ "registries": { "@godui": "https://godui.design/r/{name}.json" }}AuroraText clips an animated gradient to the text via background-clip: text.
The animation is CSS-only and respects prefers-reduced-motion — no font or
JavaScript animation dependency required.
Usage
import { AuroraText } from "@/components/godui/aurora-text";AuroraText is an inline <span>, so it inherits the surrounding font size and
weight. Wrap it inside a heading and style that parent:
<h1 className="text-6xl font-bold tracking-tight">
Ship <AuroraText>beautiful</AuroraText> UI
</h1>Custom colors
Pass any list of CSS colors. The aurora loops back to the first stop for a seamless cycle, so two or three colors are enough.
<AuroraText colors={["#ff512f", "#dd2476", "#ff512f"]}>Sunset</AuroraText>Speed
speed is a multiplier — 1 is roughly a 10s cycle, higher is faster.
<AuroraText speed={3}>Lightspeed</AuroraText>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Text to render with the aurora gradient. |
colors | string[] | Rainbow spectrum | Gradient stops the aurora cycles through. |
speed | number | 1 | Speed multiplier; 1 ≈ 10s per cycle, higher is faster. |
AuroraText also forwards every standard <span> attribute (className,
style, id, …) to the root element.