Text Shimmer
Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.
Examples
Text Shimmer Basic
Generating code...
Text Shimmer Color
You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.
Hi, how are you?
Installation
npx motion-primitives@latest add text-shimmer
Component 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.