EqualizerBars

An audio equaliser along the bottom edge, each bar on its own beat.

Turn it up

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/equalizer-bars.json

React
import EqualizerBars from "@/components/fx/equalizer-bars"

<EqualizerBars className="px-8 py-24">
    <h2>Your content</h2>
</EqualizerBars>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Pauses offscreen; `paused` stops it on demand (wire it to a visible control if it runs behind reading content).
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) holds the bars at rest heights.

Prop	Type	Default	Description
bars	number	40	Number of bars.
colors	[string, string]	violet, cyan	Bottom-to-top gradient.
seed	number	14	Change for a different, stable beat.
paused	boolean	false	Stop the animation. It also pauses offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above.