Shadow Bars
Animated shadow bar effect with depth
shadow-bars-tw
Customize
Basic
3
0.5
Colors
Noise & Effects
0.4
0.5
50
1.5
1
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 |