Components
Wave Bars
An equaliser-style row of bars riding a travelling wave, animated entirely in CSS. Bar count, width, spacing, radius, height, colour and speed are all live knobs.
"use client"
import { WaveBars } from "@/components/ui/wave-bars"
const settings = {
barCount: 32,
barWidth: 6,
gap: 4,
radius: 4,
height: 120,
color: "#8b5cf6",
duration: 1.6,
paused: false,
}
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex h-screen w-full items-center justify-center bg-background">
<WaveBars {...s} />
</div>
)
}