Waveform

Component 94

About

Here is Waveform component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Waveform to your project and fits it to your theme.

Code

How Waveform is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { ScrollingWaveform } from "@/components/ui/waveform";

const settings = {
  height: 100,
  barWidth: 3,
  barGap: 2,
  speed: 30,
  fadeEdges: true,
};

export default function WaveformDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  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={s.height} // фиксированная высота
          barWidth={s.barWidth}
          barGap={s.barGap}
          speed={s.speed}
          fadeEdges={s.fadeEdges}
          barColor="gray"
        />
      </div>
    </div>
  );
}