Animated typewriter effect with multi-sequence support, natural keystroke variance, delete animation, and auto-loop.
Installation
Usage
How It Works
- Pass a
sequencesarray where each item has atextstring and optionaldeleteAfter/pauseAfterflags. - When
deleteAfter: true, the text is erased before moving to the next sequence. - When
deleteAfter: false(or omitted on the last item), the text stays and the sequence advances or loops. naturalVarianceadds random per-character timing to mimic real typing rhythm.- The blinking cursor is rendered via
@keyframes blinkin your global styles.
API Reference
Typewriter
| Prop | Type | Default |
|---|---|---|
sequences? | TypewriterSequence[] | Default 3-sequence demo |
typingSpeed? | number | 50 |
deleteSpeed? | number | 30 |
startDelay? | number | 200 |
pauseBeforeDelete? | number | 1000 |
loopDelay? | number | 1000 |
autoLoop? | boolean | true |
naturalVariance? | boolean | true |
className? | string | - |
TypewriterSequence
| Prop | Type | Default |
|---|---|---|
text | string | - |
deleteAfter? | boolean | - |
pauseAfter? | number | - |