Halftone Vortex
Cursor-reactive halftone dot vortex
halftone-vortex-tw
Customize
Dots
0.0002
150
0.5
2.5
Waves
0.2
0.1
0.4
0.75
-0.6
0.5
Color
0.301
1
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 | 0.5 | Animation speed multiplier (0.01–2.0) |
| zoom | number | 5 | Zoom level of the coordinate field (1–20) |
| dotDensity | number | 0.0002 | Density of halftone dots (0.00005–0.001) |
| gridScale | number | 150 | Scale of the halftone grid sampling (10–500) |
| spiralStrength | number | 0.2 | Spiral twist amount driven by radius (0–1) |
| radialWave | number | 0.1 | Amplitude of radial sine waves (0–1) |
| angularWave | number | 0.4 | Amplitude of angular sine waves (0–2) |
| patternDepth | number | 0.75 | Amplitude of slow angular pattern (0–2) |
| fieldOffset | number | -0.6 | Distance offset before thresholding (-2–2) |
| threshold | number | 0.5 | Hard threshold for dot cutoff (0–1) |
| color | string | "#000000" | Foreground color in hex format |
| backgroundColor | string | "#FF9FFC" | Background color in hex format |
| monochrome | boolean | true | Use single color instead of RGB channel separation |
| dampening | number | 0.301 | Cursor follow dampening (0=instant, higher=smoother) |
| opacity | number | 1 | Master opacity (0–1) |