Shadcn.io is not affiliated with official shadcn/ui
Erase Text
Cursor-driven text eraser that fades each glyph toward transparency as the pointer sweeps over it and slowly restores the letter once the cursor has left, built with React, Next.js, motion, and TypeScript for production interactive typography.
Erase Text preview
Each letter is a tiny chalkboard panel watching the cursor. When the pointer enters a configurable activation radius, the glyph rapidly fades toward zero opacity — as if the cursor were dragging a felt eraser across it. As soon as the cursor moves on, every dimmed letter begins drifting back toward full opacity at a deliberate, configurable restore rate, giving the surface a calm "self-healing" rhythm. All updates happen via direct DOM writes inside a single requestAnimationFrame loop with refs, so the component renders once and animates without ever re-rendering. Spaces stay rigid, exponential decay keeps the motion organic, and the only props are text, radius, restoreSpeed, and eraseColor. Drop it into a hero, an interactive callout, or a marketing experiment to make plain copy feel like a touchable surface.
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 erase-text text effect into my projectRelated Components
Text Pressure
Variable font weight responding to cursor proximity
Variable Proximity
Variable-font axes that follow the cursor
Magnet Text
Letters physically pulled toward the cursor
Text Trail
Cursor trail that paints letters in its wake
Text Cursor
Character trails following cursor movement
Text Hover Effect
SVG text with radial gradient mask reveal
FAQ
Was this page helpful?
Sign in to leave feedback.