Svelte 5 component · machines-ui · Animated

GraphFlowPlayer

Plays through an ordered list of process steps, typing on the active step's label and revealing its detail while the finished steps stay marked.

All components Source

Install

GraphFlowPlayer is a Svelte 5 animated ASCII flow player 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 { GraphFlowPlayer } from '@fractaldesign/machines-ui';

Usage

Example

<GraphFlowPlayer
  title="PIPELINE"
  autoPlay
  speedMs={1400}
  steps={[
    { label: 'scaffold the parser', detail: 'reads the grammar file' },
    { label: 'emit tokens', detail: 'one pass, no backtracking' },
    { label: 'render frames' },
    { label: 'publish' }
  ]}
/>

Props

Name	Type	Default
`title`	`string` Caption drawn on the frame's top edge as `[ TITLE ]`.	`—`
`steps`	`FlowStep[]` Steps in playback order.	`—`
`autoPlay`	`boolean` Start playing on mount. Default false. Never autoplays under reduced motion.	`false`
`speedMs`	`number` Milliseconds per step. Default 1600.	`1600`
`showControls`	`boolean` Show the playback controls. Default true.	`true`
`animated`	`boolean` Animate transitions and the active marker pulse. Default true.	`true`
`corner`	`string` Character at each corner of the frame. Default '+'.	`—`
`frame`	`FrameOptions` Anything the frame itself takes — dash, motion, speed, easing, pad, pauseOnHover, cornerBlink, ink, accent. Forwarded straight to `Frame`, so the frame's whole vocabulary is reachable without this component having to restate every prop.	`—`
`class`	`string`	`""`

GraphGanga Three stepped river lines cascading down the frame while a lit diya rides the bottom flow; purely decorative.GraphHash A character-art hashing animation that transforms an input string into a changing digest.GraphJapa A mala (prayer-bead ring) drawn in ASCII, with a marker travelling bead by bead around the circle.GraphLife Conway's Game of Life in block glyphs, framed. Alive is accent, the dead leave a faint trail.GraphMandala A lotus mandala drawn in terminal glyphs, blooming outward ring by ring and then slowly rotating.GraphMandel ASCII Mandelbrot with a slow cinematic zoom into seahorse valley.

Install

Import

Usage

Props

Related components