Magnetic
A slight pull toward the pointer, bounded so the target stays where the user aimed.
@luc/ui/motionLive preview
A modest pull: a control that chases the cursor is harder to click than one that leans toward it.
<Magnetic strength={0.18} radius={160}>
<Button variant="secondary">Lean toward the cursor</Button>
</Magnetic>Other configurations
The same primitive, arranged differently. Each snippet is printed from the props its preview above was rendered with.
A whisper of pull
The lowest setting that still reads as motion; the radius is how far away the pull begins.
<Magnetic strength={0.06} radius={220}>
<Button variant="secondary">Barely leans</Button>
</Magnetic>On a primary action
A filled action carries the pull better than a quiet one — the same physics, a different amount of surface to move.
<Magnetic strength={0.22} radius={120}>
<Button variant="primary">Run the sweep</Button>
</Magnetic>Usage
import { Magnetic } from "@luc/ui/motion";<Magnetic strength={0.18} radius={160}>
<Button variant="secondary">Lean toward the cursor</Button>
</Magnetic>API
| Export | Kind | Signature |
|---|---|---|
Magnetic | 5 documented props | ({ className, children, strength, radius, childDepth, preset, disabled, ...props }: MagneticProps) => import("@types/react").JSX.Element |
Magnetic props
Type: MagneticProps
Values the compiler reads from the declaration.
| Prop | Type | Default | Notes |
|---|---|---|---|
childDepth? | number | undefined | — | Extra travel for the child slot (`1` = the body and the child move alike). |
disabled? | boolean | undefined | — | |
preset? | SpringPresetName | undefined | — | |
radius? | number | undefined | — | Distance, in px, beyond which the pull fades out. |
strength? | number | undefined | — | Fraction of the pointer offset the target follows (0..1). The house default is deliberately modest — a control that chases the cursor is harder to click than one that leans toward… |
Accessibility
The accessibility contract is the one the primitive underneath the component already honours — the platform element for a control, or the ARIA pattern the component implements — and the Showcase's own pages are scanned for violations with axe.
What happens on the server, and when hydration changes it.
Family
Feedback
A press, a change, a selection — acknowledged without shouting.
Related