Chroma Waves

Animated wave shader effect with noise distortion

chroma-waves-tw

Customize

Color 1

Color 2

Speed

0.5

Wave Frequency

0.2

Wave Amplitude

0.3

Distortion

1.5

Flatness

1.0

Chromatic Shift

0.25

Noise Level

0.10

Opacity

1.00

Props

15

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

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

Default0.5

colorstring

Primary wave color in hex format

Default"#FFFFFF"

backgroundColorstring

Background color in hex format

Default"#8B5CF6"

waveFrequencynumber

Wave frequency/count (0.1-10)

Default0.2

waveAmplitudenumber

Wave amplitude/height (0.1-5)

Default0.3

distortionnumber

Distortion intensity (0-2)

Default1.5

chromaShiftnumber

Chromatic aberration effect intensity (0-0.5)

Default0.25

noiseLevelnumber

Grain/noise level (0-1)

Default0.1

flatnessnumber

Peak flatness (0-10)

Default1.0

opacitynumber

Master opacity control (0-1)

Default1.0

quality"low" | "medium" | "high"

Rendering quality level

Default"high"

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect

Defaultundefined