Type Writer
タイプライター
Lines that type themselves out, pause, erase and hand over to the next one. The keystroke delay is deliberately uneven — a tenth of the presses hesitate, a tenth run ahead and the rest scatter around the nominal speed — because perfectly regular timing is the single thing that makes this effect read as a machine rather than a hand. The whole loop is one setTimeout↗↗ chain driven by refs, so a re-render never types a character twice, and the sequences are held in a ref so passing a fresh array literal does not restart a word halfway through. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
How to use it3
Props
TypeWriter
| Name | Default | Description |
|---|---|---|
| sequences | — | { text: string, deleteAfter?: boolean, pauseAfter?: number }[] Lines to type, in order |
| typingSpeed | 50 | number Nominal milliseconds per keystroke |
| deleteSpeed | 30 | number Milliseconds per character while erasing |
| startDelay | 200 | number Milliseconds before the first keystroke |
| pauseBeforeDelete | 1000 | number Milliseconds a finished line is held, unless the line sets pauseAfter |
| loopDelay | 1000 | number Milliseconds between the last line and the first |
| autoLoop | true | boolean Start over after the last line |
| naturalVariance | true | boolean Scatter the keystroke timing instead of holding it constant |
| dark | false | boolean Render the dark palette |