Animated shimmer text for streaming, thinking, and loading labels.
Use TextShimmer for short labels that indicate active generation or background work.
The shimmer uses currentColor, so you can pass text color utilities such as text-muted and keep the animation visible.
The text renders at 45% alpha and the sweeping highlight at full strength.
<TextShimmer className="text-muted">Thinking...</TextShimmer>import {TextShimmer} from "@heroui-pro/react";
<TextShimmer>Thinking...</TextShimmer>;The highlight is GPU-composited: an inert copy of the text masks a gradient that animates with
translate only, so no background-position repaint happens per frame. Set --spread to change how
wide the highlight falloff is.
Under prefers-reduced-motion: reduce the animated layer is removed and the text renders solid.
.text-shimmer - Root element.text-shimmer__text - Readable text layer.text-shimmer__highlight - Inert copy that masks the animated highlight to the glyphs| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Text content |
className | string | - | Additional classes, including color and text size utilities |
Also supports render props from HeroUI dom.span.