Site

Halftone Vortex

Cursor-reactive halftone dot vortex

halftone-vortex-tw

Customize

Tweak the props live

Dots

Dot Density0.0002

Grid Scale150

Threshold0.5

Zoom2.5

Monochrome

Waves

Spiral Strength0.2

Radial Wave0.1

Angular Wave0.4

Pattern Depth0.75

Field Offset-0.6

Speed0.5

Color

Foreground

#FFFFFF

Background

#FF9FFC

Dampening0.301

Opacity1

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)

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–2.0)

Default:0.5

zoomnumber

Zoom level of the coordinate field (1–20)

Default:5

dotDensitynumber

Density of halftone dots (0.00005–0.001)

Default:0.0002

gridScalenumber

Scale of the halftone grid sampling (10–500)

Default:150

spiralStrengthnumber

Spiral twist amount driven by radius (0–1)

Default:0.2

radialWavenumber

Amplitude of radial sine waves (0–1)

Default:0.1

angularWavenumber

Amplitude of angular sine waves (0–2)

Default:0.4

patternDepthnumber

Amplitude of slow angular pattern (0–2)

Default:0.75

fieldOffsetnumber

Distance offset before thresholding (-2–2)

Default:-0.6

thresholdnumber

Hard threshold for dot cutoff (0–1)

Default:0.5

colorstring

Foreground color in hex format

Default:"#000000"

backgroundColorstring

Background color in hex format

Default:"#FF9FFC"

monochromeboolean

Use single color instead of RGB channel separation

Default:true

dampeningnumber

Cursor follow dampening (0=instant, higher=smoother)

Default:0.301

opacitynumber

Master opacity (0–1)

Default:1