Preferences

Mouse Repel Dots

Customize

Dot Radius1.6

Dot Spacing15

Max Dot Size6

Repel Radius80

Force5.5

Damping0.72

Wave Amplitude4

Bulge Strength30

Spring K0.07

Sparkle Size1.6

Sparkle Speed0.4

Sparkle Density0.015

Props

Property	Type	Default	Description
`dotRadius`	number	`1.6`	Base radius (px) of each dot in its resting state.
`dotSpacing`	number	`22`	Gap in px between adjacent dots in the grid.
`repelRadius`	number	`80`	Radius (px) around the cursor within which dots are repelled.
`force`	number	`5.5`	Strength of the repulsion force applied to dots near the cursor.
`springK`	number	`0.07`	Spring constant — how strongly each dot snaps back to its origin.
`damping`	number	`0.72`	Velocity damping factor applied each frame (0–1). Lower = bouncier.
`maxDotSize`	number	`6`	Maximum dot radius (px) when fully displaced by the cursor.
`dotColor`	string	`"#7a5af8"`	Base dot color used in the resting / low-energy state.
`dotColorMid`	string	`"#d35af8"`	Mid-energy dot color shown at medium displacement.
`dotColorHot`	string	`"#ffffff"`	High-energy dot color for dots closest to the cursor.
`backgroundColor`	string	`"transparent"`	Canvas background fill. Use "transparent" to inherit the parent background.
`gradientFrom`	string	`null`	Start color of a diagonal linear gradient that overrides dotColor/dotColorMid/dotColorHot.
`gradientTo`	string	`null`	End color of the diagonal linear gradient. Both gradientFrom and gradientTo must be set.
`bulgeOnly`	boolean	`false`	When true, dots push outward smoothly instead of flying with spring physics.
`bulgeStrength`	number	`30`	Outward push distance (px) used when bulgeOnly is enabled.
`waveAmplitude`	number	`0`	Amplitude (px) of a continuous ambient sine-wave ripple across the grid. 0 disables it.
`sparkleMode`	"off" \| "random" \| "pulse" \| "ripple" others..	`"off"`	Pattern used to light up sparkle dots across the grid.
`sparkleColor`	string	`"#d35af8"`	Color applied to dots when they sparkle.
`sparkleSize`	number	`1.6`	Size multiplier applied to a dot at peak sparkle intensity.
`sparkleSpeed`	number	`0.4`	Playback speed of sparkle animations. Higher = faster sweep/pulse.
`sparkleDensity`	number	`0.015`	Fraction of dots that sparkle simultaneously in random mode (0–1).
`className`	string	`""`	Extra CSS classes forwarded to the wrapper div.

dotRadius

Typenumber

Default1.6

Base radius (px) of each dot in its resting state.

dotSpacing

Typenumber

Default22

Gap in px between adjacent dots in the grid.

repelRadius

Typenumber

Default80

Radius (px) around the cursor within which dots are repelled.

force

Typenumber

Default5.5

Strength of the repulsion force applied to dots near the cursor.

springK

Typenumber

Default0.07

Spring constant — how strongly each dot snaps back to its origin.

damping

Typenumber

Default0.72

Velocity damping factor applied each frame (0–1). Lower = bouncier.

maxDotSize

Typenumber

Default6

Maximum dot radius (px) when fully displaced by the cursor.

dotColor

Typestring

Default"#7a5af8"

Base dot color used in the resting / low-energy state.

dotColorMid

Typestring

Default"#d35af8"

Mid-energy dot color shown at medium displacement.

dotColorHot

Typestring

Default"#ffffff"

High-energy dot color for dots closest to the cursor.

backgroundColor

Typestring

Default"transparent"

Canvas background fill. Use "transparent" to inherit the parent background.

gradientFrom

Typestring

Defaultnull

Start color of a diagonal linear gradient that overrides dotColor/dotColorMid/dotColorHot.

gradientTo

Typestring

Defaultnull

End color of the diagonal linear gradient. Both gradientFrom and gradientTo must be set.

bulgeOnly

Typeboolean

Defaultfalse

When true, dots push outward smoothly instead of flying with spring physics.

bulgeStrength

Typenumber

Default30

Outward push distance (px) used when bulgeOnly is enabled.

waveAmplitude

Typenumber

Default0

Amplitude (px) of a continuous ambient sine-wave ripple across the grid. 0 disables it.

sparkleMode

Type"off" | "random" | "pulse" | "ripple" others..

Default"off"

Pattern used to light up sparkle dots across the grid.

sparkleColor

Typestring

Default"#d35af8"

Color applied to dots when they sparkle.

sparkleSize

Typenumber

Default1.6

Size multiplier applied to a dot at peak sparkle intensity.

sparkleSpeed

Typenumber

Default0.4

Playback speed of sparkle animations. Higher = faster sweep/pulse.

sparkleDensity

Typenumber

Default0.015

Fraction of dots that sparkle simultaneously in random mode (0–1).

className

Typestring

Default""

Extra CSS classes forwarded to the wrapper div.

Crafted withbyMohammad Tasin