Smooth, flowing waves of color
| 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 | 1.0 | Animation speed multiplier |
color1 | string | "#00ff88" | Primary wave color in hex format |
color2 | string | "#0088ff" | Secondary wave color in hex format |
frequency | number | 1.0 | Wave frequency/scale (higher = more waves) |
intensity | number | 1.0 | Wave intensity/amplitude |
complexity | number | 1.0 | Complexity of wave patterns (layers of noise) |
opacity | number | 1.0 | Opacity of the waves (0-1) |
transparent | boolean | true | Whether the background should be transparent |
backgroundColor | string | "#000000" | Background color when transparent is false |
className | string | "" | Additional CSS classes |
children | React.ReactNode | undefined | Content to render on top of the waves |
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
1.0color1stringPrimary wave color in hex format
"#00ff88"color2stringSecondary wave color in hex format
"#0088ff"frequencynumberWave frequency/scale (higher = more waves)
1.0intensitynumberWave intensity/amplitude
1.0complexitynumberComplexity of wave patterns (layers of noise)
1.0opacitynumberOpacity of the waves (0-1)
1.0transparentbooleanWhether the background should be transparent
truebackgroundColorstringBackground color when transparent is false
"#000000"classNamestringAdditional CSS classes
""childrenReact.ReactNodeContent to render on top of the waves
undefined