GraphFlowPlayer

One entry per step — not per rendered line, so each is its own box.

Import

svelte
import { GraphFlowPlayer } from 'markgraphy';

Basic usage

svelte
<GraphFlowPlayer
  title="example"
  autoPlay={false}
/>

Props

PropTypeDefaultDescription
titlestring—Caption drawn on the frame’s top edge as [ TITLE ].
stepsFlowStep[]—Steps in playback order.
autoPlay?booleanfalseStart playing on mount. Default false. Never autoplays under reduced motion.
speedMs?number1600Milliseconds per step. Default 1600.
showControls?booleantrueShow the playback controls. Default true.
animated?booleantrueAnimate transitions and the active marker pulse. Default true.
corner?string—Character at each corner of the frame. Default ’+‘.
frame?FrameProps—Anything the frame itself takes — dash, motion, speed, easing, pad,

pauseOnHover, cornerBlink, ink, accent. Forwarded straight to Graph, so the frame’s whole vocabulary is reachable without this component having to restate every prop. / | | class? | string | "" | — |

Exported types

  • FrameProps
  • FlowStep
  • GraphFlowPlayerProps

Reduced motion

Animation is disabled under prefers-reduced-motion.