Preferences

Mouse Repel Grid

Customize

Grid Spacing28

Curve Strength0

Line Width1.8

Repel Radius100

Force14

Ease Speed0.1

Spring K0.08

Damping0.85

Wave Amplitude0

Ambient Amplitude4

Ambient Speed0.3

Glow Intensity0.7

Glow Blur0

Vignette Strength0.6

Wave Speed1

Rainbow Speed0.2

Rainbow Saturation0.7

Rainbow Lightness0.6

Animation Speed1

Animation Intensity1

Props

Property	Type	Default	Description
`gridSpacing`	number	`28`	Pixel distance between grid intersection points.
`curveStrength`	number	`0`	Barrel-distortion amount applied to the resting grid (0 = flat).
`diagonals`	boolean	`false`	Draw diagonal lines across each grid cell.
`repelRadius`	number	`100`	Cursor influence radius in pixels.
`force`	number	`14`	Maximum pixel displacement applied at the cursor centre.
`easeSpeed`	number	`0.1`	Lerp factor per frame — higher = snappier response.
`damping`	number	`0.85`	Velocity damping per frame (0–1). Lower = bouncier.
`springK`	number	`0.08`	Spring constant that pulls nodes back to their origin.
`waveAmplitude`	number	`0`	Vertical wave offset amplitude in pixels (0 = disabled).
`waveSpeed`	number	`1`	Speed multiplier for the wave animation.
`ambientNoise`	boolean	`false`	Add per-node sinusoidal noise for an organic breathing look.
`ambientNoiseAmplitude`	number	`4`	Pixel amplitude of the ambient noise.
`ambientNoiseSpeed`	number	`0.3`	Speed multiplier of the ambient noise oscillation.
`animationMode`	"none" \| "breathing" \| "pulse-glow" \| "shimmer" \| "auto-ripple"	`"none"`	Idle animation applied to the grid continuously.
`animationSpeed`	number	`1`	Speed multiplier for the chosen animation mode.
`animationIntensity`	number	`1`	Intensity / amplitude multiplier for the chosen animation mode.
`lineWidth`	number	`1`	Base stroke width in pixels.
`glowIntensity`	number	`0.7`	Glow brightness near the cursor (0–1).
`glowBlur`	number	`0`	Canvas shadowBlur radius for a soft bloom effect (0 = disabled).
`lineColor`	string	`"#d35af8"`	Base line colour (hex / rgb / CSS variable).
`glowColor`	string	`"#b8a0ff"`	Line colour at maximum glow intensity.
`backgroundColor`	string	`"transparent"`	Canvas background. Use "transparent" to inherit the parent background.
`colorMode`	"solid" \| "gradient" \| "rainbow"	`"solid"`	Line colour strategy.
`gradientColors`	string[]	`["#5a4cff","#d35af8"]`	Two or more hex stops used when colorMode is "gradient".
`gradientDirection`	"horizontal" \| "vertical" \| "diagonal" \| "radial"	`"horizontal"`	Direction of the gradient or rainbow sweep.
`rainbowSpeed`	number	`0.2`	Hue cycle speed when colorMode is "rainbow".
`rainbowSaturation`	number	`0.7`	HSL saturation for rainbow mode (0–1).
`rainbowLightness`	number	`0.6`	HSL lightness for rainbow mode (0–1).
`vignette`	boolean	`false`	Overlay a radial vignette that fades toward the edges.
`vignetteStrength`	number	`0.6`	Vignette opacity (0–1).
`pulseOnClick`	boolean	`false`	Emit a ripple pulse outward from the click position.
`className`	string	`""`	Extra CSS classes forwarded to the wrapper div.
`style`	object	`{}`	Inline styles forwarded to the wrapper div.

gridSpacing

Typenumber

Default28

Pixel distance between grid intersection points.

curveStrength

Typenumber

Default0

Barrel-distortion amount applied to the resting grid (0 = flat).

diagonals

Typeboolean

Defaultfalse

Draw diagonal lines across each grid cell.

repelRadius

Typenumber

Default100

Cursor influence radius in pixels.

force

Typenumber

Default14

Maximum pixel displacement applied at the cursor centre.

easeSpeed

Typenumber

Default0.1

Lerp factor per frame — higher = snappier response.

damping

Typenumber

Default0.85

Velocity damping per frame (0–1). Lower = bouncier.

springK

Typenumber

Default0.08

Spring constant that pulls nodes back to their origin.

waveAmplitude

Typenumber

Default0

Vertical wave offset amplitude in pixels (0 = disabled).

waveSpeed

Typenumber

Default1

Speed multiplier for the wave animation.

ambientNoise

Typeboolean

Defaultfalse

Add per-node sinusoidal noise for an organic breathing look.

ambientNoiseAmplitude

Typenumber

Default4

Pixel amplitude of the ambient noise.

ambientNoiseSpeed

Typenumber

Default0.3

Speed multiplier of the ambient noise oscillation.

animationMode

Type"none" | "breathing" | "pulse-glow" | "shimmer" | "auto-ripple"

Default"none"

Idle animation applied to the grid continuously.

animationSpeed

Typenumber

Default1

Speed multiplier for the chosen animation mode.

animationIntensity

Typenumber

Default1

Intensity / amplitude multiplier for the chosen animation mode.

lineWidth

Typenumber

Default1

Base stroke width in pixels.

glowIntensity

Typenumber

Default0.7

Glow brightness near the cursor (0–1).

glowBlur

Typenumber

Default0

Canvas shadowBlur radius for a soft bloom effect (0 = disabled).

lineColor

Typestring

Default"#d35af8"

Base line colour (hex / rgb / CSS variable).

glowColor

Typestring

Default"#b8a0ff"

Line colour at maximum glow intensity.

backgroundColor

Typestring

Default"transparent"

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

colorMode

Type"solid" | "gradient" | "rainbow"

Default"solid"

Line colour strategy.

gradientColors

Typestring[]

Default["#5a4cff","#d35af8"]

Two or more hex stops used when colorMode is "gradient".

gradientDirection

Type"horizontal" | "vertical" | "diagonal" | "radial"

Default"horizontal"

Direction of the gradient or rainbow sweep.

rainbowSpeed

Typenumber

Default0.2

Hue cycle speed when colorMode is "rainbow".

rainbowSaturation

Typenumber

Default0.7

HSL saturation for rainbow mode (0–1).

rainbowLightness

Typenumber

Default0.6

HSL lightness for rainbow mode (0–1).

vignette

Typeboolean

Defaultfalse

Overlay a radial vignette that fades toward the edges.

vignetteStrength

Typenumber

Default0.6

Vignette opacity (0–1).

pulseOnClick

Typeboolean

Defaultfalse

Emit a ripple pulse outward from the click position.

className

Typestring

Default""

Extra CSS classes forwarded to the wrapper div.

style

Typeobject

Default{}

Inline styles forwarded to the wrapper div.

Crafted withbyMohammad Tasin