machines-ui
animated

Typewriter

Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphTypewriter } from '@fractaldesign/machines-ui';

Preview

[ BOOT ]
█


<GraphTypewriter
  title="BOOT"
  speedMs={45}
  lines={['> boot machines-ui', '> mounting frames... ok', '> ready']}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
lines* string[] —Lines typed one character at a time, in order.
speedMs number 55Milliseconds per character. Default 55.
holdMs number 1400Milliseconds to hold the full text before restarting. Default 1400.
loop boolean trueClear and retype after the hold. Default true.
cursor string '█'Cursor character shown after the last revealed character. Default '█'.
animated boolean trueAnimate the typing. Default true. Reduced motion shows the full text.
corner string —Character at each corner of the frame. Default '+'.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphTypewriter.svelte

machines-ui