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.

gridSpacingnumber

Pixel distance between grid intersection points.

Default28

curveStrengthnumber

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

Default0

diagonalsboolean

Draw diagonal lines across each grid cell.

Defaultfalse

repelRadiusnumber

Cursor influence radius in pixels.

Default100

forcenumber

Maximum pixel displacement applied at the cursor centre.

Default14

easeSpeednumber

Lerp factor per frame — higher = snappier response.

Default0.1

dampingnumber

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

Default0.85

springKnumber

Spring constant that pulls nodes back to their origin.

Default0.08

waveAmplitudenumber

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

Default0

waveSpeednumber

Speed multiplier for the wave animation.

Default1

ambientNoiseboolean

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

Defaultfalse

ambientNoiseAmplitudenumber

Pixel amplitude of the ambient noise.

Default4

ambientNoiseSpeednumber

Speed multiplier of the ambient noise oscillation.

Default0.3

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

Idle animation applied to the grid continuously.

Default"none"

animationSpeednumber

Speed multiplier for the chosen animation mode.

Default1

animationIntensitynumber

Intensity / amplitude multiplier for the chosen animation mode.

Default1

lineWidthnumber

Base stroke width in pixels.

Default1

glowIntensitynumber

Glow brightness near the cursor (0–1).

Default0.7

glowBlurnumber

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

Default0

lineColorstring

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

Default"#d35af8"

glowColorstring

Line colour at maximum glow intensity.

Default"#b8a0ff"

backgroundColorstring

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

Default"transparent"

colorMode"solid" | "gradient" | "rainbow"

Line colour strategy.

Default"solid"

gradientColorsstring[]

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

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

gradientDirection"horizontal" | "vertical" | "diagonal" | "radial"

Direction of the gradient or rainbow sweep.

Default"horizontal"

rainbowSpeednumber

Hue cycle speed when colorMode is "rainbow".

Default0.2

rainbowSaturationnumber

HSL saturation for rainbow mode (0–1).

Default0.7

rainbowLightnessnumber

HSL lightness for rainbow mode (0–1).

Default0.6

vignetteboolean

Overlay a radial vignette that fades toward the edges.

Defaultfalse

vignetteStrengthnumber

Vignette opacity (0–1).

Default0.6

pulseOnClickboolean

Emit a ripple pulse outward from the click position.

Defaultfalse

classNamestring

Extra CSS classes forwarded to the wrapper div.

Default""

styleobject

Inline styles forwarded to the wrapper div.

Default{}

Crafted withbyMohammad Tasin