Pointerstable

Lodestone

Magnetic buttons that lean toward the pointer but never overlap each other.

Customize

Magnethow each button reacts to a nearby pointer

Radius150 pxradius

Strength0.500strength

Max displacement30 pxmaxDisplacement

Return speed0.160release

Lift0.050lift

Layoutcrowd the buttons to prove they cannot overlap

Minimum gap12 pxminGap

Buttons4buttons

Rest spacing18 pxspacing

TSX

import { Lodestone } from "zerogravity"

<Lodestone>
    Get started
</Lodestone>

Generated from the controls above. Only props that differ from their defaults are shown.

7 documented props on Lodestone
Property	Type	Default	Description
`radius`	`number`	`150`	Radius. Range 40 to 400 px.
`strength`	`number`	`0.5`	Strength. Range 0 to 1.
`maxDisplacement`	`number`	`30`	Max displacement. Range 0 to 80 px.
`release`	`number`	`0.16`	Return speed. Range 0.02 to 1.
`lift`	`number`	`0.05`	Lift. Range 0 to 0.3.
`minGap`	`number`	`12`	Minimum gap. Range 0 to 40 px.
`children`	`ReactNode`	`—`	Button label.

0 external runtime dependencies

Ships with nothing but React.