- Docs
- Components
- Backgrounds
- Shadow Bars
Vertical bars of shifting light and shadow
| 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 |
columnsnumberNumber of vertical columns
3invertColumnsbooleanInvert column gradient
falsefuzzNoisebooleanEnable granular fuzz noise
truegridProximityColorbooleanEnable color based on grid proximity
falsebaseColor[number, number, number]Base color for the noise [r, g, b] values 0-1
[0.7882, 0.2, 1]baseColorLight[number, number, number]Light mode base color [r, g, b] values 0-1
[0.6824, 0, 1]proximityColor[number, number, number]Color applied near bar edges [r, g, b] values 0-1
[1, 0, 0]proximityColorLight[number, number, number]Light mode proximity color [r, g, b] values 0-1
[0.8, 0.3, 0.3]speednumberAnimation speed multiplier
0.5noiseScalenumberNoise scale multiplier
0.4fuzzIntensitynumberFuzz noise intensity
0.5edgeSharpnessnumberBar edge sharpness
50noisePowernumberNoise power exponent
1.5colorBleednumberHow much color bleeds through the bars (ray width)
1classNamestringAdditional CSS classes for the container
""