Svelte 5 component · machines-ui · Animated
GraphBoot
An animated boot/deploy run in ASCII: each step fills a progress bar, shows its ETA, and lands on a ✓ or ✗, with a summary row that totals the whole run.
Install
GraphBoot is a Svelte 5 animated ASCII boot 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 { GraphBoot } from '@fractaldesign/machines-ui';Usage
<GraphBoot
title="DEPLOY"
steps={[
{ label: 'compose up', eta: '~1.2s' },
{ label: 'migrate', eta: '~0.6s' },
{ label: 'seed' },
{ label: 'healthcheck' }
]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
steps | GraphBootStep[] Ordered list of deploy/boot steps to show. | — |
speedMs | number Milliseconds per tick of the boot animation. Default 90. | 90 |
stepTicks | number Total ticks each step is "in progress" before flipping to ✓/✗. Default 14. | 14 |
seedNum | number Seed for any stochastic timing jitter per step. Default 5. | 5 |
animated | boolean Animate the boot. Default true. Reduced motion freezes a mid-run frame. | true |
label | string Short caption under the art. | 'from cold to live' |
class | string | '' |
Related components
GraphCron A live, character-based preview of a cron schedule, showing matching minute and calendar positions.GraphDamru A damru (hourglass drum) drawn in ASCII, pulsing in place through the eight beats of Adi tala.GraphDeps A dependency tree drawn with ASCII branch lines, cascading package by package and showing each name with its…GraphDiya A row of diyas that light one by one and then breathe, drawn as character-art candle flames over a dark…GraphFire A looping character-art fire animation with adjustable dimensions, cooling, and speed.GraphFlame A flame graph drawn in ASCII, cycling which leaf of the call tree is lit as the hot path.