Nav Magnetic Links Playful — Motion Lab

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: nav-magnetic-links-playful
import gsap from 'https://esm.sh/[email protected]';
document.querySelectorAll('[data-magnetic]').forEach(el => {
  el.addEventListener('mousemove', e => {
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left - r.width / 2) * 0.4;
    const y = (e.clientY - r.top - r.height / 2) * 0.4;
    gsap.to(el, { x, y, duration: 0.7, ease: 'back.out(1.7)' });
  });
  el.addEventListener('mouseleave', () => gsap.to(el, { x: 0, y: 0, duration: 1.0, ease: 'back.out(1.7)' }));
});

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: nav-magnetic-links-playful -->
<nav>
  <a data-magnetic href="#">Link 1</a>
  <a data-magnetic href="#">Link 2</a>
</nav>

3. Styling-template — verplicht eigen invulling per merk

/* Styling: nav-magnetic-links-playful */
[data-magnetic] { display: inline-block; padding: 0.5rem 1.5rem; border-radius: 999px; background: #FF4A1C; color: white; }

Hover the pills — they follow your cursor with a playful bounce.