Waveform Text for React

Waveform Text runs a quick wave through a line, from its start to its end, like sound scrolling across a waveform: each letter swings up and down as a crest passes, most in the middle of the line and least at its ends, the swell of a spoken word. As bars, the letters stretch and shrink from their middles instead, like a level meter.

Use it for an audio app's hero, a podcast or a live stream's title, a "recording" label: anything that should feel like sound. For a slow swell that rolls back through the line, the letters tilting with it, use Wave Text; for letters that squash against the line, Stretch Text. The motion is a CSS keyframe animation the install adds to your stylesheet, started part way through by each letter's place in the line and scaled by its place in the swell, with no animation library. With reduced motion the text sits still.

Installation

Usage

import { WaveformText } from "@/components/ui/waveform-text";

<h1>
  <WaveformText text="Sound on, live now" />
</h1>

Demos

Bars

variant="bars" stretches each letter from its middle, taller and shorter, instead of moving it, like the bars of a level meter. Capitals in a monospaced font make the most even bars.

Frequency

duration is one wave passing a letter, 1000 ms by default, and wavelength how many characters one wave spans, 5 by default: a long, slow wave hums; a short, quick one buzzes, for a small live label. intensity is how far the letters swing.

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 on a right-to-left page the wave runs from the start of the text to its end, the way it reads. The letters move by a fraction of their own size and bars never shrink below about two thirds of their height, so the text stays readable at every moment. With reduced motion it doesn't move.

FAQ

API Reference