ComponentsLight
Gradient text
Color flows slowly through the letters.
Color in motion
Installation
$ npx shadcn@latest add @textlab/gradient-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { GradientText } from "@/components/textlab/gradient-text/gradient-text";
<GradientText as="h1" text="Color in motion" variant="conic" />Variants
flowconicspectrumProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "flow" | "conic" | "spectrum" | "flow" | Drifting linear gradient, a turning color wheel, or a hue cycle. |
| colors | string[] | spectrum tokens | Gradient stops. |
| speed | number | 8 | Seconds per full 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
- One accent word or short headline per screen.
- Brand moments that should feel alive but calm.
Skip it
- Body text or long headlines; contrast varies along the gradient.
- Several gradients competing on one page.
Accessibility and motion
Accessibility
- The text is never split; it reads, selects and wraps normally.
- Pick stops that all pass contrast against the background.
Motion
- A full cycle takes 8 seconds by default, slow enough to read as ambient.
- Conic uses a registered angle property for a smooth rotation.
Reduced motion. The gradient stays still.
Performance
- Background position and a registered property; no JavaScript animation.