Oscilloscope
A green-phosphor scope with real knobs, persistence trails and Lissajous XY mode.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
Drag or scroll the knobs to change frequency and amplitude, switch sine / square / saw / XY. The beam leaves a fading phosphor trail over a graticule.
Installation
$ npx shadcn@latest add https://guetix.com/r/oscilloscope.json
Uses the shadcn CLI. It creates components/guetix/oscilloscope.tsx and installs nothing else.
Usage
example.tsx
import { Oscilloscope } from "@/components/guetix/oscilloscope";
export default function Example() {
return <Oscilloscope />;
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#5cff9d" | Trace color. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Knobs are role=slider (arrows, wheel, drag); waveform buttons use aria-pressed.