Dither Wave

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

Default1.0

intensitynumber

Wave intensity/amplitude

Default1.0

scalenumber

Scale of the wave pattern (higher = larger waves)

Default6.0

downScalenumber

Downscale factor for dithering pattern (higher = coarser)

Default0.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)

Default1.0

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

Quality preset for performance/visual tradeoff

Default"medium"

maxFPSnumber

Maximum frames per second cap

Default60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Defaulttrue

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect