Text Shimmer Wave
Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.
Examples
Text Shimmer Wave Basic
Text Shimmer Wave 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-wave.jsonComponent 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. |