Shadow Bars

Animated shadow bar effect with depth

shadow-bars-tw

Customize

Columns

3

Speed

0.5

Invert ColumnsFuzz NoiseGrid Proximity Color

Base Color (Dark)

Base Color (Light)

Proximity Color (Dark)

Proximity Color (Light)

Noise Scale

0.4

Fuzz Intensity

0.5

Edge Sharpness

50

Noise Power

1.5

Color Bleed

1.0

Props

15

Name	Type	Default	Description
`columns`	number	`3`	Number of vertical columns
`invertColumns`	boolean	`false`	Invert column gradient
`fuzzNoise`	boolean	`true`	Enable granular fuzz noise
`gridProximityColor`	boolean	`false`	Enable color based on grid proximity
`baseColor`	[number, number, number]	`[0.7882, 0.2, 1]`	Base color for the noise [r, g, b] values 0-1
`baseColorLight`	[number, number, number]	`[0.6824, 0, 1]`	Light mode base color [r, g, b] values 0-1
`proximityColor`	[number, number, number]	`[1, 0, 0]`	Color applied near bar edges [r, g, b] values 0-1
`proximityColorLight`	[number, number, number]	`[0.8, 0.3, 0.3]`	Light mode proximity color [r, g, b] values 0-1
`speed`	number	`0.5`	Animation speed multiplier
`noiseScale`	number	`0.4`	Noise scale multiplier
`fuzzIntensity`	number	`0.5`	Fuzz noise intensity
`edgeSharpness`	number	`50`	Bar edge sharpness
`noisePower`	number	`1.5`	Noise power exponent
`colorBleed`	number	`1`	How much color bleeds through the bars (ray width)
`className`	string	`""`	Additional CSS classes for the container

columnsnumber

Number of vertical columns

Default3

invertColumnsboolean

Invert column gradient

Defaultfalse

fuzzNoiseboolean

Enable granular fuzz noise

Defaulttrue

gridProximityColorboolean

Enable color based on grid proximity

Defaultfalse

baseColor[number, number, number]

Base color for the noise [r, g, b] values 0-1

Default[0.7882, 0.2, 1]

baseColorLight[number, number, number]

Light mode base color [r, g, b] values 0-1

Default[0.6824, 0, 1]

proximityColor[number, number, number]

Color applied near bar edges [r, g, b] values 0-1

Default[1, 0, 0]

proximityColorLight[number, number, number]

Light mode proximity color [r, g, b] values 0-1

Default[0.8, 0.3, 0.3]

speednumber

Animation speed multiplier

Default0.5

noiseScalenumber

Noise scale multiplier

Default0.4

fuzzIntensitynumber

Fuzz noise intensity

Default0.5

edgeSharpnessnumber

Bar edge sharpness

Default50

noisePowernumber

Noise power exponent

Default1.5

colorBleednumber

How much color bleeds through the bars (ray width)

Default1

classNamestring

Additional CSS classes for the container

Default""