Magnetic

Wrap a button and it leans toward a nearby pointer, then gives a soft press when clicked.

Move around the button · click to press

pnpm dlx shadcn@latest add @latheui/magnetic

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Magnetic is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native div attributes. It renders an inline-block wrapper.

Prop	Type	Default	Description
strength	number	0.22	Share of the pointer's distance the content follows. 0 stays put, 1 sticks to the pointer.
range	number	60	How far past its edges the pull reaches, in pixels.

Only the wrapper moves. The button inside keeps its role, name, focus and keyboard behavior.
The pull follows a mouse or pen. Touch gets the press, without the pull.

The content follows the latest pointer position once per animation frame with quick, refresh-rate-independent smoothing, then eases home when the pointer leaves the range.
A press scales it to 90% and back over 500ms without replacing its pointer offset.
With reduced motion, nothing moves.

<Magnetic strength={0.4} range={24}>
  <Button size="icon" aria-label="Like"><HeartIcon /></Button>
</Magnetic>