Text Shimmer Wave
Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.
Examples
Text Shimmer Wave Basic
Generating code...
Text Shimmer Wave Color
You can use the [--base-color] and [--base-gradient-color] CSS variables to customize the color of the shimmer effect.
Creating the perfect dish...
Installation
npx shadcn add "https://motion-primitives.com/c/text-shimmer-wave.json"Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | The text content. | |
| as | string | 'p' | The HTML element to render. |
| className | string | The class name to apply to the component. | |
| duration | number | 1 | The duration of the wave effect. |
| zDistance | number | 10 | The distance of the wave effect. |
| xDistance | number | 2 | The distance of the wave effect. |
| yDistance | number | -2 | The distance of the wave effect. |
| spread | number | 1 | The spread of the wave effect. |
| scaleDistance | number | 1.1 | The scale distance of the wave effect. |
| rotateYDistance | number | 10 | The rotateY distance of the wave effect. |
| transition | Transition | The transition of the wave effect. |