Oscilloscope Background for React

Oscilloscope turns its container into a bench scope, softly, behind your content: a beam sweeps across a 10 × 8 graticule drawing two channels, and the trace stays glowing on the phosphor behind it, fading over a few seconds, while the signal's three harmonics drift so each sweep is a little different. The screen fades toward its edges like a tube's. A small canvas draws only the beam's newest stretch each frame and dims the rest a step four times a second, so a frame costs a handful of short strokes; it runs only while it's on screen, and the graticule is plain CSS.

Use it for audio tools, synthesisers, test equipment, biomedical devices and anything that should look measured. For many channels scrolling past like a chart recorder, use Brainwaves; for soft ribbons of colour without the instrument, Wavy; for another instrument screen, with a sweeping beam, Sonar; for the same CRT look broken up, Glitch.

Installation

Usage

import { Oscilloscope } from "@/components/ui/oscilloscope";

<Oscilloscope className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Every signal, measured</h1>
</Oscilloscope>

Oscilloscope is a container: give it a size, put your content inside, and the scope sits behind it. The trace takes your theme's primary colour, so it's a plotter's ink line in light mode and a glowing trace in dark mode. For the whole page, pass className="fixed inset-0 -z-10".

Demos

Lissajous

mode="lissajous" swaps the channels for a 3:5 figure that the beam traces twice a sweep, turning slowly in the centre; amplitude={0.32} sizes it to the card. mode="both" draws one channel with the figure over it.

Amber

A screen that stays dark in both themes (className="dark bg-black") with traceColor set to amber, like vintage tube gear. The graticule takes the trace's colour too.

Accessibility

The scope is decoration: it's hidden from assistive tech and never takes the pointer, so your content is read and clicked as usual. With reduced motion it draws one still sweep, afterglow included, and never starts its loop. Nothing flashes: the beam moves smoothly and the phosphor fades slowly. The layer shows at 75% by default and fades toward the edges; the trace crosses whatever sits on top, so keep text in your foreground colour, and use intensity="subtle" or an amplitude of 0.2 or less behind body text.

FAQ

API Reference