∞ forever components

Audio Visualizers

Spectrum Bars

56 mirrored chartreuse-gold frequency bars animate with gravity peak-hold caps on a dark canvas; a "live" button switches from synth simulation to real mic input.

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 apps, audio player UIs, demo pages, or any dark-theme hero needing ambient audio-reactive motion.

When not to

Light-background layouts (background hardcoded near-black). Contexts where microphone permission prompts would confuse users.

Working with an AI agent

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

Change bar count to 40 by setting N=40, shift the gradient palette to teal-amber by replacing '#C0B459' with '#9AA187' and '#A9D22D' with '#22AEC3', and slow synth LFO by reducing sp[i] range from (.6+Math.random()*2.2) to (.3+Math.random()*1.0).

Safe to edit

  • bar count (N=56)
  • gradient colors ('#C0B459', '#A9D22D')
  • synth oscillator speed (sp[i] = .6+random*2.2)
  • peak gravity (pvel[i] += 2.4*dt)
  • spectral tilt exponent (1.35)
  • max bar height (maxH = H*.46)

Keep intact

  • IIFE wrapper
  • prefers-reduced-motion guard (reduce check)
  • visibilitychange pause/resume
  • AudioContext never connected to destination (no feedback loop)
  • 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

  • Background color hardcoded to #131B12 — must edit CSS to change
  • Live mic mode requires HTTPS or localhost for getUserMedia
  • 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.

audiospectrumbarscanvasmirroredpeak-holdmicrophone

More Audio Visualizers components

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