Halftone Wave

A halftone dot grid rippling with soft noise

halftone-wave-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Dots that move the eye

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

Get startedBrowse library

9:41

Dots that move the eye

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

Get startedBrowse library

Dots that move the eye

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

Get startedLearn more

Customize

Grid Density

Dot Size

0.75

Softness

0.35

Speed

1.00

Rotation

Opacity

1.00

Noise Scale

3.0

Octaves

Contrast Min

0.20

Contrast Max

0.80

Scroll X

0.10

Scroll Y

0.10

Color A

Color B

Background

Cursor Interaction

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`1.0`	Animation speed multiplier (0.01–3.0)
`noiseScale`	number	`3.0`	Noise field scale: higher values create smaller, denser noise features (0.5–10)
`octaves`	number	`3`	Number of FBM octaves (1–6). More octaves = finer detail
`gridDensity`	number	`40.0`	Number of dots per screen-width (5–100)
`dotSize`	number	`0.75`	Maximum dot radius as fraction of cell (0–1)
`softness`	number	`0.35`	Dot edge softness, higher = blurrier edges (0–1)
`contrastMin`	number	`0.2`	Lower bound of noise contrast remap (0–1)
`contrastMax`	number	`0.8`	Upper bound of noise contrast remap (0–1)
`scrollX`	number	`0.1`	Horizontal scroll speed of the noise field (-1–1)
`scrollY`	number	`0.1`	Vertical scroll speed of the noise field (-1–1)
`rotation`	number	`0`	Rotation angle in degrees (0–360)
`colorA`	string	`"#FFFFFF"`	Primary dot color at low noise values (hex)
`colorB`	string	`"#000000"`	Secondary dot color at high noise values (hex)
`backgroundColor`	string	`"#FFFFFF"`	Background color (hex)
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to boost dot size near pointer

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0.01–3.0)

Default1.0

noiseScalenumber

Noise field scale: higher values create smaller, denser noise features (0.5–10)

Default3.0

octavesnumber

Number of FBM octaves (1–6). More octaves = finer detail

Default3

gridDensitynumber

Number of dots per screen-width (5–100)

Default40.0

dotSizenumber

Maximum dot radius as fraction of cell (0–1)

Default0.75

softnessnumber

Dot edge softness, higher = blurrier edges (0–1)

Default0.35

contrastMinnumber

Lower bound of noise contrast remap (0–1)

Default0.2

contrastMaxnumber

Upper bound of noise contrast remap (0–1)

Default0.8

scrollXnumber

Horizontal scroll speed of the noise field (-1–1)

Default0.1

scrollYnumber

Vertical scroll speed of the noise field (-1–1)

Default0.1

rotationnumber

Rotation angle in degrees (0–360)

Default0

colorAstring

Primary dot color at low noise values (hex)

Default"#FFFFFF"

colorBstring

Secondary dot color at high noise values (hex)

Default"#000000"

backgroundColorstring

Background color (hex)

Default"#FFFFFF"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to boost dot size near pointer

Defaultfalse

Name

Type

Default

Description

width

string | number

"100%"

Container width

height

string | number

"100%"

Container height

className

string

""

Additional CSS classes for styling

children

ReactNode

undefined

Content rendered above the effect

speed

number

1.0

Animation speed multiplier (0.01–3.0)

noiseScale

number

3.0

Noise field scale: higher values create smaller, denser noise features (0.5–10)

octaves

number

3

Number of FBM octaves (1–6). More octaves = finer detail

gridDensity

number

40.0

Number of dots per screen-width (5–100)

dotSize

number

0.75

Maximum dot radius as fraction of cell (0–1)

softness

number

0.35

Dot edge softness, higher = blurrier edges (0–1)

contrastMin

number

0.2

Lower bound of noise contrast remap (0–1)

contrastMax

number

0.8

Upper bound of noise contrast remap (0–1)

scrollX

number

0.1

Horizontal scroll speed of the noise field (-1–1)

scrollY

number

0.1

Vertical scroll speed of the noise field (-1–1)

rotation

number

0

Rotation angle in degrees (0–360)

colorA

string

"#FFFFFF"

Primary dot color at low noise values (hex)

colorB

string

"#000000"

Secondary dot color at high noise values (hex)

backgroundColor

string

"#FFFFFF"

Background color (hex)

opacity

number

1

Master opacity (0–1)

cursorInteraction

boolean

false

Enable cursor interaction to boost dot size near pointer