Oscilloscope
oscilloscopeVisualizersTime-domain waveform trace.
$ pnpm dlx shadcn@latest add @pluginui/core-oscilloscopeLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
use-audio-sourcecontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-oscilloscope.jsonUsage
Connect the documented props to your application or host.
import { Oscilloscope } from "@/components/ui/oscilloscope"
<Oscilloscope analyser={analyserNode} height={140} trigger />About Oscilloscope
Feed 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.
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.