When a component or visual element isn't quite right, I make my own.
As I was dialing in a retro-futuristic space vibe on the portfolio, I knew I wanted some of my music in there. The default/readily available React audio player component definitely wasn’t going to do it though.
So I had my agents go search for compatible waveform components with the right knobs. Ones that could play and pause music, react to the audio playing through them, and have editable effects. I wasn’t sure yet what I’d land on, but I had some direction. Nothing that was out there quite cut it.
Nowadays when I hit a moment like that, I tend to make a playground tool to find my way to the notion of the design I want. I figured I might want some of those effects (the glitch, the liquid distortion thing, etc.) in other places too on the site. AND, I figured other folks might find typical audio waveforms a little boring.
So I made the playground version. It lives freely on the internet now, and anyone can dial in the settings they want, then export the spec to their agents to have it built to those values.
State-first, then variants, then effects.
The component has two visual lives (muted and active) and the studio respects that. You pick which state you’re editing at the top, change anything, then flip to the other and tune that one. Split preview locks them next to each other so you can match the energy across the handoff. Five presets (Default, Pulse, Cyber, Retro, Minimal) get you 80% of the way to most looks in one click.
Configure muted and active states as separate panels. Muted variants are waveform, dots, fade, collapse, and pulse. Active variants are wave, bounce, and pulse. A slash overlay sits on top of any muted variant with its own thickness, angle, and glow. Each side has its own animation intensity and audio responsiveness, so a quiet idle can sit next to a loud reactive state without one bleeding into the other.
A global effects layer adds glitch, static, scanlines, chromatic aberration, or distortion on top of any variant. Each effect has its own intensity controls (displacement, color shift, density, speed). Reactivity runs on the Web Audio API against an HTML audio element you upload, or a simulated mode if you want the animation without a source. Bass dampening and frequency scaling (linear or logarithmic) tune how the bars read against music.
The code drawer outputs a JSX block with only the props that differ from the component defaults. No noise, no every-prop-listed boilerplate. Copy the snippet, drop it next to your AudioWaveformButton import, pass an audioRef, done. The component itself is a single file you can lift into any React project.
Live in your browser, no install.
The studio lives at waveform-studio.zantos.co. Open it, configure muted and active states, layer effects on top, hit a preset if you want a head start. When the bars look the way you want, the code drawer at the bottom has the JSX spec with only the props you changed.
Open the studio