Shimmer text
Text with a light band sweeping across it, for labels that say something is running.
Behaviour
- The base colour is muted-foreground and the band is foreground, both from tokens, so it reads on light and dark backgrounds.
- One CSS keyframe moves background-position, with no JavaScript per frame. It pauses while off screen.
- The text is a single node, so screen readers read it once.
- Reduced motion: it stands still in muted-foreground, fully readable.
Props
| Prop | Type | Description |
|---|---|---|
| as | ElementTypedefault "span" | The element to render (p, h2, div...). |
| duration | numberdefault 2.8 | Seconds for one linear sweep of the band. |
| className | string | Merged onto the root; set size and weight here. |
Installation
npx shadcn@latest add https://purrfectui.com/r/shimmer-text.jsonHow to use
import { ShimmerText } from "@/components/ui/shimmer-text";
<ShimmerText>Thinking…</ShimmerText>
<ShimmerText as="p" duration={2} className="text-sm font-medium">Generating report…</ShimmerText>Source code
Loading…
Credits
Ported from armour.vaibhavtomar.com.
License
MIT. Copy it into your project and change it as you like.