KQ-1410 · LODESTONE

Lodestone

A magnetic wrapper whose still outer box measures the pointer while an inner layer leans toward it once it comes within radius of the child's own edges: it follows strength of the pointer's offset — most when close — eased into a limit, and tilts in perspective so the nearest side rises toward it, on a follow spring between springs.glide and springs.snap integrated per frame. Past the field's edge the bond breaks and it snaps home on springs.recoil with the velocity it had; a press seats it on springs.flick, and keyboard focus holds it steady with a small lift on springs.snap while a drop shadow falls away from the pull.

KQ-1410 · LODESTONE

Gaugeworks · Pro

Instruments that answer back.

at rest · bring the pointer near

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lodestone

Props

children: ReactNode; default —; What the lodestone pulls: a button, an icon, a card; it keeps its own role, focus and clicks.
radius: number; default 72; How far the pull reaches beyond the child's own edges, in CSS pixels.
strength: number; default 0.35; How much of the pointer's offset from the child's centre it follows, 0 to 1.
tilt: number; default 8; How far it tilts toward the pointer at most, in degrees.
limit: number; default 12; The most it travels, in CSS pixels; the pull eases into this cap.
lift: number; default 3; How far keyboard focus lifts it, in CSS pixels, while holding it steady.
shadow: number; default 0.5; The shadow that falls away from the pull and deepens with the lift, 0 to 1.
release: "recoil" | "snap" | "glide"; default "recoil"; The spring it snaps home on when the pointer leaves the field.
axis: "both" | "x" | "y"; default "both"; Which way it may travel.
pressable: boolean; default true; A press seats it: back toward the centre and down a little, until release.
interactive: boolean; default true; The pointer pulls it (mouse and pen; touch gets the resting state).
disabled: boolean; default false; No pull, no tilt, no press; it rests.
onPullChange: (pulled: boolean) => void; default —; Fires when the pointer enters or leaves the field, with whether it is now pulled.
as: "div" | "span"; default "div"; The wrapper's element: a div, or a span for inline use.
className: string; default —; Classes for the still outer box (its layout never moves).
innerClassName: string; default —; Classes for the moving inner layer.

Prop	Type	Default	Description
children	ReactNode	—	What the lodestone pulls: a button, an icon, a card; it keeps its own role, focus and clicks.
radius	number	72	How far the pull reaches beyond the child's own edges, in CSS pixels.
strength	number	0.35	How much of the pointer's offset from the child's centre it follows, 0 to 1.
tilt	number	8	How far it tilts toward the pointer at most, in degrees.
limit	number	12	The most it travels, in CSS pixels; the pull eases into this cap.
lift	number	3	How far keyboard focus lifts it, in CSS pixels, while holding it steady.
shadow	number	0.5	The shadow that falls away from the pull and deepens with the lift, 0 to 1.
release	"recoil" \| "snap" \| "glide"	"recoil"	The spring it snaps home on when the pointer leaves the field.
axis	"both" \| "x" \| "y"	"both"	Which way it may travel.
pressable	boolean	true	A press seats it: back toward the centre and down a little, until release.
interactive	boolean	true	The pointer pulls it (mouse and pen; touch gets the resting state).
disabled	boolean	false	No pull, no tilt, no press; it rests.
onPullChange	(pulled: boolean) => void	—	Fires when the pointer enters or leaves the field, with whether it is now pulled.
as	"div" \| "span"	"div"	The wrapper's element: a div, or a span for inline use.
className	string	—	Classes for the still outer box (its layout never moves).
innerClassName	string	—	Classes for the moving inner layer.