∞ forever components

Audio Visualizers

Lissajous Scope

Cyan 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.

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/music contexts, ambient hero backgrounds, creative portfolio pages needing a technical aesthetic.

When not to

Contexts where microphone permission prompts would surprise users; light-background layouts (background hardcoded dark navy).

Working with an AI agent

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

Change the beam color from cyan (#22d3ee) to green (#4ade80), increase N from 110 to 180 for a denser trace, and slow the phase precession by changing time*0.5 to time*0.25.

Safe to edit

  • beam color (rgba 34,211,238 references)
  • points per frame (N=110)
  • phase precession speed (time*0.5)
  • phosphor decay rate (0.13 in fillStyle)
  • amplitude envelope range (0.78+0.22)

Keep intact

  • offscreen trail canvas pattern (critical for phosphor effect)
  • IIFE wrapper
  • visibilitychange pause guard
  • reduced-motion static-frame fallback
  • AudioContext created inside click handler only

Known limitations

  • Live mic mode requires HTTPS and browser permission — silently shows 'n/a' on denial
  • Background color hardcoded in both CSS and canvas fill — must update both to change theme
  • Reduced-motion renders one static frame only, no fallback animation

lissajousoscilloscopecanvasaudiogenerativeambientphosphor

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.
  • OscilloscopeCyan phosphor-glow waveform sweeps across a faint scope grid with ghosting persistence trail; click to upgrade to live microphone input.
  • 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.
  • 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.