Text Shimmer
A soft light sweep — great for AI loading states.
- 0.4 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Generating your page…
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/text-shimmer.jsonAdds components/velora/text-shimmer.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
Also accepts every <span> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The sweep is off; the text rests in the muted foreground colour with a slight brightening at the right edge and stays fully readable.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Children are read as normal text. It is not a live region, so add role="status" yourself if you use it as a loading indicator.