Wave Text for React

Wave Text sets a line on a smooth, endless swell: each letter rises and sinks a little after its neighbour, so a wave rolls back through the text, and each one tilts with the slope beneath it, like a flag in a steady breeze.

Use it for a playful headline, a 404 page or a word in a hero that should feel alive. For a quicker wave that runs forward through the line like sound, use Waveform Text; for letters that hop in turn and rest, Bouncing Text; for letters that each float on their own, Drift Text. The motion is two CSS keyframe animations the install adds to your stylesheet, a rise and a tilt, started part way through by each letter's place in the wave, with no animation library. With reduced motion the text sits on its line.

Installation

Usage

import { WaveText } from "@/components/ui/wave-text";

<h1>
  <WaveText text="Make some waves" />
</h1>

Demos

Intensity

intensity is how high the letters rise and how far they tilt: subtle for a ripple under body text, medium, the default, for a headline, strong for a word that should be the loudest thing on the page.

Wavelength

wavelength is how many characters one wave spans, 8 by default: fewer make a short, choppy sea, more one long swell. duration is one full wave through a letter, 2000 ms by default; a short wave suits a quick one, a long wave a slow one.

Accessibility

Screen readers read the text once, as plain text, from a visually hidden copy; the moving letters are hidden from them. Words wrap whole, and the line keeps its direction on a right-to-left page, where the letters tilt the other way to follow the slope. The letters move by a fraction of their own size, so the text stays readable at every moment. With reduced motion it doesn't move.

FAQ

API Reference