Getting Started
Templates
Components
A visually striking hero background featuring animated vertical bars with a wave-like motion. The bars scale dynamically from the center outward, creating a symmetrical pulsing effect. Ideal for headers, landing pages, and attention-grabbing sections.
Key Features:
import { HeroBars } from "@/components/ui/hero-bars"
export default function Example() {
return (
<div className="h-screen bg-black">
<HeroBars
bars={24}
colors={["#8f0feb", "#3b82f6", "transparent"]}
intensity={0.8}
duration={2.5}
title="Welcome"
/>
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
bars | number | 20 | Number of vertical bars |
colors | string[] | ["#8f0feb", "transparent"] | Gradient colors (bottom to top) |
duration | number | 3 | Animation cycle duration in seconds |
intensity | number | 0.7 | Wave amplitude (0-1) |
staggerDelay | number | 0.05 | Delay between adjacent bars (seconds) |
active | boolean | true | Enable/disable animation |
title | string | undefined | Optional centered title text |
titleClassName | string | undefined | Custom classes for title |
className | string | undefined | Additional CSS classes |
The wave effect is created by:
The intensity prop controls how much height variation occurs during the wave.
The colors array defines a CSS linear gradient from bottom to top:
// Single color fading to transparent
colors={["#8f0feb", "transparent"]}
// Multi-color gradient
colors={["#ec4899", "#8b5cf6", "#3b82f6", "transparent"]}
// Solid color (no fade)
colors={["#22c55e", "#22c55e"]}When a title is provided, it renders centered over the bars:
<HeroBars
title="ACME"
titleClassName="text-white mix-blend-difference"
/>The title animates in with a scale and fade effect.
repeat: Infinity for seamless loops