---
title: "Bar Flow — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Edi Priatama · Backgrounds. dynamic bar-based component animation"
canonical: "https://framer.elliotli.dev/component/bar-flow"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Bar Flow

# Bar Flow

bar background effect

[View on Framer](https://framer.com/marketplace/components/bar-flow/?via=elliot-li)

![Bar Flow preview image 1](https://framer.elliotli.dev/og/component/bar-flow/bb3570243e5dc80e/1600x1200.jpg)

## Summary

dynamic bar-based component animation

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4170

## Details

- **Author**: Edi Priatama
- **Price**: $3.00
- **Published**: 2026-05-04
- **Updated**: 2026-11-01
- **Added**: 2026-05-04
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background