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.
What is Magnetic Cursor?
Elegant magnetic cursor with dual-layer spring physics and element attraction.
Magnetic Cursor at a glance
- Category
- Cursor Effects
- Pricing
- Free to use
- Libraries
- React
- Styling
- Tailwind CSS
- Configurable props
- 3
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Magnetic Cursor works
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.
Technical information for Magnetic Cursor
| Category | Cursor Effects |
|---|---|
| Libraries | React |
| Styling | Tailwind CSS |
| Rendering | CSS filters |
| State change | idle dot + halo to magnetic pull on data-magnetic elements |
| Props | 3 configurable |
| Usage example | Not published yet |
What Magnetic Cursor requires
- requestAnimationFrame spring physics loop
- Dual spring constants (dot vs halo)
- data-magnetic attribute element scanning
- Element transform application on proximity
- Default cursor hiding and cleanup on unmount
Magnetic Cursor questions
What is Magnetic Cursor?
Elegant magnetic cursor with dual-layer spring physics and element attraction.
How does Magnetic Cursor work?
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.
Which category does Magnetic Cursor belong to?
Magnetic Cursor is listed under Cursor Effects in the UI HUB catalog. Custom cursor components that replace the system pointer with something branded: magnetic attraction, trail effects, target reticles, blend modes and blob followers. Each one is pointer-aware and responsive, and exposes props for colour, smoothing and activation zones. Best used on portfolio and agency sites where the cursor becomes part of the identity.
What does the dotSize prop do in Magnetic Cursor?
Size of the inner cursor dot in pixels. It defaults to 6.
What does the haloSize prop do in Magnetic Cursor?
Size of the outer halo circle in pixels. It defaults to 40.
Is Magnetic Cursor free to use?
Magnetic Cursor is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Magnetic Cursor use?
Magnetic Cursor uses React and is styled with Tailwind CSS.
What does Magnetic Cursor need to run?
Magnetic Cursor needs requestAnimationFrame spring physics loop, Dual spring constants (dot vs halo), data-magnetic attribute element scanning and Element transform application on proximity.