Svelte 5 component · machines-ui · Animated

GraphTypewriter

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

Install

GraphTypewriter is a Svelte 5 animated ASCII typewriter component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

import

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

Example

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

Name	Type	Default
`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` Milliseconds per character. Default 55.	`55`
`holdMs`	`number` Milliseconds to hold the full text before restarting. Default 1400.	`1400`
`loop`	`boolean` Clear and retype after the hold. Default true.	`true`
`cursor`	`string` Cursor character shown after the last revealed character. Default '█'.	`'█'`
`animated`	`boolean` Animate the typing. Default true. Reduced motion shows the full text.	`true`
`corner`	`string` Character at each corner of the frame. Default '+'.	`—`
`class`	`string`	`''`