Shader Waves
Animated wave patterns with customizable colors and noise
shader-waves-tw
Customize
Tweak the props liveColors
#5227FF#0A0A0AAnimation
0.2x
0.5
Effects
3
0.5
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 | 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
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"speednumberAnimation speed multiplier
Default:
1.0color1stringPrimary wave color in hex format
Default:
"#00ff88"color2stringSecondary wave color in hex format
Default:
"#0088ff"frequencynumberWave frequency/scale (higher = more waves)
Default:
1.0intensitynumberWave intensity/amplitude
Default:
1.0complexitynumberComplexity of wave patterns (layers of noise)
Default:
1.0opacitynumberOpacity of the waves (0-1)
Default:
1.0transparentbooleanWhether the background should be transparent
Default:
truebackgroundColorstringBackground color when transparent is false
Default:
"#000000"classNamestringAdditional CSS classes
Default:
""childrenReact.ReactNodeContent to render on top of the waves
Default:
undefined