Dither Wave

Flowing waves drawn in a retro dither

dither-wave-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Retro waves, modern craft

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Retro waves, modern craft

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Retro waves, modern craft

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Primary

Secondary

Speed

1.0

Intensity

2.0

Pause When Offscreen

Scale

4.0

Down Scale

0.60

Opacity

1.0

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

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

Defaultundefined

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