A magnetic effect makes an element lean toward the cursor as it approaches. It is one of the few pointer effects that reads as craft rather than as decoration, because it makes a target feel easier to hit, and on a page with one important button that impression is worth something.
16 public components on 21st have "magnetic" in the name. The technique is a dozen lines; the reasons it goes wrong are worth more than the code.
The components
Magnetic by ibelick is the general wrapper, applying the effect to whatever it contains. Magnetic Button by bundui is the button version, and Fluid Magnetic Cursor by Hossain Jahed is the physics-based cursor follower, where the pointer itself is replaced.
Magnetic Dock by Dhileep Kumar GM, Magnetic Dock by rmahammad and Magnetic Dock by componentry are the macOS-style bars where icons swell and neighbours yield, which the mobile navigation guide notes is a desktop idea that does not survive touch.
How it works
Measure the element's centre, take the pointer position, and translate the element by a fraction of the distance between them while the pointer is within a radius. Release on leave, with a spring or an ease so it settles rather than snapping.
Three implementation details separate a good one from a jittery one.
Track on a container, not per element. A page with twelve magnetic items and twelve mousemove listeners is twelve handlers on every frame. One listener on a parent, with the coordinates passed down, is the same effect at a twelfth of the cost - the same argument the card guide makes about pointer-tracked highlights.
Animate the transform, not the position. translate3d stays on the compositor; left and top do not.
Cap the displacement. More than about 20 pixels and the element stops feeling attracted and starts feeling detached from its own hitbox, which is the opposite of the intended effect.
Where it breaks
Touch has no cursor. The effect simply does not exist on a phone, so the element must be complete without it. That is fine for an enhancement and fatal if the movement is how someone was supposed to notice the button.
The hitbox moves. An element that leans away from where it was drawn can be missed by a fast click. Keep the displacement small, and never apply it to something that must be hit precisely.
It is motion. Under prefers-reduced-motion: reduce, do not attach the listener at all.
It costs when multiplied. One magnetic hero button is free. A grid of twenty magnetic cards is a frame budget, per the animation cost model.
The custom-cursor cousin
Replacing the pointer entirely is a bigger commitment than making an element lean, and the custom cursor guide covers it properly: the native cursor carries meaning - text, pointer, resize, not-allowed - and a replacement has to reproduce all of it or the interface stops explaining itself.
The magnetic effect is the smaller, safer half of that family: it adds feedback without taking anything away.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| A dozen lines of CSS and a pointer handler | The whole effect, honestly | You write the spring |
| Motion | Spring physics that settle properly | A runtime for one effect |
| 21st | Wrappers, buttons, docks and cursor followers | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- How does a magnetic effect work?
- Measure the element's centre, take the pointer position, and translate the element by a fraction of the distance between them while the pointer is within a radius, releasing with a spring on leave. It is about a dozen lines, and the quality is in the falloff and the settle.
- Why does a page with many magnetic elements feel slow?
- Usually one mousemove listener per element, each running on every frame. Track on a shared container and pass the coordinates down, and animate transforms rather than position, so the work stays on the compositor.
- How much should a magnetic element move?
- Not more than about twenty pixels. Past that it stops feeling attracted and starts feeling detached from its own hitbox, so a fast click can miss it, which is the opposite of the effect's purpose.
- What happens to magnetic effects on touch?
- Nothing, because there is no cursor. The element has to be complete without the effect, which is fine for an enhancement and fatal if the movement was how someone was supposed to notice the button. Skip the listener entirely under prefers-reduced-motion too.