Site

Shadow Bars

Animated shadow bar effect with depth

shadow-bars-tw

Customize

Tweak the props live

Basic

Columns3

Speed0.5

Invert Columns

Fuzz Noise

Grid Proximity Color

Colors

Base Color (Dark)

#c933ff

Base Color (Light)

#ae00ff

Proximity Color (Dark)

#ff0000

Proximity Color (Light)

#cc4d4d

Noise & Effects

Noise Scale0.4

Fuzz Intensity0.5

Edge Sharpness50

Noise Power1.5

Color Bleed1

Props

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

Default:3

invertColumnsboolean

Invert column gradient

Default:false

fuzzNoiseboolean

Enable granular fuzz noise

Default:true

gridProximityColorboolean

Enable color based on grid proximity

Default:false

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

Default:0.5

noiseScalenumber

Noise scale multiplier

Default:0.4

fuzzIntensitynumber

Fuzz noise intensity

Default:0.5

edgeSharpnessnumber

Bar edge sharpness

Default:50

noisePowernumber

Noise power exponent

Default:1.5

colorBleednumber

How much color bleeds through the bars (ray width)

Default:1

classNamestring

Additional CSS classes for the container

Default:""