ComponentsLight
Shimmer text
A calm light passes across the words.
Generating a reply
Installation
$ npx shadcn@latest add @textlab/shimmer-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { ShimmerText } from "@/components/textlab/shimmer-text/shimmer-text";
<ShimmerText text="Thinking" />Variants
subtlebrightrainbowProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "subtle" | "bright" | "rainbow" | "subtle" | A soft pass for status lines, a crisp sheen, or a hint of color. |
| speed | number | 2.4 | Seconds per pass, including the rest after it. |
| spread | number | 0.18 | Width of the light band as a share of the text. |
| 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
- Loading, thinking and generating states.
- Placeholders that should feel alive while content arrives.
Skip it
- Headings that are already loaded; the motion implies work in progress.
- Error or success messages.
Accessibility and motion
Accessibility
- Plain, unsplit text. Pair it with aria-busy on the region that is loading.
Motion
- The light crosses in the first 70% of each cycle, then rests, so it never feels frantic.
Reduced motion. The text shows at a steady, slightly muted color.
Performance
- One CSS animation on background position.