The standout feature: switch motion to Microphone and the visualizer responds to live audio from any connected mic. Powered by the Web Audio API with a 512-bin FFT and log-frequency mapping (so bass doesn't crowd the left side), it delivers a genuine studio-grade spectrum-analyser look that pulses with whatever your visitors play, say, or sing.
Perfect for music portfolios, podcast sites, DJ pages, event landing pages, AI voice products, or any interactive moment that benefits from "the page is listening."
Mic Gain — boost quiet inputs or tame loud ones
Mic Smooth — choose between snappy and twitchy or creamy and fluid
Clean permission handling with on-screen status messages
Automatically releases the mic when you switch modes — no lingering recording indicators
Random — classic spectrum-analyser flicker, fully seeded for reproducibility
Wave — smooth sine motion sweeping across the bars
Beat — rhythmic pulse driven by a tempo, great for music sections
Smooth — slow, organic shifts for ambient backgrounds
Microphone — live audio reactivity (see above)
Classic (the green-yellow-red VU look), Cool, Warm, Sunset, Ocean, Mono Green, Mono White — or pick your own Low / Mid / High colors with the Custom option. A separate Segment Background color lets you control the look of unlit segments, paired with a Dim opacity slider for the perfect resting state.
Standard — bars rise from the bottom
Top-down — bars hang from the top
Center-out — bars extend symmetrically from a middle line
Rectangle, Rounded, Pill, Circle, or Diamond — instantly transform the visual character of the component without touching code.
Real spectrum analysers don't show flat noise — they follow a frequency envelope. Choose from Flat, Natural, Bass Heavy, Treble Heavy, Mid Peak, or Smile, with a Curve Amount slider to dial intensity. Combined with reactivity and bias controls, you can craft motion that genuinely looks like music.
Bars (4–80), Segments per bar (3–40)
Bar width, bar gap, segment gap — pixel-perfect spacing
Peak indicators with adjustable fall speed
Speed multiplier for any motion mode
Seeded randomisation — set a Seed value to lock the exact same animation pattern every load
Reactivity & Bias controls for fine-tuning the "feel" of random motion
Zero padding by default — aligns flush to your layout
Lightweight, no external dependencies
Works in any Framer site
Responsive — fills any frame size
Smooth 60fps animation using requestAnimationFrame
Mic mode requires Preview or published site (browser security)
Music & DJ portfolios · Podcast landing pages · AI voice assistant interfaces · Event websites · Concert promo · Spotify-style designs · Hero section accents · Loading screens · Brand activations · Interactive press kits
One component. Endless looks. Real audio reactivity.
Andrew Norman
