Oscilloscope
oscilloscopeVisualizersFeed it an analyser or a data callback and it draws the current frame at animation rate. Columns are plotted as min/max pairs so transients survive the downsample instead of being skipped over, and the zero-crossing trigger stops a steady tone from sliding across the display.
Synthetic signal for display only — this demo produces no audio.
Install
Copies the source into your project. Anything it depends on comes with it.
$ npx shadcn add @syntho-ui/oscilloscopePulls in
use-audio-sourcecontrol-theme
First time? Add the registry to your components.json once:
{
"registries": {
"@syntho-ui": "https://engine.syntho.app/r/{name}.json"
}
}Usage
Controlled or uncontrolled, whichever suits the surrounding state.
import { Oscilloscope } from "@/components/ui/oscilloscope"
<Oscilloscope analyser={analyserNode} height={140} trigger />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| analyser | AnalyserNode | — | A live analyser to read time-domain data from. |
| getData | (target: Float32Array) => boolean | void | — | Supply samples yourself instead of using an analyser. |
| trigger | boolean | true | Align each frame to a rising zero crossing so a steady tone stands still instead of sliding. |
| gain | number | 1 | Vertical zoom. 1 means a full-scale signal fills the display. |
| lineWidth | number | 1.5 | Trace thickness in CSS pixels. |
| color | string | — | Trace colour. Defaults to the --uikit-accent token. |
| showGrid | boolean | true | Draw the centre line and vertical divisions. |
| height | number | 140 | Display height in pixels; width defaults to 100%. |
| paused | boolean | false | Stop the animation loop and hold the last frame. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.