Preferences

Shapes Dots

Customize

Cell Size40

Influence Radius25

Opacity1

Attack Time0.05

Release Time0.2

Idle Scale0.1

Min Peak Scale1

Max Peak Scale3

Overlap Guard0.86

Burst Speed1200

Burst Thickness180

DPR3

Animation Speed1

Props

Property	Type	Default	Description
`width`	string \| number	`"100%"`	Width of the canvas wrapper. Accepts any CSS value or number.
`height`	string \| number	`"100%"`	Height of the canvas wrapper. Accepts any CSS value or number.
`className`	string	`""`	Additional Tailwind or CSS classes applied to the wrapper div.
`cellSize`	number	`40`	Pixel size of each grid cell. Smaller values produce more dots; larger values produce fewer.
`influenceRadiusVmin`	number	`25`	Radius around the cursor within which shapes react, expressed in vmin (percentage of the viewport's smaller dimension).
`attackTime`	number	`0.05`	Time in seconds for a shape to grow. Lower values snap instantly; higher values grow gradually.
`releaseTime`	number	`0.6`	Time in seconds for a shape to shrink back to idle after the cursor leaves.
`idleScale`	number	`0.09`	Resting scale of shapes when not influenced. 0 is invisible; 1 is full base size.
`minPeakScale`	number	`1`	Minimum scale a shape can reach at peak (lower bound of the per-cell random range). Must be less than or equal to maxPeakScale.
`maxPeakScale`	number	`3`	Maximum scale a shape can reach at peak (upper bound of the per-cell random range). Must be greater than or equal to minPeakScale.
`overlapGuard`	number	`0.86`	Safety margin that prevents adjacent shapes from touching at max scale. 1 allows shapes to just touch; lower values add more gap.
`burstSpeed`	number	`1200`	Speed at which the click burst ring expands, in pixels per second.
`burstThickness`	number	`180`	Thickness of the click burst ring in pixels. Higher values produce a wider ring.
`backgroundColor`	string	`"#080808"`	Background color of the canvas. Set to "transparent" to skip drawing a background.
`shapes`	string[]	`["circle","triangle","square"]`	Pool of shape types randomly assigned to cells. Available values: "circle", "square", "triangle".
`colors`	(string \| { stops: string[] })[]	`DEFAULT_COLORS`	Pool of colors randomly assigned to shapes. Accepts plain hex strings or gradient objects ({ stops: ["#color1", "#color2"] }).
`opacity`	number	`1`	Global opacity of the entire canvas. 0 is fully transparent; 1 is fully opaque.
`dpr`	number	`3`	Maximum device pixel ratio cap. Higher values are sharper but more GPU-intensive.
`animationMode`	string	`"off"`	Continuous ambient animation pattern that runs independently of the cursor. Options: "off" \| "random" \| "pulse" \| "ripple" \| "left-to-right" \| "right-to-left" \| "top-to-bottom" \| "bottom-to-top" \| "wave-horizontal" \| "wave-vertical" \| "diagonal-tl-br" \| "diagonal-br-tl" \| "line-right" \| "line-left".
`animationSpeed`	number	`1`	Speed multiplier for the ambient animation. 2 = double speed; 0.5 = half speed.
`children`	ReactNode	`undefined`	Content rendered absolutely on top of the canvas, useful for text overlays or UI elements.

width

Typestring | number

Default"100%"

Width of the canvas wrapper. Accepts any CSS value or number.

height

Typestring | number

Default"100%"

Height of the canvas wrapper. Accepts any CSS value or number.

className

Typestring

Default""

Additional Tailwind or CSS classes applied to the wrapper div.

cellSize

Typenumber

Default40

Pixel size of each grid cell. Smaller values produce more dots; larger values produce fewer.

influenceRadiusVmin

Typenumber

Default25

Radius around the cursor within which shapes react, expressed in vmin (percentage of the viewport's smaller dimension).

attackTime

Typenumber

Default0.05

Time in seconds for a shape to grow. Lower values snap instantly; higher values grow gradually.

releaseTime

Typenumber

Default0.6

Time in seconds for a shape to shrink back to idle after the cursor leaves.

idleScale

Typenumber

Default0.09

Resting scale of shapes when not influenced. 0 is invisible; 1 is full base size.

minPeakScale

Typenumber

Default1

Minimum scale a shape can reach at peak (lower bound of the per-cell random range). Must be less than or equal to maxPeakScale.

maxPeakScale

Typenumber

Default3

Maximum scale a shape can reach at peak (upper bound of the per-cell random range). Must be greater than or equal to minPeakScale.

overlapGuard

Typenumber

Default0.86

Safety margin that prevents adjacent shapes from touching at max scale. 1 allows shapes to just touch; lower values add more gap.

burstSpeed

Typenumber

Default1200

Speed at which the click burst ring expands, in pixels per second.

burstThickness

Typenumber

Default180

Thickness of the click burst ring in pixels. Higher values produce a wider ring.

backgroundColor

Typestring

Default"#080808"

Background color of the canvas. Set to "transparent" to skip drawing a background.

shapes

Typestring[]

Default["circle","triangle","square"]

Pool of shape types randomly assigned to cells. Available values: "circle", "square", "triangle".

colors

Type(string | { stops: string[] })[]

DefaultDEFAULT_COLORS

Pool of colors randomly assigned to shapes. Accepts plain hex strings or gradient objects ({ stops: ["#color1", "#color2"] }).

opacity

Typenumber

Default1

Global opacity of the entire canvas. 0 is fully transparent; 1 is fully opaque.

dpr

Typenumber

Default3

Maximum device pixel ratio cap. Higher values are sharper but more GPU-intensive.

animationMode

Typestring

Default"off"

animationSpeed

Typenumber

Default1

Speed multiplier for the ambient animation. 2 = double speed; 0.5 = half speed.

children

TypeReactNode

Defaultundefined

Content rendered absolutely on top of the canvas, useful for text overlays or UI elements.

Crafted withbyMohammad Tasin