∞ forever components

Audio Visualizers

Oscilloscope

Cyan phosphor-glow waveform sweeps across a faint scope grid with ghosting persistence trail; click to upgrade to live microphone input.

canvasmedium complexitymoderate motionclick

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Audio demos, music apps, dev tool aesthetics, or any dark-theme hero needing a retro CRT/scope visual. Doubles as a live mic visualizer.

When not to

Light-background UIs (background hardcoded dark navy). Contexts where microphone permission prompts would surprise users — remove the live button if not needed.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change accent color from cyan to green: set ACC='#4ade80' and update all rgba(34,211,238,...) references to rgba(74,222,128,...) in CSS and JS.

Safe to edit

  • accent color (ACC variable, #22d3ee)
  • grid divisions (cols=10, rows=6)
  • phosphor persistence (fillStyle alpha 0.30)
  • waveform amplitude scale (H*0.34)
  • ghost sweep opacity (trace call alpha 0.28)
  • noise grain amount (n1*0.05)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion still() fallback
  • visibilitychange pause/resume
  • live mic NEVER connecting to ctx.destination (feedback guard)

Known limitations

  • Background color hardcoded in both CSS and JS — must update both to change dark theme
  • Live mic button stays visible even in browsers without getUserMedia support
  • Reduced-motion mode renders a static frame but does not disable the live mic path

oscilloscopeaudiowaveformcanvasphosphorglowsynthesized

More Audio Visualizers components

  • Spectrum Bars56 mirrored chartreuse-gold frequency bars animate with gravity peak-hold caps on a dark canvas; a "live" button switches from synth simulation to real…
  • Radial Spectrum96 cyan radial bars radiate from a bass-driven pulsing core around a slowly rotating ring; driven by a synthetic signal or live mic input on click.
  • VU MeterCream analog VU meter with a spring-damped needle, dB scale, red peak zone, and peak-hold pip. Synth signal by default; click switches to live mic.
  • Lissajous ScopeCyan Lissajous figure drifts and rotates on a dark scope grid with phosphor trail decay and a glowing beam head; a Live button upgrades to real mic input.
  • Waveform RiverMirrored cyan waveform ribbon scrolls right-to-left on dark; glowing dot marks the live head. Click LIVE to switch from synthetic signal to microphone.
  • Beat BloomCyan concentric rings bloom outward and particles burst radially on detected bass beats from a synth signal; a breathing center dot pulses continuously.