BarsWave

Backgrounds 20

About

An animated background layer of vertical wave bars that pulse in mirrored symmetry, usable behind hero text or page sections.

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

Code

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

Usage.tsx

import { BarsWave } from "@/components/ui/barswave";

export default function Demo() {
  return (
    <div className="relative w-full h-screen bg-background flex items-center justify-center">
      <BarsWave
        barCount={14}
        minHeight={20}
        maxHeight={80}
        variant="filled"
        animationDuration={2}
        className="w-full h-full"
      >
        <h2 className="bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight">
          Bars Animation, <br /> Background.
        </h2>
      </BarsWave>
    </div>
  );
}