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.

dotRadiusnumber

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

Default1.6

dotSpacingnumber

Gap in px between adjacent dots in the grid.

Default22

repelRadiusnumber

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

Default80

forcenumber

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

Default5.5

springKnumber

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

Default0.07

dampingnumber

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

Default0.72

maxDotSizenumber

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

Default6

dotColorstring

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

Default"#7a5af8"

dotColorMidstring

Mid-energy dot color shown at medium displacement.

Default"#d35af8"

dotColorHotstring

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

Default"#ffffff"

backgroundColorstring

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

Default"transparent"

gradientFromstring

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

Defaultnull

gradientTostring

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

Defaultnull

bulgeOnlyboolean

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

Defaultfalse

bulgeStrengthnumber

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

Default30

waveAmplitudenumber

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

Default0

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

Pattern used to light up sparkle dots across the grid.

Default"off"

sparkleColorstring

Color applied to dots when they sparkle.

Default"#d35af8"

sparkleSizenumber

Size multiplier applied to a dot at peak sparkle intensity.

Default1.6

sparkleSpeednumber

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

Default0.4

sparkleDensitynumber

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

Default0.015

classNamestring

Extra CSS classes forwarded to the wrapper div.

Default""

Crafted withbyMohammad Tasin