Halftone Wave

Animated halftone dot grid with noise

halftone-wave-tw

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