Wave text
A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.
Text, hover, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/wave-text.tsx https://motion-brew.com/r/wave-text.tsxOne self contained file for React and Tailwind CSS: wave-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { WaveText } from "@/components/wave-text";
export default function Page() {
return (
<WaveText
as="h1"
text="Bend the rules"
strength={32}
className="font-[family-name:Silkscreen] text-7xl font-bold uppercase leading-[0.95] tracking-tight"
/>
);
}Props
| Prop | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
| text | string | "Bend the rules" | Heading text; each word warps on its own | ||||
| as | "h1" \ | "h2" \ | "h3" \ | "p" \ | "div" | "h2" | Element to render |
| strength | number | 40 | Peak displacement, px | ||||
| speed | number | 1.8 | Seconds per full drift of the wave while hovered | ||||
| className | string | Font, size and color |
More text
- Blur text: Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.
- Flip words: One word in a sentence flips to the next on a loop, letter by letter in 3D, while the sentence reflows smoothly around it.
- Gradient text: A slow gradient flows through the letters on a seamless loop, clipped to real, selectable text.
- Highlight text: A marker sweeps behind key phrases one after another as the paragraph scrolls into view.