Shadcn.io is not affiliated with official shadcn/ui
Waveform Text
Letters whose vertical position oscillates as a continuously traveling sound-wave, computed per-character from time and pixel offset for React applications.
Waveform Text preview
Each character bobs to a sine wave that travels left-to-right through the string, like a waveform scrubbing past a playhead. The y-offset is computed analytically from Motion's useTime and the letter's horizontal pixel position — y = amplitude * sin(2π·speed·t − 2π·x/wavelength) — so the wave is one continuous traveling function rather than a stuttery keyframe loop. That formula keeps the animation perfectly smooth, scale-invariant, and stable at any string length. Configure amplitude (how tall), wavelength (how many waves are visible across the text), and speed (waves per second). Drop it into audio-app heroes, music marketing, podcast players, livestream banners, or any headline that should feel like sound.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the waveform-text text effect into my projectRelated Components
Wave Text
Letters undulating along a continuous sine wave
Ripple Text
Concentric ripple animation across letters
Bouncing Text
Rhythmic letter bouncing on a sine
Drift Text
Letters drifting on subtle perlin-like motion
Scroll Velocity
Marquee speed responds to scroll velocity
Liquid Text
Letters with liquid-like fluid motion
FAQ
Was this page helpful?
Sign in to leave feedback.