audiocnElectric Waveform
One electric line across the width, with a crackling white-hot core, a tall glow, forks off the peaks and sparks.
Installation
$ pnpm dlx shadcn@latest add @audiocn/electric-waveformUsage
import { ElectricWaveform } from "@/components/ui/electric-waveform";<ElectricWaveform
aria-label="Voice activity"
className="text-primary h-32"
source={analyser.visual}
/>The line follows the text colour, so it changes with your theme, and in dark mode its core runs white-hot. It shares its look and variables with the electric bar visualizer.
The waveform fills its container, so size it with classes. It paints on the animation frame without re-rendering React, redraws on resize and picks up theme changes on its own.
Examples
Wave and scope
wave draws a smooth wave shaped by the frequency bands, calm enough for a voice assistant. scope draws the signal itself, like an oscilloscope, and starts each frame on a rising zero crossing so steady tones stand still.
Intensity, arcs and sparks
intensity sets how jagged and restless the line is. arcs fork off the peaks and sparks fly when the level rises quickly.
Idle and loading
With no signal the line rests flat and hums. loading runs a pulse along it, for connecting or thinking states.
Microphone
Theming
| Variable or attribute | Meaning |
|---|---|
--electric | Line color, default currentColor |
--electric-core | Core 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-mode | wave or scope |
data-active | The signal is above the floor |
data-loading | The loading pulse is running |
Accessibility
The root has role="img" and the label "Audio waveform". 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% and each jagged shape holds for at least 40 ms, so nothing flashes. With reduced motion the line is smooth and still, with no crackle, forks or sparks, and redraws four times a second.
API reference
Prop
Type