Electric Bar Visualizer
Frequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/electric-bar-visualizer.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/electric-bar-visualizer.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/electric-bar-visualizer.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/electric-bar-visualizer.jsonUsage
<script lang="ts">
import { ElectricBarVisualizer } from "#lib/components/ui/electric-bar-visualizer/index.js";
</script>
<ElectricBarVisualizer
aria-label="Voice activity"
class="h-24 text-primary"
source={analyser.visual}
/>It takes the same data and props as the bar visualizer, so you can swap one for the other. The electric look comes from the shape and the motion, not from a fixed colour: the bars follow the text colour, so they turn with your theme. In dark mode the core runs white-hot.
The visualizer fills its container, so size it with classes. It paints on the animation frame without going through Svelte state, redraws on resize and picks up theme changes on its own.
Examples
Colors
Set the text color, or --electric, to any theme color.
Intensity, arcs and sparks
intensity sets how jagged and restless the filaments are. arcs jump between loud neighbouring bars and sparks fly off the tips when a level rises quickly.
Idle and loading
idle decides what bars do without a signal. loading runs an arc along the bars, for connecting or thinking states.
Mirrored
Microphone
Theming
| Variable or attribute | Meaning |
|---|---|
--electric | Filament color, default currentColor |
--electric-core | Core and tip color, default --electric mixed toward white by --electric-heat |
--electric-heat | How white-hot the core runs, default 0% in light mode and 70% in dark mode |
--electric-glow | Glow color, default --electric |
--electric-glow-size | Glow blur, default 0.5rem |
data-active | The signal is above the floor |
data-loading | The loading arc is running |
data-align | Where bars grow from |
The variables can be set from a class, such as [--electric-heat:40%], or globally.
Accessibility
The root has role="img" and the label "Audio visualizer". Pass aria-label to describe what it shows, or aria-hidden when it is decorative next to a labelled meter.
The flicker changes brightness by at most 12%, only on thin strokes, and each jagged shape holds for at least 40 ms, so nothing flashes across a large area. With reduced motion the bars are straight and still, with no arcs, sparks or flicker, and redraw four times a second.
API reference
| Prop | Type | Default |
|---|---|---|
source Bars follow the frame's frequency bands. | FrameSource<VisualFrame> | null | — |
levels Levels, 0..1, for declarative use. | ArrayLike<number> | — |
barCount Bands are resampled to fit. | number | 16 |
align Where bars grow from. | "center" | "start" | "end" | "center" |
mirrored Symmetric around the middle bar, lows in the centre. | boolean | false |
minLevel Resting bar size, 0..1. | number | 0.08 |
idle What bars do without a signal. | "static" | "pulse" | "wave" | "static" |
loading Run an arc along the bars. | boolean | false |
intensity How jagged and restless the filaments are, 0..1. | number | 0.6 |
arcs Arcs jump between loud neighbouring bars. | boolean | true |
sparks Sparks fly off the tips on sudden rises. | boolean | true |
barWidth Widest bar, in pixels. | number | 6 |
barGap Pixels. | number | 4 |
orientation vertical grows bars sideways. | "horizontal" | "vertical" | "horizontal" |
Exported functions
Bind the component with bind:this to call them. Their type is ElectricBarVisualizerActions.
| Prop | Type | Default |
|---|---|---|
paint Paint levels, 0..1, directly. They are resampled to the bar count. | (levels: ArrayLike<number>) => void | — |