Gradient Bars
Animated striped gradient bars
gradient-bars-tw
Customize
Bars
8
0.2
0.15
2
Animation
0.1
4
2
0
0.2
1
Color
1
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | "100%" | Container width |
| height | string | number | "100%" | Container height |
| className | string | "" | Additional CSS classes for styling |
| children | ReactNode | undefined | Content rendered above the effect |
| barCount | number | 8 | Number of stripes (1–32) |
| gradientPower | number | 0.2 | Gradient curve exponent (0–1) |
| balance | number | 0.15 | Black/white balance (0–1) |
| speed | number | 0.1 | Animation speed (0–2) |
| phaseSpread | number | 4 | Phase offset between stripes (0–16) |
| mirrorRepeat | number | 2 | Horizontal mirror repetitions (1–8) |
| alternateDirection | number | 0 | Alternate direction on odd stripes (0–1) |
| invertSpeed | number | 0.2 | Speed of direction inversion oscillation (0–2) |
| phaseRange | number | 2 | Phase multiplier for animation range (1–16) |
| curvePower | number | 1 | Easing curve power (1=linear, 2=quad, 3=cubic, etc.) |
| easingMode | number | 0 | Easing mode: 0=in, 1=out, 2=in-out |
| vertical | boolean | true | Use vertical columns (true) or horizontal rows (false) |
| color | string | "#ffffff" | Tint color in hex format |
| backgroundColor | string | "#000000" | Background gradient color in hex format |
| opacity | number | 1 | Master opacity (0–1) |
| cursorInteraction | boolean | false | Enable cursor interaction to shift the phase offset |