Typewriter Text
Types and deletes a list of phrases with natural rhythm, a bar, block or underscore caret, optional reserved width and polite announcements.
Preview
Pebble notes, a writing tool
Docs that read well for product designers.
Write once, keep it current, and let every reader find the part they came for.
zsh · checkout
✓ 214 tests passed in 8.4s
~/shop $ pnpm deploy
Rotating examples sit where the placeholder would.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| phrases | string[] | — | Typed in order. A single phrase types once and stays. |
| typeSpeed / deleteSpeed | number | 55 / 28 | Average ms per typed character and ms per deleted one. |
| pause / gap / startDelay | number | 1800 / 400 / 300 | Hold on a full phrase, wait on the empty line, wait before the first key. |
| loop | boolean | true | Start over after the last phrase; off, the last phrase stays. |
| natural | boolean | true | Human rhythm: jitter per key, longer beats after spaces and punctuation. |
| caret | "bar" | "block" | "underscore" | false | "bar" | Caret shape. Solid while typing, blinks while waiting. |
| reserve | boolean | false | Reserve the width of the longest phrase so nothing after it moves. |
| announce | boolean | false | Announce each new phrase in full through a polite live region. |
| as | "span" | "div" | "p" | "h1" | "h2" | "h3" | "span" | Element to render. |
| onPhraseChange | (index: number) => void | — | Called when the next phrase starts. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.