FlowPlayer
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.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphFlowPlayer } from '@fractaldesign/machines-ui';Preview
<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
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption drawn on the frame's top edge as `[ TITLE ]`. |
| steps* | FlowStep[] | — | Steps in playback order. |
| autoPlay | boolean | false | Start playing on mount. Default false. Never autoplays under reduced motion. |
| speedMs | number | 1600 | Milliseconds per step. Default 1600. |
| showControls | boolean | true | Show the playback controls. Default true. |
| animated | boolean | true | Animate transitions and the active marker pulse. Default 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 | "" |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| FrameOptions | type | The frame's own props, minus the ones this component owns. Omit<FrameProps, "title" | "children" | "class"> |
| FlowStep | interface | One ordered step of a process. |
| Seg | interface | |
| Item | interface | One entry per step — not per rendered line, so each is its own box. |
Theming
CSS custom properties this component reads.
- --border
- --graph-accent
- --text-muted
- --text-primary
- --text-secondary
- --text-xl
Related
Built from
src/lib/components/animated/GraphFlowPlayer.svelte