Halftone Wave

Animated halftone dot grid with noise

halftone-wave-tw

Customize

Tweak the props live

Dots

Grid Density40

Dot Size0.75

Softness0.35

Speed1

Rotation0

Opacity1

Noise

Noise Scale3

Octaves3

Contrast Min0.2

Contrast Max0.8

Scroll X0.1

Scroll Y0.1

Color

Color A

#000000

Color B

#000000

Background

#FFFFFF

Interaction

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

Default:undefined

speednumber

Animation speed multiplier (0.01–3.0)

Default:1.0

noiseScalenumber

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

Default:3.0

octavesnumber

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

Default:3

gridDensitynumber

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

Default:40.0

dotSizenumber

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

Default:0.75

softnessnumber

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

Default:0.35

contrastMinnumber

Lower bound of noise contrast remap (0–1)

Default:0.2

contrastMaxnumber

Upper bound of noise contrast remap (0–1)

Default:0.8

scrollXnumber

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

Default:0.1

scrollYnumber

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

Default:0.1

rotationnumber

Rotation angle in degrees (0–360)

Default:0

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)

Default:1

cursorInteractionboolean

Enable cursor interaction to boost dot size near pointer

Default:false