05 Magnetic Target. 5 of 95.
05/TARGET ACQUISITION/5 of 95
Magnetic Target
The control can help the cursor arrive.
Best experienced with a pointer.
The problem
Tiny targets are hard to land on, so you overshoot, undershoot, and correct before finally clicking.
The solution
When the pointer enters an attraction radius, the target subtly moves toward the pointer.
Experiment
Play with the values
48px
0.35
12px
0.7
How it works
- The pointer approaching a control is measured before it has to land exactly on the visible shape.
- Inside an attraction radius, the control starts helping the cursor arrive.
- A force vector points from the control toward the pointer, scaled by how close it is.
- The target shifts a small amount along that vector so the hit feels easier without jumping.
- Once the pointer leaves the radius, the control eases back to its resting place.
Seen in
Icon buttons
Small toolbar icons subtly pull toward the cursor so you land the click without overshooting.
Map pins
Tiny geographic markers shift slightly to meet your pointer inside an attraction radius.
Slider thumbs
Draggable handles assist acquisition when your cursor approaches from an angle.
Touch targets
On hybrid devices, magnetic pull compensates for imprecise pointer or stylus input.