A grainy ribbon of color waving through the dark
| Name | Type | Default | Description |
|---|---|---|---|
width | number | string | "100%" | Width of the component in pixels or CSS value |
height | number | string | "100%" | Height of the component in pixels or CSS value |
speed | number | 0.5 | Animation speed multiplier |
waveCount | number | 25 | Number of wave lines |
waveAmplitude | number | 0.85 | Wave amplitude/height |
waveFrequency | number | 4 | Horizontal wave frequency |
lineThickness | number | 0.2 | Line thickness |
grainIntensity | number | 50 | Grain/dither intensity |
startColor | string | "#ff6666" | Start color (top waves) |
endColor | string | "#6666ff" | End color (bottom waves) |
lightBackground | string | "#ffffff" | Background color for light mode |
darkBackground | string | "#000000" | Background color for dark mode |
brightness | number | 1 | Overall brightness |
speedVariation | number | 0.006 | Wave speed variation between lines |
waveWidth | number | 3.5 | Width of the wave effect (horizontal spread) |
scale | number | 0.6 | Scale of the entire effect |
className | string | "" | Additional CSS classes |
widthnumber | stringWidth of the component in pixels or CSS value
"100%"heightnumber | stringHeight of the component in pixels or CSS value
"100%"speednumberAnimation speed multiplier
0.5waveCountnumberNumber of wave lines
25waveAmplitudenumberWave amplitude/height
0.85waveFrequencynumberHorizontal wave frequency
4lineThicknessnumberLine thickness
0.2grainIntensitynumberGrain/dither intensity
50startColorstringStart color (top waves)
"#ff6666"endColorstringEnd color (bottom waves)
"#6666ff"lightBackgroundstringBackground color for light mode
"#ffffff"darkBackgroundstringBackground color for dark mode
"#000000"brightnessnumberOverall brightness
1speedVariationnumberWave speed variation between lines
0.006waveWidthnumberWidth of the wave effect (horizontal spread)
3.5scalenumberScale of the entire effect
0.6classNamestringAdditional CSS classes
""