Shadcn.io is not affiliated with official shadcn/ui
Ripple Text
Letters distorted by water ripples that radiate from each click point with damped sine wave physics for React applications.
Ripple Text preview
Type that ripples like the surface of a pond. Click anywhere on the wrapper and a circular wave expands from the click point — every letter's vertical position is offset by a damped sine of its distance to the wave front, so the ripple visibly travels through the word. Multiple clicks stack: ripples overlap, interfere, and fade out independently using a real damped-harmonic falloff (amplitude × e^(-decay·t) × sin(2π(d - speed·t)/wavelength)). All animation runs in a single requestAnimationFrame loop that writes transforms directly to letter refs, so the scene stays smooth no matter how many ripples are active. Drop it into a hero, an interactive section title, or a 404 — anywhere you want type that genuinely responds to the user.
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 ripple-text text effect into my projectRelated Components
Wave Text
Continuous traveling sine wave through text
Liquid Text
Letters merge through an SVG goo filter
Fuzzy Text
Soft blur transitions with particle-like effects
Text Trail
Cursor-following text trail with delayed motion
Blur Text
Text animation from blur to focus
Splitting Text
Character, word, or line splitting with timing
FAQ
Was this page helpful?
Sign in to leave feedback.