BarsWave

Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer.

Bars Animation,
Background.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/barswave.json

Usage

import { BarsWave } from "@/components/ui/barswave";
<BarsWave
      barCount={14}
      minHeight={20}
      maxHeight={80}
      variant="filled"
      animationDuration={2}
      className="w-full h-[350px]"
    >
      <h2 className="bg-clip-text text-transparent text-center bg-gradient-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>

Examples

Filled Variant

Bars Animation,
Background.

API Reference

BarsWave

Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer.

Props

PropertyTypeDefaultDescription
barCountnumber15
Controls the total number of animated bars rendered across the background.
minHeightnumber15
Sets the minimum height percentage each bar can animate to.
maxHeightnumber85
Defines the maximum height percentage bars can reach during animation.
fillColorstring—
Custom fill color applied when using the filled variant.
borderColorstring—
Overrides the border color when using the outlined variant.
barOpacitynumber1
Adjusts the transparency of the animated bars for subtle blending.
animationDurationnumber3
Base duration (in seconds) of the bar height animation cycle.
variant"filled" | "outlined""outlined"
Switches between filled bars or outlined bars for different styles.
classNamestring—
Custom classes applied to the outer container.
childrenReact.ReactNode—
Content rendered above the animated bars, ideal for hero sections.

Built withby Ahdeetai.