Svelte 5 component · machines-ui · Animated
GraphScope
An oscilloscope window that scrolls a data series leftwards, drawing each column as a line or as an area filled down to the baseline.
Install
GraphScope is a Svelte 5 animated ASCII scope component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { GraphScope } from '@fractaldesign/machines-ui';Usage
<GraphScope
title="RPM"
mode="area"
data={[12, 18, 31, 27, 44, 39, 52, 48, 61, 55, 40, 33, 25, 29, 37]}
/>Props
| Name | Type | Default |
|---|---|---|
title | string Caption on the frame's top edge. | — |
data | number[] Series to scroll through. The window loops over it. | — |
window | number Visible columns. Default 44. | 44 |
rows | number Grid height in rows. Default 6. | 6 |
speedMs | number Milliseconds between ticks. Default 160. | 160 |
mode | ScopeMode 'line' draws one block per column; 'area' fills down to the baseline. | 'line' |
animated | boolean Animate the scroll. Default true. Reduced motion freezes the window. | true |
class | string | '' |
Related components
GraphSequence An animated sequence diagram: four participants (Browser, Server, DB, Worker) on lifelines, with request…GraphSpinners A framed text spinner with built-in or custom frames and an optional loading label.GraphState A four-state machine drawn in ASCII — ready, think, act, done — with the current state and its outgoing…GraphStream A live sparkline with the current value in large type, appending a new reading on an interval and counting…GraphSurya A sun wheel with breathing rays that rises from the horizon to its apex and sets again, forever; purely…GraphTerminal A terminal session that types prompt lines and streams output, with optional looping animation.