Pixel Magnet

A cursor trail that magnetises the pixels it passes through

pixel-magnet-tw

Customize

Count

Seed

1.00

Resolution

100

Speed

1.00

Spread

1.00

Size Spread

1.5

Falloff

1.05

Falloff Curve

0.50

Opacity

1.00

Color

Hot Color

Background

Cursor Interaction

10.5

Velocity Activation

Velocity Scale

1.6

Idle Strength

0.00

Decay

1.2

Paused

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width.
`height`	string \| number	`"100%"`	Container height.
`className`	string	`undefined`	Additional CSS classes.
`children`	ReactNode	`undefined`	Content rendered above the effect.
`count`	number	`25`	Number of squares in the swarm.
`seed`	number	`1`	Starting seed. Change it for a different arrangement.
`resolution`	number	`100`	Grid the squares snap to. Higher values give smaller squares.
`flow`	"contract" \| "expand"	`"contract"`	Whether squares fall inward or fly outward.
`speed`	number	`1`	How fast the swarm cycles.
`spread`	number	`1`	Radius of the swarm relative to half the container height.
`sizeSpread`	number	`1.5`	Extra size added to the largest squares.
`falloff`	number	`1.05`	Radius at which the swarm fades out.
`falloffCurve`	number	`0.5`	Softness of that fade.
`color`	string	`"#16a34a"`	Colour of the slowest squares.
`hotColor`	string	`"#bbf7d0"`	Colour of the fastest squares.
`backgroundColor`	string	`"#0a0a0a"`	Background fill colour. Accepts "transparent".
`blendMode`	"normal" \| "additive"	`"normal"`	How squares combine where they overlap.
`opacity`	number	`1`	Master alpha, from 0 to 1.
`cursorInteraction`	boolean	`true`	Let the swarm follow the pointer.
`follow`	number	`10.5`	How quickly the swarm catches up with the pointer.
`velocityActivation`	boolean	`true`	Drive the swarm with pointer speed.
`velocityScale`	number	`1.6`	Pointer speed needed to reach full strength.
`idleStrength`	number	`0`	Strength the swarm holds while the pointer rests.
`decay`	number	`1.2`	How quickly the swarm fades once the pointer stops. Lower values linger.
`dpr`	number	`2`	Upper bound on device pixel ratio.
`paused`	boolean	`false`	Hold the animation still.

widthstring | number

Container width.

Default"100%"

heightstring | number

Container height.

Default"100%"

classNamestring

Additional CSS classes.

Defaultundefined

childrenReactNode

Content rendered above the effect.

Defaultundefined

countnumber

Number of squares in the swarm.

Default25

seednumber

Starting seed. Change it for a different arrangement.

Default1

resolutionnumber

Grid the squares snap to. Higher values give smaller squares.

Default100

flow"contract" | "expand"

Whether squares fall inward or fly outward.

Default"contract"

speednumber

How fast the swarm cycles.

Default1

spreadnumber

Radius of the swarm relative to half the container height.

Default1

sizeSpreadnumber

Extra size added to the largest squares.

Default1.5

falloffnumber

Radius at which the swarm fades out.

Default1.05

falloffCurvenumber

Softness of that fade.

Default0.5

colorstring

Colour of the slowest squares.

Default"#16a34a"

hotColorstring

Colour of the fastest squares.

Default"#bbf7d0"

backgroundColorstring

Background fill colour. Accepts "transparent".

Default"#0a0a0a"

blendMode"normal" | "additive"

How squares combine where they overlap.

Default"normal"

opacitynumber

Master alpha, from 0 to 1.

Default1

cursorInteractionboolean

Let the swarm follow the pointer.

Defaulttrue

follownumber

How quickly the swarm catches up with the pointer.

Default10.5

velocityActivationboolean

Drive the swarm with pointer speed.

Defaulttrue

velocityScalenumber

Pointer speed needed to reach full strength.

Default1.6

idleStrengthnumber

Strength the swarm holds while the pointer rests.

Default0

decaynumber

How quickly the swarm fades once the pointer stops. Lower values linger.

Default1.2

dprnumber

Upper bound on device pixel ratio.

Default2

pausedboolean

Hold the animation still.

Defaultfalse