Scope
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
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphScope } from '@fractaldesign/machines-ui';Preview
Oscilloscope window of 44 columns over 20 samples, area mode
<GraphScope
title="RPM"
mode="area"
data={[12, 18, 31, 27, 44, 39, 52, 48, 61, 55, 40, 33, 25, 29, 37]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption on the frame's top edge. |
| data* | number[] | — | Series to scroll through. The window loops over it. |
| window | number | 44 | Visible columns. Default 44. |
| rows | number | 6 | Grid height in rows. Default 6. |
| speedMs | number | 160 | Milliseconds between ticks. Default 160. |
| mode | ScopeMode 'line''area' | 'line' | 'line' draws one block per column; 'area' fills down to the baseline. |
| animated | boolean | true | Animate the scroll. Default true. Reduced motion freezes the window. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- motion reveals on scroll into view
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| ScopeMode | type | How a column is painted: a single block, or a fill down to the baseline. 'line' | 'area' |
Theming
CSS custom properties this component reads.
- --graph-accent
- --text-primary
Related
Built from
src/lib/components/animated/GraphScope.svelte