Shadcn.io is not affiliated with official shadcn/ui
Echo Text
Text rendered with stacked translucent ghost copies that lag behind the source on text changes for an echoing reverberation effect for React applications.
Echo Text preview
Type with reverb. The component renders the main text in front and stacks several translucent copies behind it — each shifted by a small offset and faded by a configurable decay factor — producing a ghost trail that looks like the word is echoing in space. When the text prop changes, the ghosts don't update in lockstep: they each catch up with a staggered delay, so for a brief moment you see the new word leading and the old word echoing behind. Configure the number of echoes, the offset between them, and the decay rate. Pure CSS positioning + a tiny string-buffer in React — no canvas, no SVG. Drop it into a hero, a glitchy interlude, or a button label that should feel like it's reverberating.
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 echo-text text effect into my projectRelated Components
Text Trail
WebGL text trail effect with cursor-driven noise
Glitch Text
Digital glitch effects with RGB channel separation
Blur Text
Text animation from blur to focus
Shimmering Text
Wave-like color shimmer across text
Morph Text
Smooth liquid morphing between strings
Rotating Text
Smooth vertical text cycling between strings
FAQ
Was this page helpful?
Sign in to leave feedback.
Drop Cap Text
Editorial-style illuminated drop-cap that scales the first letter to span multiple lines, with the paragraph wrapping naturally and an animated reveal for React applications.
Elastic Text
Drag a letter and watch it stretch the word like a spring chain, with neighbors following at a geometric falloff and a damped snap-back on release.