Typewriter

Types phrases character by character, erases them and types the next, with a blinking caret.

Dependenciesmotion

$ npx shadcn@latest add @balick/hero-01, npx shadcn@latest add @balick/pricing-01

Installation#

pnpm dlx shadcn@latest add @balick/typewriter

Or pass the full URL: https://ui.balick.me/r/typewriter.json

Usage#

import { Typewriter } from "@/components/ui/typewriter"

export function Prompt() {
  return <Typewriter text={["Build a landing page", "Add a pricing table"]} />
}

Props#

PropTypeDefault
text

A phrase, or phrases typed one after the other. Required.

string | string[]—
speed

Time to type one character, in milliseconds.

number45
deleteSpeed

Time to erase one character, in milliseconds.

number25
pause

Time a finished phrase stays before it is erased, in milliseconds.

number1800
loop

Start over after the last phrase.

booleantrue
caret

Show a blinking caret.

booleantrue