Site

Chroma Waves

Animated wave shader effect with noise distortion

chroma-waves-tw

Customize

Tweak the props live

Colors

Color 1

#ffffff

Color 2

#8B5CF6

Animation

Speed0.5

Wave Settings

Wave Frequency0.2

Wave Amplitude0.3

Distortion1.5

Flatness1

Effects

Chromatic Shift0.25

Noise Level0.1

Opacity1

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

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

Default:0.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)

Default:0.2

waveAmplitudenumber

Wave amplitude/height (0.1-5)

Default:0.3

distortionnumber

Distortion intensity (0-2)

Default:1.5

chromaShiftnumber

Chromatic aberration effect intensity (0-0.5)

Default:0.25

noiseLevelnumber

Grain/noise level (0-1)

Default:0.1

flatnessnumber

Peak flatness (0-10)

Default:1.0

opacitynumber

Master opacity control (0-1)

Default:1.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

Default:undefined