Magnet
magnetPulls child content toward the pointer within a configurable attraction radius.
Usage
Basic usage
Wrap any content, the pointer will be magnetically attracted to follow when it is close to the sensing area, and will return smoothly when it leaves.
<Magnet padding={100} magnetStrength={2}>
<button className="rounded-full bg-primary px-6 py-3 text-primary-foreground">
Pull me over
</button>
</Magnet>Strong suction
magnetStrength The smaller the value, the stronger the suction; when it is 1, the content almost sticks to the pointer.
<Magnet padding={140} magnetStrength={1}>
<button className="rounded-full bg-primary px-6 py-3 text-primary-foreground">
Strong magnetic attraction
</button>
</Magnet>Large sensing area + weak suction
padding Turn up the "long range sensing", magnetStrength turn it up to make the displacement more restrained.
<Magnet padding={180} magnetStrength={5}>
<span className="inline-flex h-16 w-16 items-center justify-center rounded-2xl border bg-surface shadow-md">
✦
</span>
</Magnet>Disable magnetic suction
Stop pulling when disabled, the content remains centered, and the structure of DOM remains unchanged.
<Magnet disabled>
<button className="rounded-full bg-primary px-6 py-3 text-primary-foreground">
Disabled
</button>
</Magnet>When to Use
Wrap a single interactive element—such as a button, icon, or CTA—when it should move toward a nearby pointer and return smoothly on leave. For an area-wide cursor or image trail, use GhostCursor or ImageTrail. Magnet inherits HTMLAttributes<HTMLDivElement> except children and forwards the remaining div attributes.
Import
import { Magnet } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| padding | number | 100 | Detection radius in pixels, extending beyond the element boundary |
| disabled | boolean | false | Disables attraction and returns the element smoothly to its origin without changing the DOM structure |
| magnetStrength | number | 2 | Attraction divisor: displacement = pointer-to-center distance / this value. Lower values are stronger; recommended range 1–6 |
| activeTransition | string | "transform 0.3s ease-out" | Transition while the element follows the pointer |
| inactiveTransition | string | "transform 0.5s ease-in-out" | Inactive state transition (when leaving homing) |
| wrapperClassName | string | — | Additional class name for the outer wrapper div |
| innerClassName | string | — | Forward the inner displacement div (carrying transform) additional className |
| style | CSSProperties | — | Inline styles forwarded to the outer wrapper div |
Also inherits all standard div properties of Omit<HTMLAttributes<HTMLDivElement>, "children">.Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Magnetic content (buttons, icons, cards, etc.) |
Usage Guidelines
magnetStrengthis a divisor, not a multiplier: the smaller the value, the stronger the suction force (=1 almost sticks to the pointer), don’t understand it the other way around.- Reduced-motion limits displacement and keeps the interaction subtle. Do not rely on magnetic movement for essential actions.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<Magnet
padding={100}
magnetStrength={2}
disabled={false}
>
<button className="rounded-full bg-primary px-6 py-3 text-primary-foreground">
Pull me over
</button>
</Magnet>