Text Shimmer
A soft highlight that sweeps across text — perfect for loading, thinking and generating states.
Motion
- Reading your codebase
- Planning changes
- Editing 4 files
- Running tests
Playground
Tweak the props, the preview and the code follow.
Generating response…
Props
2
2
import { TextShimmer } from "@/components/ui/text-shimmer"
<TextShimmer className="text-3xl font-semibold">
Generating response…
</TextShimmer>Installation
npx @plumsydev/plum-ui add text-shimmerUsage
import { TextShimmer } from "@/components/ui/text-shimmer"<TextShimmer duration={1.5}>Thinking…</TextShimmer>Examples
Duration & spread
Tune how fast the light travels and how wide it is.
Generating preview
2.0s
2
In a button
Swap a label for a shimmering status while work happens.
API Reference
TextShimmer
| Prop | Type | Default |
|---|---|---|
children*The text to shimmer. | string | — |
asElement to render. | "span" | "p" | "div" | "h1" | "h2" | "h3" | "span" |
durationSeconds per sweep. | number | 2 |
spreadHighlight width, multiplied by the character count. | number | 2 |
Notes
- Colors come from
--muted-foreground(base) and--foreground(highlight). Override[--base:…]and[--shine:…]viaclassName.