PlumUI

Typewriter

Types, pauses and deletes a rotating list of words with a natural rhythm and a blinking caret.

Motion

Build interfaces that feel
fast., alive., inevitable., yours.

Playground

Tweak the props, the preview and the code follow.

Make it fast, alive, inevitable, yours

Props
70
35
1600
import { Typewriter } from "@/components/ui/typewriter"

<Typewriter
  words={["fast","alive","inevitable","yours"]}
/>

Installation

npx @plumsydev/plum-ui add typewriter

Usage

import { Typewriter } from "@/components/ui/typewriter"
<Typewriter words={["fast.", "alive.", "yours."]} />

Examples

Terminal

A block caret and faster typing for command-line vibes.

zsh
❯ pnpm dlx plum-ui add dock, git commit -m "feat: add dock", pnpm dev --turbo

Animated placeholder

Suggestions type themselves until the user focuses the field.

API Reference

Typewriter

PropTypeDefault
words*

Words to cycle through.

string[]—
typeSpeed

Milliseconds per typed character (slightly randomized).

number70
deleteSpeed

Milliseconds per deleted character.

number35
pause

Milliseconds to hold a finished word.

number1600
loop

Start over after the last word.

booleantrue
cursor

Show the caret.

booleantrue
cursorClassName

Classes for the caret.

string—

Notes

  • The caret stays solid while typing and blinks while waiting, like a real text field.
  • Screen readers read the full list once; the typing itself is hidden.
  • With reduced motion, words crossfade instead of being typed.
PreviousTree