Text Shimmer
An animated text shimmer effect for loading states and AI responses.
Examples
Basic usage
Calculating tokens
Custom duration
You can customize the duration of the shimmer effect.
Processing dataAnalyzing patterns
Custom spread
And you can customize the spread of the shimmer effect.
Loading componentsEstablishing connection
Installation
npx shadcn add "https://prompt-kit.com/c/text-shimmer.json"Component API
TextShimmer
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The text content to shimmer | |
| as | string | "span" | The HTML element to render |
| duration | number | 4 | The duration of the animation in seconds |
| spread | number | 20 | The width of the shimmer effect (5-45) |
| className | string | Additional CSS classes |