Thinking Dots

A grid of dots that swell under a drifting cloud

thinking-dots-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Ideas taking shape

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

Get startedBrowse library

9:41

Ideas taking shape

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

Get startedBrowse library

Ideas taking shape

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

Get startedLearn more

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-

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.