Wave Text
Each grapheme rides a sine wave up and down, with adjustable amplitude, wavelength, and speed, and a hover speed boost
Each grapheme takes a sine phase offset from its index, undulating continuously along the y axis and tilting slightly with the tangent of the waveform, producing a wave that flows from left to right. On mouse enter the wave speed accelerates smoothly and eases back on leave — a playful accent for headings and brand wordmarks.
Loading preview…
npx shadcn@latest add https://webberui.com/r/wave-text.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
8
8
1
2.5
<WaveText />
Installation
npx shadcn@latest add https://webberui.com/r/wave-text.jsonOr, once registries are configured in components.json, install it as @webberui/wave-text.
Usage
import { WaveText } from "@/components/ui/wave-text";
<h1 className="text-4xl font-bold">
<WaveText text="Text riding the wave forward" amplitude={10} wavelength={7} />
</h1>Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text content to undulate |
amplitude | number | 8 | Crest amplitude (px), the maximum vertical offset of each grapheme |
wavelength | number | 8 | Number of graphemes spanned by one full sine cycle; larger flattens the waveform |
speed | number | 1 | Sine cycles completed per second; larger flows faster |
hoverBoost | number | 2.5 | Wave speed multiplier on hover; on mouse enter it accelerates smoothly to this multiple |
className | string | — | forwarded to the outermost container |
Accessibility
- When the user has "reduce motion" enabled at the system level, static text is rendered and no animation loop starts
- The complete text is exposed
sr-onlyfor the screen reader to announce, and the split graphemes are hidden from assistive technology (aria-hidden) - The animation only uses
transform(translation and rotation), so it never changes the layout flow or reflows content