Loading…

Typewriter Text

beta

Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.

Effects & motion
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add typewriter-text

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Cycling
Block Caret

API

Generated from the component's own types, so a prop cannot appear here without existing.

<TypewriterText>

Prop	Type	Default
`children` (required) One string to type, or a list to type, delete and cycle through.	`string \| readonly string[]`	—
`as` The element to render.	`TypewriterTextElement`	`"span"`
`caret`	`"bar" \| "block" \| "none"`	`"bar"`
`deleteSpeed` Milliseconds per deleted character, for a list. Defaults to half of `speed`.	`number`	—
`loop` Keep going. A single string clears and retypes; a list cycles back to its first item. Defaults to `false` for a string and `true` for a list.	`boolean`	—
`pause` Milliseconds a finished string holds before it restarts or is deleted.	`number`	`1000`
`ref`	`Ref<HTMLElement>`	—
`speed` Milliseconds per typed character.	`number`	`50`
`startDelay` Milliseconds before typing starts.	`number`	`0`

Plus every attribute of <span> except ref, children.

Accessibility

The typed characters are aria-hidden and an sr-only copy holds the full text (every item, for a list), so a screen reader reads it once and never per character. The server renders the finished text, and the untyped remainder reserves its space so nothing reflows. Under reduced motion the full text shows immediately.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

children

One string to type, or a list to type, delete and cycle through.

string | readonly string[]

—

as

The element to render.

TypewriterTextElement

"span"

caret

"bar" | "block" | "none"

"bar"

deleteSpeed

Milliseconds per deleted character, for a list. Defaults to half of speed.

number

—

loop

Keep going. A single string clears and retypes; a list cycles back to its first item. Defaults to false for a string and true for a list.

boolean

—

pause

Milliseconds a finished string holds before it restarts or is deleted.

number

1000

ref

Ref<HTMLElement>

—

speed

Milliseconds per typed character.

number

50

startDelay

Milliseconds before typing starts.

number

0