Building a Magnetic Cursor Effect That Actually Feels Good: A Deep Dive into Physics-Based Web Interactions

Hey Hashnode fam! 👋

Ever noticed how luxury brand websites have those satisfying magnetic cursors that just feel right? I went down a rabbit hole trying to recreate this effect and learned way more about physics, performance, and human perception than I expected.

In this deep dive, I'm sharing everything: from the basic physics equations to the weird edge cases nobody talks about (like why your magnetic effect breaks when users scroll without moving their mouse).

What You'll Learn:

• How to implement realistic magnetic forces using GSAP and Next.js 15

• Why my first attempt at strength 0.7 was hilariously wrong

• The secret to edge-only magnetism for large cards

• Performance optimizations that keep everything at 60fps

• Those tiny details that separate "meh" from "magical"

Quick Preview:

typescript

// The force equation that powers everything
const magneticForce = (distance: number, threshold: number): number => {
  if (distance >= threshold) return 0;
  return 1 - distance / threshold;
};

Whether you're building your portfolio or working on client projects, these techniques will level up your interaction game. Plus, I'm sharing all the strength values that actually work in production (spoiler: they're way smaller than you think).

Let's dive in! And if you implement your own version, drop a comment – I'd love to see what you create!

Find the tutorial, demo and codebase here: https://www.100daysofcraft.com/blog/motion-interactions/building-a-magnetic-cursor-effect