Grain Wave
Grainy wave texture animation effect
grain-wave-tw
Customize
Animation
0.5
25
Wave Settings
0.85
4
3.5
0.006
Line Appearance
0.2
50
0.6
1
Gradient Colors
Background
Props
| 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 |