Wave Text
Pro
Letters that bob in a travelling sine wave, all the time or only on hover.
Ride the wave
Customize
10px
1.6s
Trigger
Installation
Wave Text is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy wave-text.tsx into components/ui and run npm install motion.
Usage
import { WaveText } from "@/components/ui/wave-text";
<WaveText text="Ride the wave" amplitude={10} trigger="hover" />Props
5 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to animate, split into letters. |
| amplitude | number | 10 | Height of the wave in pixels. |
| speed | number | 1.6 | Seconds for one full wave. |
| trigger | "always" | "hover" | "always" | Wave all the time, or only while hovered or focused. |
| className | string | — | Extra classes for the text. |
Dependencies: motion