Backspace text
Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.
Text, timeline, looping, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/backspace-text.tsx https://motion-brew.com/r/backspace-text.tsxOne self contained file for React and Tailwind CSS: backspace-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BackspaceText } from "@/components/backspace-text";
export default function Page() {
return (
<BackspaceText before="We design for" words={["people.", "speed.", "delight."]} className="text-4xl font-semibold" />
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before | string | "We design for" | Fixed text before the typed word |
| words | string[] | ["people.", "speed.", "delight."] | Words to type in turn |
| typeSpeed | number | 75 | Milliseconds per typed letter |
| deleteSpeed | number | 40 | Milliseconds per deleted letter |
| pause | number | 1400 | Milliseconds a finished word stays |
| wordClassName | string | violet | Classes for the typed word |
| className | string | Font, size and color |
More text
- Binary text: Text scrambles into 0s and 1s, then decodes left to right.
- Wave text: A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.
- Blur text: Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.
- Flip words: One word in a sentence flips to the next on a loop, letter by letter in 3D, while the sentence reflows smoothly around it.