Typewriter

Types a string out character by character with a blinking caret. Pass an array to cycle words - type, hold, backspace, next. A single string types once and holds.

Installation

npx stepwise-ui add typewriter

We build

import { Typewriter } from '@/components/stepwise/typewriter'

// Cycle a list: type → hold → backspace → next (loops)
We build{' '}
<Typewriter words={['design systems', 'component libraries', 'delightful UIs']} />

// A single string types once and holds, caret keeps blinking
<Typewriter words="Hello, world" />

Props

PropTypeDescription

words

string | string[]

One string types and holds; an array cycles through them.

typeSpeed

number

ms per character while typing. Default 65.

deleteSpeed

number

ms per character while deleting. Default 35.

holdTime

number

ms to hold a completed word before deleting. Default 1400.

loop

boolean

Loop the sequence. Default true when multiple words.

className

string

Extra classes on the text.

caretClassName

string

Extra classes on the blinking caret.