Typewriter Text React component
Text that types and deletes itself with a human, uneven beat, while the space it needs stays reserved so nothing around it moves.
About the Typewriter Text component
Typewriter Text writes itself out and deletes itself again, with the slightly uneven rhythm of someone actually typing. It works inside a heading or a sentence, and takes its colour and font from what surrounds it.
The longest phrase reserves its space from the start, so nothing around the text shifts as it types.
When to use it
Use it for hero lines, prompts and examples, like showing what people could ask or build.
Keep phrases short. Long sentences take too long to read while they type.
Installation
Add the Typewriter Text component to your project with the shadcn CLI. It lands in components/typewriter-text.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/typewriter-textProps
<TypewriterText /> accepts 5 props, all optional. It also accepts the usual <span> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| phrases | string[] | PHRASES |
| speed Milliseconds per letter. | number | 58 |
| pause Milliseconds a finished phrase stays. | number | 1300 |
| loop Start again after the last phrase. | boolean | true |
| caret | boolean | true |
- phrasesstring[]Default: PHRASES
- speed
Milliseconds per letter.
numberDefault: 58 - pause
Milliseconds a finished phrase stays.
numberDefault: 1300 - loop
Start again after the last phrase.
booleanDefault: true - caretbooleanDefault: true
Typewriter Text FAQ
- Can it stop after the last phrase?
- Yes. Set loop to false and it stays on the last one.
- Can I hide the caret?
- Yes, with caret={false}.
- Why doesn't the layout jump?
- An invisible copy of the longest phrase holds the space.
- What do screen readers hear?
- All the phrases at once, not each letter as it appears.
