Svelte 5 component · machines-ui · Animated
GraphState
A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing transition highlighted.
Install
GraphState is a Svelte 5 animated ASCII state component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphState } from '@fractaldesign/machines-ui';Usage
<GraphState title="AGENT" />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Animate the state cycle. Default true. Reduced motion freezes on the start state. | true |
speedMs | number Milliseconds per state step. Default 700. | 700 |
label | string Short caption under the art; the chart itself is the message. | 'state machine, stepping through' |
class | string | '' |
Related components
GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them,…