Shadcn.io is not affiliated with official shadcn/ui
Backspace Text
Typewriter that types a phrase, deletes back to the longest common prefix with the next phrase, then types the next, with a blinking cursor for React, Next.js, and motion.
Backspace Text preview
A typewriter that thinks out loud. Each phrase is typed one character at a time, held briefly, then partially deleted — but only as far back as the longest common prefix it shares with the next phrase. The next phrase types from there, so a sequence like "I write code." → "I write apps." → "I write systems." reads as a single train of thought correcting itself. The cursor blinks via Motion's infinite opacity loop, the type/hold/delete state machine runs in a single useEffect with proper teardown, and prefix detection is precomputed on phrase change with useMemo for stable timing. Configure type speed, delete speed, and the hold pause; pass any sizing through className. Ideal for hero rotating text where the "thought process" is part of the narrative.
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 backspace-text text effect into my projectRelated Components
Typing Text
Realistic typewriter effects with cursor blinking
Text Generate Effect
Progressive word-by-word generation
Decrypted Text
Matrix-style decryption with character cycling
Text Cursor
Character trails following cursor movement
Flip Words
Vertical word flips for rotating headlines
Iris Text
Per-letter iris reveal with circular clip-path
FAQ
Was this page helpful?
Sign in to leave feedback.
Annotation Text
Handwritten SVG ink annotations — circle, underline, strikethrough, and arrow — drawn over specific words on view, hover, or mount, with hand-drawn wobble and pathLength stroke reveals for React applications built with Next.js, motion, and Tailwind CSS.
Binary Text
Text that decodes from cycling 0s and 1s into the readable target string with per-character stagger for React applications.