OscilloscopePro
Audio drawn as a time trace or an XY figure, with phosphor persistence by alpha and no glow.
On this page
ProA voice-like signal over time or as an XY figure, with an optional microphone.
Installation
Usage
import { Oscilloscope } from "@/components/ui/chatcn/pro/oscilloscope"
<Oscilloscope analyser={analyserNode} mode="time" />Pass a Web Audio AnalyserNode from a microphone, a voice session or an audio element. In xy mode the second analyser drives the y axis; with one channel, y is the same signal a quarter period later, which draws the classic loops. Without an analyser a voice-like demo signal plays.
Examples
Persistence and modes
ProNo and long persistence, no graticule, XY in accent, and paused.
Props
| Prop | Type | Notes |
|---|---|---|
analyser, analyserY | AnalyserNode | null | Signal sources |
mode | "time" | "xy" | Default time |
persistence | number | 0 to 0.95: how long the trace lingers. Default 0.8 |
graticule | boolean | The 10 by 8 grid. Default true |
gain | number | Vertical gain. Default 1 |
ink | string | Trace color. Default var(--chatcn-fg) |
Accessibility
- The scope is an image named by
label. Pass an empty label when it is only decoration. - It loops past 5 s, so a pause control sits in its corner (WCAG 2.2.2): quiet until hover or focus, always shown on touch screens and while paused.
- Under
forced-colorsthe canvas gives way to a plain outline.
Motion
- Persistence paints the ground over the last frame at partial alpha, so old traces fade like phosphor. No blur, no glow.
- The loop runs from the shared frame clock only while the effect is on screen, the tab is visible and nothing paused it. Under reduced motion it draws one still frame.