Special Elements
Audio Reactive
Audio-reactive accordion with waveform visualization.
accordionaudioreactivewaveform
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | AccordionItem[] | [{id: '1', label: 'Track 01'}, ...] | Array of accordion items with id, label, and optional content. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
itemBgColor | string | #18181b | Background color of accordion items (hex, rgb, or hsl). |
itemHoverBgColor | string | #27272a | Background color of items on hover (hex, rgb, or hsl). |
itemTextColor | string | #ffffff | Text color of item labels (hex, rgb, or hsl). |
activeBarColor | string | #4ade80 | Color of active waveform bars (hex, rgb, or hsl). |
inactiveBarColor | string | #52525b | Color of inactive waveform bars (hex, rgb, or hsl). |
progressBarBgColor | string | #3f3f46 | Background color of progress bar (hex, rgb, or hsl). |
progressBarFillColor | string | #4ade80 | Fill color of progress bar (hex, rgb, or hsl). |
iconColor | string | #ffffff | Color of play/pause icons (hex, rgb, or hsl). |
defaultActive | number | null | null | Index of the initially active item (null for none). |