What is Magnetic Cursor?

Magnetic Cursor makes UI elements (buttons, links) subtly move toward cursor as it approaches, creating magnetic attraction effect. Uses JavaScript to calculate distance and translate elements. Adds playful premium feel. Popular in modern web design.

When Should You Use This?

Use magnetic cursor for hero CTAs, navigation links, or key interactive elements. Works well for creative agencies, portfolios, and modern SaaS. Best applied selectively to important buttons. Desktop only (no cursor on mobile).

Common Mistakes to Avoid

• •Too strong—magnetism should be subtle (max 20-30px movement); strong pulls disorient
• •Everything magnetic—only magnetize important elements; too many creates chaos
• •Performance issues—calculate on every mousemove; throttle/debounce for performance
• •Missing accessibility—some users find magnetic effects disorienting; consider toggle
• •Mobile ignorance—no cursor on mobile; effect simply doesn't apply

Real-World Examples

• •Apple—occasionally uses magnetic effects for important CTAs
• •Agency sites—creative agencies use magnetic cursors to showcase interaction design
• •Portfolio sites—designers add magnetic effects to project cards and CTAs
• •Modern SaaS—Linear and similar products use subtle magnetic buttons