Site

Dither Wave

Animated wave effect with retro dithering pattern

dither-wave-tw

Customize

Tweak the props live

Colors

Primary

#ffffff

Secondary

#5227FF

Animation

Speed1

Intensity2

Pause When Offscreen

Appearance

Scale4

Down Scale0.6

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	`1.0`	Animation speed multiplier
`intensity`	number	`1.0`	Wave intensity/amplitude
`scale`	number	`6.0`	Scale of the wave pattern (higher = larger waves)
`downScale`	number	`0.5`	Downscale factor for dithering pattern (higher = coarser)
`primaryColor`	string	`"#5227FF"`	Primary color in the gradient
`secondaryColor`	string	`"#5227FF"`	Secondary color in the gradient
`tertiaryColor`	string	`"#0a0a0a"`	Tertiary color in the gradient
`opacity`	number	`1.0`	Overall opacity (0-1)
`quality`	"low" \| "medium" \| "high"	`"medium"`	Quality preset for performance/visual tradeoff
`maxFPS`	number	`60`	Maximum frames per second cap
`pauseWhenOffscreen`	boolean	`true`	Pause rendering when component is off-screen
`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:1.0

intensitynumber

Wave intensity/amplitude

Default:1.0

scalenumber

Scale of the wave pattern (higher = larger waves)

Default:6.0

downScalenumber

Downscale factor for dithering pattern (higher = coarser)

Default:0.5

primaryColorstring

Primary color in the gradient

Default:"#5227FF"

secondaryColorstring

Secondary color in the gradient

Default:"#5227FF"

tertiaryColorstring

Tertiary color in the gradient

Default:"#0a0a0a"

opacitynumber

Overall opacity (0-1)

Default:1.0

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

Quality preset for performance/visual tradeoff

Default:"medium"

maxFPSnumber

Maximum frames per second cap

Default:60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Default:true

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the effect

Default:undefined