A typewriter with uneven rhythm: longer beats after punctuation, the occasional wrong key noticed late and backspaced. The sequence is seeded, so it is identical on every render.
New message to
Maya Chen
npx shadcn@latest add https://hyperblur.dev/r/typewriter-human.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/typewriter-human.tsx.
import { TypewriterHuman } from "@/components/hyperblur/typewriter-human"
<TypewriterHuman text="Hey Maya, quick update: staging is green." className="text-lg" />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | The text to type. Space for the full text is reserved up front so the layout never jumps. |
| speed | number | 75 | Average milliseconds per keystroke. Each key varies around this value. |
| typos | number | 0.05 | Chance from 0 to 1 that a letter is mistyped, then corrected with backspace. 0 disables mistakes. |
| seed | number | 3 | Integer that selects which keystrokes get delays and typos. The same seed always gives the same performance. |
| loop | boolean | true | Clear the text and type it again after the pause. |
| pause | number | 2600 | Milliseconds to hold the finished text before looping. |
| accent | string | "#7fb3ff" | Caret color. |