machines-ui
animated

Pulse

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

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphPulse } from '@fractaldesign/machines-ui';

Preview

[ API ]

up slow down

97%

nowlast check 0s ago

97 percent uptime over 60 checks
<GraphPulse title="API" length={60} intervalMs={900} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
animated boolean trueAppend a live blip every interval. Default true. Reduced motion freezes a pre-filled window.
length number 60Window size in blips, newest at the right. Default 60.
intervalMs number 1000Milliseconds between appends. Default 1000.
okRate number 0.94Chance an appended blip is ok; about 4% of the rest degrade, the rest go down. Default 0.94.
feed () => PulseStatus —Replace the built-in generator with your own stream of statuses.
seedNum number 11Seed for the reproducible generator. Default 11.
from string 'now'Label at the left edge of the caption row. Default 'now'.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
PulseStatustypeHealth of one appended blip.
'ok' | 'degraded' | 'down'
Seginterface

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --text-muted
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/animated/GraphPulse.svelte

machines-ui