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

canvasheavy complexitymoderate motionclickmobile-ready

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 →
1

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
  • First deliberate control stops synthetic attract data. Live microphone stream remains active until teardown; teardown stops tracks and closes audio context.
  • demo-v1 preview lifecycle: initialize demoEnabled from window.__foreverPreview and stop attract work on the window forever:interactive event; retain manual feedback, settling, cleanup and explicit sessions

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
  • Live input depends on browser microphone permission and sandbox capability; user feedback reports unavailable input.
  • Microphone acquisition is permission- and sandbox-dependent; mocked tests verify track/context teardown, not hardware access.
  • State remains local to each mounted instance; format/theme remount preserves takeover, not component values.

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.