Magnetic Nav Items

<nav class="mag-nav">
  <a href="javascript:void(0)" class="mag-item">Home</a>
  <a href="javascript:void(0)" class="mag-item">Work</a>
  <a href="javascript:void(0)" class="mag-item">Contact</a>
</nav>

.mag-nav {
  display: flex;
  gap: 1.5rem;
}
.mag-item {
  font-size: 15px;
  font-weight: 500;
  color: #666;
  text-decoration: none;
  padding: 8px 4px;
  transition: color .2s, transform .2s cubic-bezier(.2,1,.3,1);
}
.mag-item:hover { color: #1a1a1a; }

document.querySelectorAll('.mag-item').forEach(item => {
  item.addEventListener('mousemove', e => {
    const rect = item.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    item.style.transform = `translate(${x * 0.25}px, ${y * 0.4}px)`;
  });
  item.addEventListener('mouseleave', () => {
    item.style.transform = 'translate(0, 0)';
  });
});