Make your AI a shadcn expert
Previous: Variable Proximity
Next: Waveform Text

Wave Text

Letters undulating along a continuous traveling sine wave with per-character rotation matching the wave's tangent for React applications.

Wave Text preview

Scroll to load preview

A wave that never stops. Each character rides a continuous sine curve — bobbing vertically while rotating slightly to match the wave's tangent — so the whole word moves like a flag in a steady breeze. Built with Motion's useTime + useTransform so the animation is one perpetual analytic function rather than a keyframe loop, which means it never resets, never stutters, and stays buttery at any width. Configurable amplitude (how high), wavelength (how many letters per wave), speed (how fast the crest travels), and rotation (how much each letter tilts). Drop it into a hero, a 404 page, a marquee header — anywhere you want type that breathes.

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 wave-text text effect into my project

Shimmering Text

Wave-like color shimmer across text

Circular Text

Text rotating around a circular path

Curved Loop

Text following a curved SVG path

Rolling Text

Slot-machine letter roll for word transitions

Scroll Velocity

Marquee speed responds to scroll velocity

Falling Text

Physics-based letters that drop and pile

FAQ

Was this page helpful?

Sign in to leave feedback.

Variable Proximity

Variable font properties responding to cursor proximity with configurable falloff for React applications.

Waveform Text

Letters whose vertical position oscillates as a continuously traveling sound-wave, computed per-character from time and pixel offset for React applications.