Gradient Bars

Animated striped gradient bars

gradient-bars-tw

Customize

Bar Count

Gradient Power

0.20

Balance

0.15

Mirror Repeat

Vertical

Speed

0.10

Phase Spread

4.0

Phase Range

Alternate Direction

0.0

Invert Speed

0.20

Curve Power

1.0

Tint Color

Background

Opacity

1.00

Cursor Interaction

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

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

barCountnumber

Number of stripes (1–32)

Default8

gradientPowernumber

Gradient curve exponent (0–1)

Default0.2

balancenumber

Black/white balance (0–1)

Default0.15

speednumber

Animation speed (0–2)

Default0.1

phaseSpreadnumber

Phase offset between stripes (0–16)

Default4

mirrorRepeatnumber

Horizontal mirror repetitions (1–8)

Default2

alternateDirectionnumber

Alternate direction on odd stripes (0–1)

Default0

invertSpeednumber

Speed of direction inversion oscillation (0–2)

Default0.2

phaseRangenumber

Phase multiplier for animation range (1–16)

Default2

curvePowernumber

Easing curve power (1=linear, 2=quad, 3=cubic, etc.)

Default1

easingModenumber

Easing mode: 0=in, 1=out, 2=in-out

Default0

verticalboolean

Use vertical columns (true) or horizontal rows (false)

Defaulttrue

colorstring

Tint color in hex format

Default"#ffffff"

backgroundColorstring

Background gradient color in hex format

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to shift the phase offset

Defaultfalse