ComponentsLight
Aurora text
Northern lights drift inside the letters.
Northern lights
Installation
$ npx shadcn@latest add @textlab/aurora-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { AuroraText } from "@/components/textlab/aurora-text/aurora-text";
<AuroraText as="h1" text="Northern lights" />Variants
polarembermintProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "polar" | "ember" | "mint" | "polar" | Palette. |
| colors | string[] | – | Three or four custom colors; overrides the variant. |
| speed | number | 14 | Seconds for one drift cycle. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Large display headlines on dark or very light pages.
- Atmospheric brand moments.
Skip it
- Small text; the bands need room to read.
- Next to another gradient effect.
Accessibility and motion
Accessibility
- Plain text clipped to color. Check contrast of the darkest band against the background.
Motion
- A 14 s ease-in-out drift; slow enough to feel like weather, not an animation.
Reduced motion. A still aurora frame.
Performance
- Four background layers moved by one CSS animation.