TextNew
Text Shimmer
A light band sweeps across grey text. The usual way to show that AI is thinking or something is loading.
Customize
baseColor
shineColor
Based on Text Shimmer (MIT license) · Terms of use
More in Pro
View allProps
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | string | "Generating your page..." | Text the shine runs across. |
| duration | number | 2 | Seconds for one pass of the shine. |
| spread | number | 2 | Width of the shine. Higher is a wider band. |
| as | React.ElementType | "p" | HTML tag of the wrapper. |
| className | string | — | Wrapper classes. Colours are set with baseColor and shineColor. |
| baseColor | string | "#71717a" | Colour of the text under the shine. |
| shineColor | string | "#ffffff" | Colour of the band of light that runs across. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge