Typewriter Text

Types text out a character at a time, with a blinking cursor.

Installation

bash

npx @smicolon/cli add typewriter-text

Run init once per project before adding components. See Installation.

Preview

Cycling words

TypewriterWords types a word, deletes it and moves on to the next.

New in:

Accessibility

The cursor is hidden from assistive tech.
With prefers-reduced-motion set, the full text appears at once, with no cursor.
A screen reader reads the text as it stands when it gets there, which may be half typed. Give the same message elsewhere on the page.

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to type.
`speed`	`number`	`50`	Milliseconds per character.
`delay`	`number`	`0`	Milliseconds before typing starts.
`cursor`	`boolean`	`true`	Shows the cursor.
`cursorChar`	`string`	`"\|"`	The cursor character.
`loop`	`boolean`	`false`	Types the text again after a pause.
`loopDelay`	`number`	`2000`	Milliseconds before it types again.
`onComplete`	`() => void`	—	Called when the text is fully typed.
`TypewriterWords`	`{ words, speed, deleteDelay, wordDelay, cursor }`	—	Types, deletes and cycles through a list of words.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { TypewriterText, TypewriterWords } from "@/components/ui/typewriter-text"

<TypewriterText text="Your order is on its way." speed={60} loop />

<p>
  New in: <TypewriterWords words={["linen shirts", "leather bags", "wool scarves"]} />
</p>