React player

import { Flow, type FlowProps } from 'flowfig';
import spec from './first.json';

export const LoadUser = () => <Flow {...(spec as FlowProps)} />;

The player has these controls:

• One tab for each step, with a progress line. A click on a tab starts that step.
• A pause button, and a speed button that changes between 1× and 2×.
• A full screen button. Esc closes full screen.
• A hover on a box highlights its edges. With the rail, a click on a row starts that message, and a hover highlights its edge.
• A hover on a box, an edge or a rail row with a source shows the source. The SVG shows it as a tooltip too.

The player props are the spec fields. theme sets the colors, speed sets the packet time, and autoplay={false} stops the auto start. check runs the check rules. If a figure is wider than its container, the player shrinks the figure to half size at most, then scrolls. If the reader asks for reduced motion, the player shows the last beat and does not move packets.

The player has no dark theme of its own. For dark mode, set the --fig-* CSS variables on .flowfig:

@media (prefers-color-scheme: dark) {
  .flowfig {
    --fig-accent: #1f78c8;
    --fig-fg: #e3e3e3;
    --fig-muted: #9aa0a6;
    --fig-bg: #1b1b1d;
    --fig-surface: #242526;
    --fig-border: #3a3b3c;
  }
}

These are the built-in dark colors. flowfig exports them as DARK, and the light colors as LIGHT.