PixelTypewriter

Types out a string one character at a time with an optional blinking caret.

Configurable speed, delay, and blinking caret
Tone-aware text color via shared tone tokens
Animation trigger modes: mount, view, hover, click
Signals when the full text is typed: onComplete (React), @complete (Vue), (complete) (Angular)

Status: stable
Category: animations
Since: v1.6.0

API

import { PixelTypewriter } from '@pxlkit/ui-kit';

Prop	Type	Default	Description
`label`	`string`	—	Label (text) to type out. Canonical prop.
`text`	`string`	—	Deprecated. Use `label` instead. Retained as alias for one minor.
`speed`	`number`	`60`	Milliseconds between each character. Default `60`.
`delay`	`number`	`0`	Delay before typing starts, in milliseconds. Default `0`.
`cursor`	`boolean`	`true`	Show a blinking caret while writing. Default `true`.
`tone`	`'green' \| 'cyan' \| 'gold' \| 'red' \| 'purple' \| 'pink' \| 'neutral' \| 'inherit'`	`'green'`	Tone token applied to the text color, in monospace; `'inherit'` keeps the font and colour of the text around it. Default `'green'`.
`trigger`	`'mount' \| 'hover' \| 'click' \| 'focus' \| 'inView' \| boolean`	`'mount'`	When the animation should play. Default `'mount'`.
`onComplete`	`() => void`	—	Fires once the full string is rendered.
`className`	`string`	—	Extra class names applied to the wrapping `<span>`.

ref points to <span>.

WCAG target: 2.1 AA

respects prefers-reduced-motion

Caret and the character-by-character animation are aria-hidden; the complete string is exposed to assistive tech from the first render via a visually hidden span. When the user prefers reduced motion, the typing animation is skipped: the full text renders immediately and the completion event fires once.

Usage

import { PixelTypewriter } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelTypewriter text="Hello, pxlkit." />;
}

Examples

Default

import { PixelTypewriter } from '@pxlkit/ui-kit';

export function Default() {
  return <PixelTypewriter text="Hello, pxlkit." />;
}

Fast (cyan)

import { PixelTypewriter } from '@pxlkit/ui-kit';

export function FastCyan() {
  return <PixelTypewriter text="Typing fast in cyan..." speed={30} tone="cyan" />;
}

No cursor

import { PixelTypewriter } from '@pxlkit/ui-kit';

export function NoCursor() {
  return <PixelTypewriter text="No blinking caret here." cursor={false} tone="gold" />;
}

On view

import { PixelTypewriter } from '@pxlkit/ui-kit';

export function OnView() {
  return <PixelTypewriter text="Types when scrolled into view." trigger="inView" tone="purple" />;
}