Halftone Vortex

A spiraling vortex of halftone dots

halftone-vortex-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Print-inspired, screen-perfected

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Print-inspired, screen-perfected

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Print-inspired, screen-perfected

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Eye Color

Rim Color

Background

Speed

0.40

Zoom

2.50

Dot Density

0.00020

Threshold

0.50

Spiral

0.20

Radial Wave

0.10

Angular Wave

0.40

Pattern Depth

0.75

Field Offset

-0.60

Depth

0.60

Glow

0.50

Softness

0.00

Offset X

0.00

Offset Y

0.00

Opacity

1.00

Hover Speed

1.60

Pulse Strength

1.00

MonochromeInteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Ink colours from the eye to the rim, blended in OKLCh.
`color`	string	`"transparent"`	Colour around the dots. Transparent shows the page. On light colours the ink turns deeper.
`speed`	number	`0.4`	Spin speed of the vortex.
`zoom`	number	`2.5`	Scale of the field. Higher values zoom out.
`dotDensity`	number	`0.0002`	Density of the halftone grid. Higher values give smaller dots.
`gridScale`	number	`150`	Second multiplier on the halftone grid.
`threshold`	number	`0.5`	Ink cutoff. Higher values print more ink.
`spiralStrength`	number	`0.2`	How strongly the arms twist.
`radialWave`	number	`0.1`	Ripples travelling toward the eye.
`angularWave`	number	`0.4`	Fine ripples around the arms.
`patternDepth`	number	`0.75`	Depth of the main spiral arms.
`fieldOffset`	number	`-0.6`	Size of the vortex. Lower values make it larger.
`depth`	number	`0.6`	Dots shrink and darken toward the eye.
`glow`	number	`0.5`	Soft light around the brightest arms.
`softness`	number	`0`	Softens the dot edges.
`monochrome`	boolean	`true`	One ink. Off prints three offset colour plates.
`offsetX`	number	`0`	Horizontal position of the eye, from -1 to 1.
`offsetY`	number	`0`	Vertical position of the eye, from -1 to 1.
`opacity`	number	`1`	Overall opacity.
`interactive`	boolean	`true`	Click to send a pulse down the vortex. Pulses stack. Hover quickens the spin.
`hoverSpeed`	number	`1.6`	Spin multiplier while the pointer is over the vortex.
`pulseStrength`	number	`1`	How far a click pulse swells the dots.
`dampening`	number	`0.301`	Smoothing time of the hover speed change, in seconds.
`intro`	boolean	`true`	The vortex develops from the eye and spins up from still.
`paused`	boolean	`false`	Stops the motion. Reduced motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the root element.
`height`	string \| number	`"100%"`	Height of the root element.
`ref`	{ pulse, replay }	`-`	pulse(x?, y?, strength?) sends a pulse from a point in 0 to 1 coordinates. replay() restarts the intro.
`children`	ReactNode	`-`	Content rendered above the effect.
`className`	string	`-`	Classes for the root element.
`style`	CSSProperties	`-`	Inline styles for the root element.

colors[string, string]

Ink colours from the eye to the rim, blended in OKLCh.

Default["#5227FF", "#FF9FFC"]

colorstring

Colour around the dots. Transparent shows the page. On light colours the ink turns deeper.

Default"transparent"

speednumber

Spin speed of the vortex.

Default0.4

zoomnumber

Scale of the field. Higher values zoom out.

Default2.5

dotDensitynumber

Density of the halftone grid. Higher values give smaller dots.

Default0.0002

gridScalenumber

Second multiplier on the halftone grid.

Default150

thresholdnumber

Ink cutoff. Higher values print more ink.

Default0.5

spiralStrengthnumber

How strongly the arms twist.

Default0.2

radialWavenumber

Ripples travelling toward the eye.

Default0.1

angularWavenumber

Fine ripples around the arms.

Default0.4

patternDepthnumber

Depth of the main spiral arms.

Default0.75

fieldOffsetnumber

Size of the vortex. Lower values make it larger.

Default-0.6

depthnumber

Dots shrink and darken toward the eye.

Default0.6

glownumber

Soft light around the brightest arms.

Default0.5

softnessnumber

Softens the dot edges.

Default0

monochromeboolean

One ink. Off prints three offset colour plates.

Defaulttrue

offsetXnumber

Horizontal position of the eye, from -1 to 1.

Default0

offsetYnumber

Vertical position of the eye, from -1 to 1.

Default0

opacitynumber

Overall opacity.

Default1

interactiveboolean

Click to send a pulse down the vortex. Pulses stack. Hover quickens the spin.

Defaulttrue

hoverSpeednumber

Spin multiplier while the pointer is over the vortex.

Default1.6

pulseStrengthnumber

How far a click pulse swells the dots.

Default1

dampeningnumber

Smoothing time of the hover speed change, in seconds.

Default0.301

introboolean

The vortex develops from the eye and spins up from still.

Defaulttrue

pausedboolean

Stops the motion. Reduced motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the root element.

Default"100%"

heightstring | number

Height of the root element.

Default"100%"

ref{ pulse, replay }

pulse(x?, y?, strength?) sends a pulse from a point in 0 to 1 coordinates. replay() restarts the intro.

Default-

childrenReactNode

Content rendered above the effect.

Default-

classNamestring

Classes for the root element.

Default-

styleCSSProperties

Inline styles for the root element.

Default-

Name

Type

Default

Description

colors

[string, string]

["#5227FF", "#FF9FFC"]

Ink colours from the eye to the rim, blended in OKLCh.

color

string

"transparent"

Colour around the dots. Transparent shows the page. On light colours the ink turns deeper.

speed

number

0.4

Spin speed of the vortex.

zoom

number

2.5

Scale of the field. Higher values zoom out.

dotDensity

number

0.0002

Density of the halftone grid. Higher values give smaller dots.

gridScale

number

150

Second multiplier on the halftone grid.

threshold

number

0.5

Ink cutoff. Higher values print more ink.

spiralStrength

number

0.2

How strongly the arms twist.

radialWave

number

0.1

Ripples travelling toward the eye.

angularWave

number

0.4

Fine ripples around the arms.

patternDepth

number

0.75

Depth of the main spiral arms.

fieldOffset

number

-0.6

Size of the vortex. Lower values make it larger.

depth

number

0.6

Dots shrink and darken toward the eye.

glow

number

0.5

Soft light around the brightest arms.

softness

number

0

Softens the dot edges.

monochrome

boolean

true

One ink. Off prints three offset colour plates.

offsetX

number

0

Horizontal position of the eye, from -1 to 1.

offsetY

number

0

Vertical position of the eye, from -1 to 1.

opacity

number

1

Overall opacity.

interactive

boolean

true

Click to send a pulse down the vortex. Pulses stack. Hover quickens the spin.

hoverSpeed

number

1.6

Spin multiplier while the pointer is over the vortex.

pulseStrength

number

1

How far a click pulse swells the dots.

dampening

number

0.301

Smoothing time of the hover speed change, in seconds.

intro

boolean

true

The vortex develops from the eye and spins up from still.

paused

boolean

false

Stops the motion. Reduced motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the root element.

height

string | number

"100%"

Height of the root element.

ref

{ pulse, replay }

-

pulse(x?, y?, strength?) sends a pulse from a point in 0 to 1 coordinates. replay() restarts the intro.

children

ReactNode

-

Content rendered above the effect.

className

string

-

Classes for the root element.

style

CSSProperties

-

Inline styles for the root element.