machines-ui
animated

Ticker

A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.

Install

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

Preview

[ FLEET ]
[ OK ] api  ·  [ WARN ] db-lag 2.1s         
<GraphTicker
  title="FLEET"
  items={[
    { label: 'api', status: 'ok' },
    { label: 'db-lag 2.1s', status: 'warn' },
    { label: 'edge-eu', status: 'down' }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
items* TickerItem[] —Tokens rotated through the row, in order.
speedMs number 140Milliseconds per rotation step. Default 140.
animated boolean trueAnimate the rotation. Default true. Reduced motion shows the first items.
corner string —Character at each corner of the frame. Default '+'.
class string ''

API

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

Types

NameKindDescription
TickerIteminterfaceOne token of the marquee: a label plus its health status.
Seginterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/animated/GraphTicker.svelte

machines-ui