ComponentsShimmerText
ShimmerText
Hero example
When to use
Reach for ShimmerText when text needs to feel like it is being thought into existence — streamed agent step labels, live status announcements, moment-of-realisation copy on a glass surface. Avoid it for static copy, headings, or anything the reader needs immediately.
Do — pair with a glass surface so the wipe reads as light passing through.
Don't — animate body copy; the wipe distracts from comprehension.
Anatomy
A polymorphic <span> (or <div>) wraps a sequence of word spans. Each
word carries a --word-index custom property which schedules its
animation delay against the --matter-shimmer-speed knob (default 45ms
per word). The last word carries data-shimmer-last="true" and binds
the onAnimationEnd handler used to fire onComplete.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| textrequired | string | — | — |
| speed | number | 45 | Milliseconds between successive word reveals. Default 45. |
| onComplete | () => void | — | Fired once after the last word's reveal animation ends. |
| as | "span" | "div" | "span" | Polymorphic tag. Default "span". |
| className | string | — | — |
| aria-label | string | — | Aria label override; defaults to the raw text for screen readers. |
States
Variants
The speed prop is the primary axis — slower for emphasis, faster for
short labels that want to feel snappy.
Density
Themes
Tokens consumed
Accessibility
- Not interactive; not focusable.
- Word spans are
aria-hiddento keep the reveal from fragmenting screen-reader output. - Full text exposed via
aria-label(override with the prop). prefers-reduced-motionswaps the mask wipe for a flat per-word fade.
Recipes
- Live thinking panel — the canonical consumer; types each agent step label.