Magnetic Card

A subtle hover interaction where cards react to pointer proximity, creating a sense of depth without heavy animations or external libraries.

Interactive Card

This card reacts to pointer movement.

HTML

<div class="magnetic-card">
  <h3>Interactive Card</h3>
  <p>This card reacts to pointer movement.</p>
</div>

CSS

.magnetic-card {
  padding: 32px;
  border-radius: 16px;
  transition: transform 180ms ease;
}

JavaScript

card.addEventListener('mousemove', e => {
  card.style.transform = 'translate(...)';
});
  • Tech used Vanilla JS, WordPress-ready, No dependencies
  • Integration level Easy (drop-in)
  • Performance safe Yes

What it solves

Adds perceived responsiveness to static UI elements, improving engagement in feature grids and dashboards while remaining lightweight and performance-safe.

This experiment explores how small, physics-inspired interactions can improve user perception without adding visual noise.

The magnetic effect is intentionally subtle: the button never breaks its layout or becomes unpredictable. Instead, it gently reacts to cursor proximity, reinforcing the idea that the interface is responsive and aware of user intent.

This pattern works particularly well for:

  • Primary calls to action
  • Landing pages
  • Editorial or brand-driven websites
  • Interfaces where perceived quality matters more than speed of execution

The goal is not to surprise, but to guide attention in a natural and almost subconscious way.