Boot
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
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphBoot } from '@fractaldesign/machines-ui';Preview
from cold to live
<GraphBoot
title="DEPLOY"
steps={[
{ label: 'compose up', eta: '~1.2s' },
{ label: 'migrate', eta: '~0.6s' },
{ label: 'seed' },
{ label: 'healthcheck' }
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 | 90 | Milliseconds per tick of the boot animation. Default 90. |
| stepTicks | number | 14 | Total ticks each step is "in progress" before flipping to ✓/✗. Default 14. |
| seedNum | number | 5 | Seed for any stochastic timing jitter per step. Default 5. |
| animated | boolean | true | Animate the boot. Default true. Reduced motion freezes a mid-run frame. |
| label | string | 'from cold to live' | Short caption under the art. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| GraphBootStep | interface | |
| Seg | interface |
Theming
CSS custom properties this component reads.
- --graph-accent
- --graph-fail
- --text-muted
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphBoot.svelte