Text Shimmer
Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.
Examples
Text Shimmer Basic
Text Shimmer Color
You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-text-shimmer.jsonComponent API
TextShimmer
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | The text content. | |
| as | keyof JSX.IntrinsicElements | 'p' | The HTML tag to render, defaults to paragraph. |
| className | string | undefined | Optional CSS class for styling the component. |
| duration | number | 2 | The duration of the shimmer effect. |
| spread | number | 2 | The spread of the shimmer effect. |
Credits
Inspired by JohnPhamous for the idea of the shimmer effect that scales with the content length.