Halftone Wave
Animated halftone dot grid with noise
halftone-wave-tw
Customize
Dots
40
0.75
0.35
1
0
1
Noise
3
3
0.2
0.8
0.1
0.1
Color
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 |