Bar Flow

dynamic bar-based component that creates a smooth, symmetrical waveform-style layout using vertical gradient bars. making it ideal for modern landing pages, hero sections, or creative UI elements.

Customization Options

Structure & Layout

• Bars (barCount) – Number of bars displayed (3–64)

• Gap – Spacing between bars

• Corner Radius – Rounded edges of each bar

Shape Control

• Side Height – Height of outer bars (%)

• Center Height – Height of center bars (%)

Colors

• Background Color – Container background

• Top Color – Gradient start color

• Bottom Color – Gradient end color

Animation (Optional)

• Animate – Enable/disable motion

• Speed – Controls animation speed

• Variation – Intensity of height fluctuation

• Seed – Randomization pattern for unique motion