GSAP Magnetic Card

<div class="gmc-card" id="gmc-card">
  <h3>Magnetic</h3>
  <p>Move your cursor</p>
</div>

.gmc-card {
  width: 240px;
  padding: 40px 32px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-radius: 16px;
  color: #e2e8f0;
  text-align: center;
  cursor: pointer;
}
.gmc-card h3 { margin: 0 0 4px; font-size: 20px; }
.gmc-card p { margin: 0; font-size: 12px; opacity: 0.5; }

const card = document.getElementById('gmc-card');
card.addEventListener('mousemove', function(e) {
  const rect = card.getBoundingClientRect();
  const x = e.clientX - rect.left - rect.width / 2;
  const y = e.clientY - rect.top - rect.height / 2;
  gsap.to(card, { x: x * 0.2, y: y * 0.2, rotation: x * 0.02, duration: 0.4, ease: 'power2.out' });
});
card.addEventListener('mouseleave', function() {
  gsap.to(card, { x: 0, y: 0, rotation: 0, duration: 0.8, ease: 'elastic.out(1, 0.4)' });
});