Shimmer Text React component
A soft band of light that sweeps through a line of text, for loading states, AI status lines and quiet emphasis.
About the Shimmer Text component
Shimmer Text passes a soft band of light through a line of text. It says something is happening without a spinner, which makes it a natural fit for loading messages and AI status lines.
It reads its colours from the surrounding text by default, so it works on dark and light pages with nothing to set.
When to use it
Use it for short status lines like Thinking, Generating or Syncing, or to draw the eye to a single phrase.
Keep it to one line at a time, and stop it when the work is done.
Installation
Add the Shimmer Text component to your project with the shadcn CLI. It lands in components/shimmer-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/shimmer-textProps
<ShimmerText /> accepts 5 props, all optional. It also accepts the usual <span> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "Generating your report" |
| seconds Seconds per sweep. | number | 2 |
| base Colour at rest. Defaults to a dimmed version of the text colour. | string | "color-mix(in srgb, currentColor 42%, transparent)" |
| shine Colour of the sweep. Defaults to the text colour. | string | "currentColor" |
| band Width of the sweep, in percent. | number | 16 |
- textstringDefault: "Generating your report"
- seconds
Seconds per sweep.
numberDefault: 2 - base
Colour at rest. Defaults to a dimmed version of the text colour.
stringDefault: "color-mix(in srgb, currentColor 42%, transparent)" - shine
Colour of the sweep. Defaults to the text colour.
stringDefault: "currentColor" - band
Width of the sweep, in percent.
numberDefault: 16
Shimmer Text FAQ
- Can I set the colours?
- Yes, with base and shine. By default they come from the text colour.
- How do I change the speed?
- seconds sets how long one sweep takes.
- Does it re-render while it runs?
- No. It is a single looping animation on the background.
- What about reduced motion?
- The text stays still in its dimmed colour.
