Components/Backgrounds
Animated Bars
A dynamic background component with pulsating, gradient bars that create a fluid energy effect.
backgroundgradientbars
Preview
Installation
npx shadcn@latest add @grootstudio/animated-barsUsage
1
Import the component
2
Use like this
Digital Rhythm
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| numBars | number | 12 | The number of animated bars to render. | |
| gradientFrom | string | rgb(255, 60, 0) | The starting color of the bar gradient. | |
| gradientTo | string | transparent | The ending color of the bar gradient. | |
| animationDuration | number | 4 | Duration of the pulse animation in seconds. | |
| backgroundColor | string | - | The background color of the container. If not provided, uses the theme's background. |