Magnetic Cursor

Magnetic Cursor is a cursor effect in the UI HUB cursor effects collection. A dual-layer cursor with a snappy dot (high stiffness spring) and a lagging hollow halo (low stiffness). Elements with data-magnetic attribute are pulled toward the cursor when in range.

The component is driven by 3 documented props (dotSize, haloSize, magneticRange), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.

Implementation notes: requestAnimationFrame spring physics loop; Dual spring constants (dot vs halo); data-magnetic attribute element scanning.

Preview the cursor effect in the browser above, copy the source, and paste it into your project. Cursor Effects components in UI HUB are grouped by category so you can compare effects side by side before choosing one.