Components
Loading preview...
Here is Waveform component
@ElevenLabs
npx shadcn@latest add https://21st.dev/r/ElevenLabs/waveform"use client"
import { ScrollingWaveform } from "@/components/ui/waveform"
export default function WaveformDemo() {
return (
<div className="bg-card w-full max-w-3xl mx-auto rounded-lg border p-6">
<div className="mb-4">
<h3 className="text-lg font-semibold">Waveform</h3>
<p className="text-muted-foreground text-sm">
Real-time audio visualization with smooth scrolling animation
</p>
</div>
<div className="w-full">
<ScrollingWaveform
height={100} // фиксированная высота
barWidth={3}
barGap={2}
speed={30}
fadeEdges={true}
barColor="gray"
/>
</div>
</div>
)
}