<div class="ng-stage">
  <p class="ng-hint">Hover any icon — it pulls its nearest neighbors toward itself</p>
  <div class="ng-grid" id="ngGrid">
    <button class="ng-icon" data-label="Home">🏠</button>
    <button class="ng-icon" data-label="Search">🔍</button>
    <button class="ng-icon" data-label="Heart">❤️</button>
    <button class="ng-icon" data-label="Star">⭐</button>
    <button class="ng-icon" data-label="Bell">🔔</button>
    <button class="ng-icon" data-label="Mail">✉️</button>
    <button class="ng-icon" data-label="Camera">📷</button>
    <button class="ng-icon" data-label="Music">🎵</button>
    <button class="ng-icon" data-label="Gift">🎁</button>
    <button class="ng-icon" data-label="Settings">⚙️</button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0b0f1a; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.ng-stage { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 24px; }
.ng-hint { font-size: 13px; color: #64748b; text-align: center; max-width: 320px; }

.ng-grid {
  display: grid;
  grid-template-columns: repeat(5, 56px);
  gap: 18px;
}

.ng-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: #161d2e;
  border: 1px solid #263047;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  will-change: transform;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ng-icon:hover { background: #1c2540; border-color: #6366f1; box-shadow: 0 8px 24px rgba(99,102,241,0.35); z-index: 2; }

// Hovering one icon pulls every OTHER icon a little toward it, based on how
// close each neighbor's grid position is to the hovered one — this is a
// neighbor-to-neighbor attraction, not a cursor-to-dot field like a magnetic
// grid of dots. Distance is measured in actual layout pixels via
// getBoundingClientRect, and closer neighbors move proportionally more.
var icons = Array.prototype.slice.call(document.querySelectorAll('.ng-icon'));
var MAX_REACH = 170;   // neighbors farther than this (px) are unaffected
var MAX_PULL = 14;     // max pixels a fully-adjacent neighbor moves

function centers() {
  return icons.map(function (el) {
    var r = el.getBoundingClientRect();
    return { el: el, cx: r.left + r.width / 2, cy: r.top + r.height / 2 };
  });
}

icons.forEach(function (icon) {
  icon.addEventListener('mouseenter', function () {
    var pts = centers();
    var hovered = pts.find(function (p) { return p.el === icon; });

    pts.forEach(function (p) {
      if (p.el === icon) {
        p.el.style.transform = 'scale(1.12)';
        return;
      }
      var dx = hovered.cx - p.cx;
      var dy = hovered.cy - p.cy;
      var dist = Math.sqrt(dx * dx + dy * dy);
      if (dist > MAX_REACH || dist === 0) {
        p.el.style.transform = 'scale(1)';
        return;
      }
      var falloff = 1 - dist / MAX_REACH; // 1 = adjacent, 0 = at max reach
      var pull = falloff * MAX_PULL;
      var ux = dx / dist, uy = dy / dist;
      p.el.style.transform = 'translate(' + (ux * pull).toFixed(2) + 'px,' + (uy * pull).toFixed(2) + 'px)';
    });
  });

  icon.addEventListener('mouseleave', function () {
    icons.forEach(function (el) { el.style.transform = 'translate(0,0) scale(1)'; });
  });
});