Typo Typewriter

Uneven rhythm, the odd wrong key next to the right one, a beat to notice, a backspace and the fix. For hero lines, chat intros and onboarding copy that should feel human.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add typo-typewriter

Usage

Example

import { TypoTypewriter } from "@/components/galactrex/typo-typewriter";

<TypoTypewriter text={["Ship faster.", "Ship calmer."]} loop />

Source

Installs to components/galactrex/typo-typewriter.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

See plans

Props

Prop	Type	Default	Description
`text`	`string \| string[]`	—	One line, or several in turn.
`as`	`ElementType`	`"span"`	Element to render.
`typoRate`	`number`	`0.08`	Chance of a slip per letter, 0 to 0.3.
`speed`	`number`	`14`	Average characters per second.
`loop`	`boolean`	`false`	Erase and start again after the last line.
`hold`	`number`	`1600`	Ms a finished line stays.
`seed`	`number`	`7`	Same seed, same typos.
`className`	`string`	—	Extra classes for the outer element.

Variants

Hero. One line that types on arrival.
Rotating. Several lines with `loop`.

Accessibility

The intended text is read once; the typing and its slips are aria-hidden.

Motion and reduced motion

Writes text only, no layout animation.
Reduced motion: the final line shows at once.