Vertical gradient bars shifting in waves
| 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 |
widthstring | numberContainer width
"100%"heightstring | numberContainer height
"100%"classNamestringAdditional CSS classes for styling
""childrenReactNodeContent rendered above the effect
undefinedbarCountnumberNumber of stripes (1–32)
8gradientPowernumberGradient curve exponent (0–1)
0.2balancenumberBlack/white balance (0–1)
0.15speednumberAnimation speed (0–2)
0.1phaseSpreadnumberPhase offset between stripes (0–16)
4mirrorRepeatnumberHorizontal mirror repetitions (1–8)
2alternateDirectionnumberAlternate direction on odd stripes (0–1)
0invertSpeednumberSpeed of direction inversion oscillation (0–2)
0.2phaseRangenumberPhase multiplier for animation range (1–16)
2curvePowernumberEasing curve power (1=linear, 2=quad, 3=cubic, etc.)
1easingModenumberEasing mode: 0=in, 1=out, 2=in-out
0verticalbooleanUse vertical columns (true) or horizontal rows (false)
truecolorstringTint color in hex format
"#ffffff"backgroundColorstringBackground gradient color in hex format
"#000000"opacitynumberMaster opacity (0–1)
1cursorInteractionbooleanEnable cursor interaction to shift the phase offset
false