Bar Flow

dynamic bar-based component animation

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

dynamic bar-based component animation