Svelte 5 component · machines-ui · Animated
GraphPulse
A live health strip: a window of blips — ok, degraded, or down — appended at a fixed interval, newest on the right, like a heartbeat of a service.
Install
GraphPulse is a Svelte 5 animated ASCII pulse 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 { GraphPulse } from '@fractaldesign/machines-ui';Usage
<GraphPulse title="API" length={60} intervalMs={900} />Props
| Name | Type | Default |
|---|---|---|
title | string Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words. | — |
animated | boolean Append a live blip every interval. Default true. Reduced motion freezes a pre-filled window. | true |
length | number Window size in blips, newest at the right. Default 60. | 60 |
intervalMs | number Milliseconds between appends. Default 1000. | 1000 |
okRate | number Chance an appended blip is ok; about 4% of the rest degrade, the rest go down. Default 0.94. | 0.94 |
feed | () => PulseStatus Replace the built-in generator with your own stream of statuses. | — |
seedNum | number Seed for the reproducible generator. Default 11. | 11 |
from | string Label at the left edge of the caption row. Default 'now'. | 'now' |
class | string | '' |
Related components
GraphRain A looping character-art rain animation with adjustable trails and dimensions.GraphScatter An ASCII scatter plot: x/y points mapped onto a grid, with optional accent points and a linear-trend strip.GraphScope An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area…GraphSequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request…GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…