Audio Reactive
Audio-reactive accordion with animated waveform bars and a progress track — like a music player built into an FAQ.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | AccordionItem[] | [{id, label, content}, ...] | Array of items — each gets a waveform visualizer and progress bar when active. |
| itemBgColor | string | "#18181b" | Background color of inactive rows. |
| activeBarColor | string | "#4ade80" | Color of the animated waveform bars on the active item. |
| progressBarFillColor | string | "#4ade80" | Fill color of the progress bar shown in the expanded state. |
| defaultActive | number | null | null | Index of the initially active item. |
When to Use
Perfect for music platforms, podcast archives, or any context where the tracklist metaphor adds personality. Also works as a creative FAQ with strong brand voice.
Best Practices
Use monospace or technical labels (Track 01, Module A) to reinforce the audio player aesthetic. Pair with a dark background for maximum waveform contrast.
Why This Component Matters
Repurposing the music player interaction pattern for content disclosure is rare — it creates delight through the unexpected. Users remember interfaces that surprise them.
FAQ
QIs the waveform real audio data?
No — the bars animate with looping spring physics to simulate a waveform. For real audio, hook into the Web Audio API and map frequency data to the bar heights.
QCan I use it with actual audio files?
Yes — add an HTML audio element and control playback in the onClick handler. The visual layer is decoupled from audio logic.
QHow do I change the animation speed?
Adjust the duration value in the bar's transition (currently 0.5 + bar * 0.1). Higher = slower, lower = faster frantic bars.
Related Components
Liquid Stretch
Smooth liquid motion accordion with natural spring animations.
Split Screen
Split screen accordion with expanding image partitions — click a panel to reveal its content.
FAQ Dark
Dark-themed card FAQ with accent-colored border glow on the active item and a 'View more' inline link.