∞ forever components

Audio Visualizers

Circular Wave

Glowing cyan ring ripples with a synthesized waveform; a tracer rides the loudest crest; center dot pulses. Click "live" to switch to 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 visualizer backgrounds, music players, synth demos, or ambient hero sections where motion should respond to sound.

When not to

Silent or text-heavy layouts where constant ring motion competes with content. Requires getUserMedia permission for live mode.

Working with an AI agent

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

Change accent to purple: set ACCENT='#a855f7' and update all rgba(34,211,238,...) literals to rgba(168,85,247,...), then increase N to 180 for smoother curves.

Safe to edit

  • accent color (ACCENT variable and rgba literals)
  • ring sample count (N=120)
  • base ring radius (base = min*0.30)
  • amplitude scale (amp = min*0.16)
  • rotation speed (t*.00018)

Keep intact

  • live audio src connects to analyser only, never to destination (prevents feedback)
  • IIFE wrapper
  • visibilitychange pause/resume
  • prefers-reduced-motion static fallback

Known limitations

  • Live mic requires getUserMedia permission — silently fails on http or denied contexts
  • Shadow blur on canvas can be slow on low-end GPUs at large viewports

audiocircularwaveformcanvasglowmicrophoneambient

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