fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Animated

GraphTicker

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

All components Source

Install

GraphTicker is a Svelte 5 animated ASCII ticker component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

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

Usage

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

Props

NameTypeDefault
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 Milliseconds per rotation step. Default 140.140
animated boolean Animate the rotation. Default true. Reduced motion shows the first items.true
corner string Character at each corner of the frame. Default '+'.—
class string ''

Related components

GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them,…ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and…TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active…GraphAgni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed,…GraphAum An Aum (ॐ) figure drawn in terminal glyphs, inked in stroke by stroke and then rippled by a resonance wave…