Thinking Dots

A dot matrix breathing around a drifting cloud of density

thinking-dots-tw

Customize

Speed

1.00

Lobes

Spacing

0.058

Dot Size

0.022

Dot Gain

0.112

Dot Softness

0.48

Jitter

0.010

Pulse

0.10

Pulse Rate

1.6

Pulse Glow

0.22

Drift

0.22

Cloud Scale

1.00

Turbulence

0.22

Turbulence Scale

2.4

Ambient

0.16

Intensity

0.86

Accent Start

0.55

Accent End

1.10

Glow

0.035

Glow Falloff

4.0

Grain

0.030

Vignette

0.10

Cursor Influence

0.35

Opacity

1.00

Color

Accent Color

Background

Cursor InteractionPaused

Props

Name	Type	Default	Description
`speed`	number	`1`	How fast the cloud drifts.
`lobes`	number	`3`	Number of gaussian lobes making up the cloud.
`spacing`	number	`0.058`	Distance between dot centres, in screen heights.
`dotSize`	number	`0.022`	Radius of a dot outside the cloud, as a fraction of a cell.
`dotGain`	number	`0.112`	Extra radius a dot gains at full cloud density.
`dotSoftness`	number	`0.48`	Edge softness of a dot, 0 is hard and 1 is fully feathered.
`jitter`	number	`0.01`	Random per-cell variation in dot radius.
`pulse`	number	`0.1`	Depth of the size ripple travelling across the grid.
`pulseRate`	number	`1.6`	Speed of that ripple.
`pulseGlow`	number	`0.22`	Depth of the matching brightness ripple.
`drift`	number	`0.22`	How far the lobes wander from the centre.
`cloudScale`	number	`1`	Overall size of the cloud.
`turbulence`	number	`0.22`	Strength of the noise that breaks up the cloud edge.
`turbulenceScale`	number	`2.4`	Spatial frequency of that noise.
`ambient`	number	`0.16`	Brightness of dots outside the cloud.
`intensity`	number	`0.86`	Brightness a dot gains at full cloud density.
`accentStart`	number	`0.55`	Density at which the accent colour starts appearing.
`accentEnd`	number	`1.1`	Density at which the accent colour takes over.
`color`	string	`"#ff44af"`	Colour of the resting dots.
`accentColor`	string	`"#ff44af"`	Colour of the dots at the heart of the cloud.
`glow`	number	`0.035`	Strength of the halo around the densest dots.
`glowFalloff`	number	`4`	How quickly that halo falls off inside a cell.
`grain`	number	`0.03`	Film grain strength, 0 to 1.
`grainRate`	number	`24`	Grain refreshes per second.
`vignette`	number	`0.1`	Corner darkening, 0 to 1.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the pointer draw the cloud toward it.
`cursorInfluence`	number	`0.35`	How strongly the pointer swells the cloud.
`paused`	boolean	`false`	Freeze the animation.
`adaptiveQuality`	boolean	`true`	Scale back resolution when the frame budget slips.
`targetFps`	number	`60`	Frame rate the quality meter aims to hold.
`dpr`	number	`1.75`	Upper device pixel ratio bound.
`className`	string	`-`	Optional className applied to the root.
`children`	ReactNode	`-`	Content layered above the dot field.

speednumber

How fast the cloud drifts.

Default1

lobesnumber

Number of gaussian lobes making up the cloud.

Default3

spacingnumber

Distance between dot centres, in screen heights.

Default0.058

dotSizenumber

Radius of a dot outside the cloud, as a fraction of a cell.

Default0.022

dotGainnumber

Extra radius a dot gains at full cloud density.

Default0.112

dotSoftnessnumber

Edge softness of a dot, 0 is hard and 1 is fully feathered.

Default0.48

jitternumber

Random per-cell variation in dot radius.

Default0.01

pulsenumber

Depth of the size ripple travelling across the grid.

Default0.1

pulseRatenumber

Speed of that ripple.

Default1.6

pulseGlownumber

Depth of the matching brightness ripple.

Default0.22

driftnumber

How far the lobes wander from the centre.

Default0.22

cloudScalenumber

Overall size of the cloud.

Default1

turbulencenumber

Strength of the noise that breaks up the cloud edge.

Default0.22

turbulenceScalenumber

Spatial frequency of that noise.

Default2.4

ambientnumber

Brightness of dots outside the cloud.

Default0.16

intensitynumber

Brightness a dot gains at full cloud density.

Default0.86

accentStartnumber

Density at which the accent colour starts appearing.

Default0.55

accentEndnumber

Density at which the accent colour takes over.

Default1.1

colorstring

Colour of the resting dots.

Default"#ff44af"

accentColorstring

Colour of the dots at the heart of the cloud.

Default"#ff44af"

glownumber

Strength of the halo around the densest dots.

Default0.035

glowFalloffnumber

How quickly that halo falls off inside a cell.

Default4

grainnumber

Film grain strength, 0 to 1.

Default0.03

grainRatenumber

Grain refreshes per second.

Default24

vignettenumber

Corner darkening, 0 to 1.

Default0.1

backgroundColorstring

Panel backdrop, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the pointer draw the cloud toward it.

Defaulttrue

cursorInfluencenumber

How strongly the pointer swells the cloud.

Default0.35

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale back resolution when the frame budget slips.

Defaulttrue

targetFpsnumber

Frame rate the quality meter aims to hold.

Default60

dprnumber

Upper device pixel ratio bound.

Default1.75

classNamestring

Optional className applied to the root.

Default-

childrenReactNode

Content layered above the dot field.

Default-