∞ forever components

Audio Visualizers

Radial Spectrum

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

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

Music or audio-themed hero backgrounds, podcast or live-audio UIs, ambient ambient screensavers needing synthetic motion with optional real microphone data.

When not to

Contexts where microphone permission prompts are intrusive or where CPU budget is tight on mobile — the 96-bar rAF loop runs every frame.

Working with an AI agent

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

Change accent color from cyan to violet by replacing ACC='#22d3ee' and all rgba(34,211,238,...) literals with rgba(167,139,250,...), and increase bar count to 128 by setting N=128.

Safe to edit

  • bar count (N=96)
  • accent color (ACC='#22d3ee')
  • ring radius fraction (R=Math.min(w,h)*0.22)
  • bar smoothing speed (0.22 synth / 0.5 live)
  • max bar length (maxLen=R*1.55)
  • synth peak positions (p1, p2, p3)

Keep intact

  • DPR-aware canvas sizing and setTransform
  • visibilitychange stop/start guard
  • prefers-reduced-motion static-frame fallback
  • IIFE wrapper

Known limitations

  • Microphone access requires HTTPS in production — works on localhost but fails on plain HTTP
  • Background color hardcoded to #07080d in CSS — must edit to change
  • No reduced-motion animation — only renders one static frame, no interactive fallback

audioradialspectrumcanvasmicrophonebarsvisualizer

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…
  • 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.
  • Beat BloomCyan concentric rings bloom outward and particles burst radially on detected bass beats from a synth signal; a breathing center dot pulses continuously.