Chroma Waves
Animated wave shader effect with noise distortion
chroma-waves-tw
Customize
0.5
0.2
0.3
1.5
0.25
0.1
1
1
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 |
| color | string | "#FFFFFF" | Primary wave color in hex format |
| backgroundColor | string | "#8B5CF6" | Background color in hex format |
| waveFrequency | number | 0.2 | Wave frequency/count (0.1-10) |
| waveAmplitude | number | 0.3 | Wave amplitude/height (0.1-5) |
| distortion | number | 1.5 | Distortion intensity (0-2) |
| chromaShift | number | 0.25 | Chromatic aberration effect intensity (0-0.5) |
| noiseLevel | number | 0.1 | Grain/noise level (0-1) |
| flatness | number | 1.0 | Peak flatness (0-10) |
| opacity | number | 1.0 | Master opacity control (0-1) |
| quality | "low" | "medium" | "high" | "high" | Rendering quality level |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the effect |