Blinking Dots

A field of dots blinking on and off

blinking-dots-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Small signals, big ideas

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

Get startedBrowse library

9:41

Small signals, big ideas

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

Get startedBrowse library

Small signals, big ideas

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

Get startedLearn more

Customize

Density

Coverage

0.80

Jitter

0.60

Dot Size

1.00

Size Variation

1.00

Falloff

1.00

Layers

Layer Scale

1.90

Layer Fade

0.50

Twinkle

0.40

Twinkle Speed

1.00

Drift Speed

0.012

Drift Angle

Vignette

0.00

Brightness

1.00

Opacity

1.00

Cursor Parallax

0.060

Small Dot Color

Large Dot Color

Background

Cursor InteractionAdaptive QualityPaused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Width of the container.
`height`	string \| number	`"100%"`	Height of the container.
`className`	string	`-`	Extra classes for the container.
`children`	ReactNode	`-`	Content stacked above the dot field.
`density`	number	`20`	Cells along the shortest side of the canvas. Cells stay square at any aspect ratio.
`coverage`	number	`0.8`	Fraction of cells that hold a dot.
`jitter`	number	`0.6`	How far a dot may wander from its cell center.
`dotSize`	number	`1`	Multiplier applied to every dot radius.
`sizeVariation`	number	`1`	Spread between the smallest and largest dot. Also drives the color ramp.
`falloff`	number	`1`	Shapes the glow profile, higher values tighten the core.
`layers`	number	`2`	Number of parallax depth layers, up to 4.
`layerScale`	number	`1.9`	Cell density multiplier applied per extra layer.
`layerFade`	number	`0.5`	Brightness of the furthest layer.
`colorFrom`	string	`"#cc0080"`	Color of the smallest dots.
`colorTo`	string	`"#ffccff"`	Color of the largest dots.
`backgroundColor`	string	`"#0a0a0a"`	Fill behind the dot field. Accepts "transparent".
`twinkle`	number	`0.4`	Depth of the brightness flicker.
`twinkleSpeed`	number	`1`	Rate of the brightness flicker.
`driftSpeed`	number	`0.012`	Field pan speed in screen widths per second.
`driftAngle`	number	`90`	Direction of the pan in degrees.
`vignette`	number	`0`	Strength of the radial darkening toward the edges.
`brightness`	number	`1`	Overall gain applied to the dots.
`opacity`	number	`1`	Master alpha of the canvas.
`cursorInteraction`	boolean	`true`	Let the pointer shift the layers.
`cursorParallax`	number	`0.06`	How far the pointer displaces the nearest layer.
`adaptiveQuality`	boolean	`true`	Drop resolution when the frame rate falls short.
`targetFps`	number	`60`	Frame rate the adaptive pass aims for.
`dpr`	number	`2`	Upper bound on device pixel ratio.
`paused`	boolean	`false`	Hold the animation still.

widthstring | number

Width of the container.

Default"100%"

heightstring | number

Height of the container.

Default"100%"

classNamestring

Extra classes for the container.

Default-

childrenReactNode

Content stacked above the dot field.

Default-

densitynumber

Cells along the shortest side of the canvas. Cells stay square at any aspect ratio.

Default20

coveragenumber

Fraction of cells that hold a dot.

Default0.8

jitternumber

How far a dot may wander from its cell center.

Default0.6

dotSizenumber

Multiplier applied to every dot radius.

Default1

sizeVariationnumber

Spread between the smallest and largest dot. Also drives the color ramp.

Default1

falloffnumber

Shapes the glow profile, higher values tighten the core.

Default1

layersnumber

Number of parallax depth layers, up to 4.

Default2

layerScalenumber

Cell density multiplier applied per extra layer.

Default1.9

layerFadenumber

Brightness of the furthest layer.

Default0.5

colorFromstring

Color of the smallest dots.

Default"#cc0080"

colorTostring

Color of the largest dots.

Default"#ffccff"

backgroundColorstring

Fill behind the dot field. Accepts "transparent".

Default"#0a0a0a"

twinklenumber

Depth of the brightness flicker.

Default0.4

twinkleSpeednumber

Rate of the brightness flicker.

Default1

driftSpeednumber

Field pan speed in screen widths per second.

Default0.012

driftAnglenumber

Direction of the pan in degrees.

Default90

vignettenumber

Strength of the radial darkening toward the edges.

Default0

brightnessnumber

Overall gain applied to the dots.

Default1

opacitynumber

Master alpha of the canvas.

Default1

cursorInteractionboolean

Let the pointer shift the layers.

Defaulttrue

cursorParallaxnumber

How far the pointer displaces the nearest layer.

Default0.06

adaptiveQualityboolean

Drop resolution when the frame rate falls short.

Defaulttrue

targetFpsnumber

Frame rate the adaptive pass aims for.

Default60

dprnumber

Upper bound on device pixel ratio.

Default2

pausedboolean

Hold the animation still.

Defaultfalse

Name

Type

Default

Description

width

string | number

"100%"

Width of the container.

height

string | number

"100%"

Height of the container.

className

string

-

Extra classes for the container.

children

ReactNode

-

Content stacked above the dot field.

density

number

20

Cells along the shortest side of the canvas. Cells stay square at any aspect ratio.

coverage

number

0.8

Fraction of cells that hold a dot.

jitter

number

0.6

How far a dot may wander from its cell center.

dotSize

number

1

Multiplier applied to every dot radius.

sizeVariation

number

1

Spread between the smallest and largest dot. Also drives the color ramp.

falloff

number

1

Shapes the glow profile, higher values tighten the core.

layers

number

2

Number of parallax depth layers, up to 4.

layerScale

number

1.9

Cell density multiplier applied per extra layer.

layerFade

number

0.5

Brightness of the furthest layer.

colorFrom

string

"#cc0080"

Color of the smallest dots.

colorTo

string

"#ffccff"

Color of the largest dots.

backgroundColor

string

"#0a0a0a"

Fill behind the dot field. Accepts "transparent".

twinkle

number

0.4

Depth of the brightness flicker.

twinkleSpeed

number

1

Rate of the brightness flicker.

driftSpeed

number

0.012

Field pan speed in screen widths per second.

driftAngle

number

90

Direction of the pan in degrees.

vignette

number

0

Strength of the radial darkening toward the edges.

brightness

number

1

Overall gain applied to the dots.

opacity

number

1

Master alpha of the canvas.

cursorInteraction

boolean

true

Let the pointer shift the layers.

cursorParallax

number

0.06

How far the pointer displaces the nearest layer.

adaptiveQuality

boolean

true

Drop resolution when the frame rate falls short.

targetFps

number

60

Frame rate the adaptive pass aims for.

dpr

number

2

Upper bound on device pixel ratio.

paused

boolean

false

Hold the animation still.