Spectrum Monitor

Turn continuously changing band intensities into an instrument panel: the top shows the current frame as spectrum bars, each with a slowly falling peak-hold mark; below is a waterfall where every frame adds a new row of pixels at the top and the whole image scrolls down, colored by intensity, so you can tell at a glance which band is always ringing and which comes and goes. It suits vibration monitoring, audio analysis, network traffic or any live "band × time" data. Two canvases are drawn frame by frame and stop automatically when off screen or when the tab is hidden, so nothing spins in the background.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SpectrumMonitor/>

    </div>
  );
}

Installation

Usage

import { SpectrumMonitor } from "@/components/ui/spectrum-monitor";

// Without a data source, the built-in deterministic generator is used
<SpectrumMonitor title="Spectrum monitor" bins={64} minHz={20} maxHz={20000} />;

// Your own data: return an array of bins values in 0–1
<SpectrumMonitor
  title="Sensor A3"
  bins={96}
  minHz={10}
  maxHz={5000}
  source={(t, bins) => readLatestBands(bins)}
  onPausedChange={(paused) => console.log(paused ? "paused" : "resumed")}
/>;

Props

Also exports getSpectrumBinHz(i, bins, minHz, maxHz, logScale) (the center frequency of band i, handy for aligning a custom source to frequencies) and the SpectrumMonitorProps and SpectrumMonitorSurface types.

CSS variables

How it works

• Two canvases: the spectrum canvas is resized to the container times min(devicePixelRatio, 2) (ResizeObserver); the waterfall canvas resolution is the data resolution (bins × history), which the browser smooths up into a heat band
• The waterfall never redraws in full: each new frame first shifts the canvas down one row onto itself with drawImage, then paints only the newest row; the color ramp is precomputed into a 256-color lookup table
• Throttling: each rAF tick accumulates elapsed time and produces a frame only once 1 / fps seconds have passed; a single tick is capped at 0.25 seconds when you return to the tab, so it never catches up too many frames at once
• Peak hold: the white mark on each bar takes the larger of the current value and the previous peak × 0.96, so it falls slowly
• Readouts: hovering the spectrum or waterfall shows a crosshair and a readout card — frequency, level (dB via 20·log10, plus percent) and how many seconds ago that row was; while paused the image is frozen but readouts still work
• Auto stop: rAF is cancelled when IntersectionObserver reports the plot off screen or visibilitychange reports the tab hidden; unmounting cancels rAF and disconnects every observer
• Initial snapshot: history frames are pre-run on mount, so the waterfall starts full and hover has data right away

Accessibility

• The plot is role="img" with an aria-label describing the title, band count and frequency range; both canvases are aria-hidden
• A sr-only aria-live="polite" region updates every 5 seconds with the current peak, such as "目前峰值 1.2 kHz，-12 dB" (Current peak 1.2 kHz, -12 dB), and stops while paused
• The pause button is type="button" with aria-pressed; the plot is focusable with Tab (focus-visible ring), Space toggles pause while focus is inside the component, and clicking the plot also pauses or resumes
• When the user has reduce motion enabled, nothing autoplays: a static snapshot of history pre-run frames is drawn and the LIVE light does not breathe; playback starts only after pressing play, at no more than 10 fps