BarsWave

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

Installation

npx shadcn@latest add @scrollxui/barswave

Usage

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

<BarsWave
  barCount={14}
  minHeight={20}
  maxHeight={80}
  variant='filled'
  animationDuration={2}
  className='w-full h-87.5'
>
  <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>

Examples

Filled Variant

API Reference

BarsWave

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

Props

Property	Type	Default	Description
`barCount`	number	`15`	Controls the total number of animated bars rendered across the background.
`minHeight`	number	`15`	Sets the minimum height percentage each bar can animate to.
`maxHeight`	number	`85`	Defines the maximum height percentage bars can reach during animation.
`fillColor`	string	`—`	Custom fill color applied when using the filled variant.
`borderColor`	string	`—`	Overrides the border color when using the outlined variant.
`barOpacity`	number	`1`	Adjusts the transparency of the animated bars for subtle blending.
`animationDuration`	number	`3`	Base duration (in seconds) of the bar height animation cycle.
`variant`	"filled" \| "outlined"	`"outlined"`	Switches between filled bars or outlined bars for different styles.
`className`	string	`—`	Custom classes applied to the outer container.
`children`	React.ReactNode	`—`	Content rendered above the animated bars, ideal for hero sections.