Signature / Moleculestable

Typewriter

Character-by-character typing animation with blinking cursor and loop support.

@glinui/uiComponent: typewriter

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add typewriter

Usage$

Typewriter is a "use client" component. Place it inline to type out text character by character with an optional blinking cursor. The text prop controls what gets typed.

Basic$

TSX

1"use client"
2import { Typewriter } from "@glinui/ui"
3
4export function TypewriterDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <h2 className="text-3xl font-bold">
8      <Typewriter text="Welcome to Glin UI" />
9    </h2>
10  </div>
11)
12}

Examples$

Word Rotation$

Pass a words array to cycle through multiple phrases. Each word is typed, deleted, then the next one types out.

Build

TSX

1"use client"
2import { Typewriter } from "@glinui/ui"
3
4export function TypewriterWordsDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <h2 className="text-3xl font-bold">
8      Build{" "}
9      <Typewriter
10        words={["interfaces", "experiences", "products", "the future"]}
11        speed={60}
12        deleteSpeed={40}
13        pauseDuration={2000}
14        className="text-accent"
15      />
16    </h2>
17  </div>
18)
19}

Loop$

Enable loop to continuously retype a single text after a pause.

TSX

1"use client"
2import { Typewriter } from "@glinui/ui"
3
4export function TypewriterLoopDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <p className="text-xl font-medium text-neutral-600 dark:text-neutral-300">
8      <Typewriter
9        text="Building the future of UI..."
10        loop
11        speed={60}
12        pauseDuration={2000}
13      />
14    </p>
15  </div>
16)
17}

Custom Cursor and Speed$

Use cursorChar to change the cursor character and speed to control typing pace.

_

TSX

1"use client"
2import { Typewriter } from "@glinui/ui"
3
4export function TypewriterCustomDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <code className="text-lg font-mono text-accent">
8      <Typewriter
9        text="npm install @glinui/ui"
10        speed={30}
11        cursorChar="_"
12        delay={500}
13      />
14    </code>
15  </div>
16)
17}

No Cursor$

Set cursor={false} to hide the cursor entirely.

TSX

1"use client"
2import { Typewriter } from "@glinui/ui"
3
4export function TypewriterNoCursorDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <p className="text-2xl font-semibold">
8      <Typewriter text="Clean, no cursor." cursor={false} speed={40} />
9    </p>
10  </div>
11)
12}

Accessibility$

The component renders with aria-label set to the full text value so screen readers announce the complete text immediately.
The typed characters and cursor are both aria-hidden="true" to prevent partial reading.
No interactive elements are created by the typewriter itself.

Reduced Motion$

When prefers-reduced-motion: reduce is active, the full text is displayed immediately with no animation. The cursor remains visible but does not blink.

API Reference$

Prop	Type	Required	Default	Description
`cursor`	`boolean`	No	`true`	Show a blinking cursor. Default: true
`cursorChar`	`string`	No	`"\|"`	The cursor character. Default: "\|"
`delay`	`number`	No	`0`	Initial delay before typing starts, in ms. Default: 0
`deleteSpeed`	`number`	No	`30`	Milliseconds per character when deleting. Default: 30
`loop`	`boolean`	No	`false`	Loop the typing animation. Default: false
`onComplete`	`() => void`	No	`-`	Callback fired when a word finishes typing (fires per cycle).
`pauseDuration`	`number`	No	`1500`	Pause at end before deleting/retyping, in ms. Default: 1500
`speed`	`number`	No	`50`	Milliseconds per character when typing. Default: 50
`text`	`string`	No	`-`	The text to type out (single string mode).
`words`	`string[]`	No	`-`	Array of words/phrases to cycle through (multi-word mode).

Source$

TSX

1import { Typewriter } from "@glinui/ui"

packages/ui/src/components/typewriter.tsx

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/typewriter.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TypewriterProps

`TypewriterProps`

Prop	Type	Required	Default	Description
`cursor`	`boolean`	No	`true`	Show a blinking cursor. Default: true
`cursorChar`	`string`	No	`"\|"`	The cursor character. Default: "\|"
`delay`	`number`	No	`0`	Initial delay before typing starts, in ms. Default: 0
`deleteSpeed`	`number`	No	`30`	Milliseconds per character when deleting. Default: 30
`loop`	`boolean`	No	`false`	Loop the typing animation. Default: false
`onComplete`	`() => void`	No	`-`	Callback fired when a word finishes typing (fires per cycle).
`pauseDuration`	`number`	No	`1500`	Pause at end before deleting/retyping, in ms. Default: 1500
`speed`	`number`	No	`50`	Milliseconds per character when typing. Default: 50
`text`	`string`	No	`-`	The text to type out (single string mode).
`words`	`string[]`	No	`-`	Array of words/phrases to cycle through (multi-word mode).