Shader Waves

Props

13

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 | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default1.0

color1string

Primary wave color in hex format

Default"#00ff88"

color2string

Secondary wave color in hex format

Default"#0088ff"

frequencynumber

Wave frequency/scale (higher = more waves)

Default1.0

intensitynumber

Wave intensity/amplitude

Default1.0

complexitynumber

Complexity of wave patterns (layers of noise)

Default1.0

opacitynumber

Opacity of the waves (0-1)

Default1.0

transparentboolean

Whether the background should be transparent

Defaulttrue

backgroundColorstring

Background color when transparent is false

Default"#000000"

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the waves