Cursor Magnify Dock

<nav aria-label="Dock" class="nuda-sb2-cursor-dock">
  <ul class="nuda-sb2-cursor-dock__list">
    <li><button type="button" class="nuda-sb2-cursor-dock__icon" style="background:#ff5e7a;--scale:1" aria-label="Files"></button></li>
    <li><button type="button" class="nuda-sb2-cursor-dock__icon" style="background:#ffb45e;--scale:1" aria-label="Mail"></button></li>
    <li><button type="button" class="nuda-sb2-cursor-dock__icon" style="background:#e4ff54;--scale:1" aria-label="Music"></button></li>
    <li><button type="button" class="nuda-sb2-cursor-dock__icon" style="background:#62b6ff;--scale:1" aria-label="Photos"></button></li>
    <li><button type="button" class="nuda-sb2-cursor-dock__icon" style="background:#9d6dff;--scale:1" aria-label="Terminal"></button></li>
  </ul>
</nav>

// True pointer-proximity magnification (not just :hover on neighbors)
const dock = document.querySelector('.nuda-sb2-cursor-dock');
const icons = [...dock.querySelectorAll('.nuda-sb2-cursor-dock__icon')];
const MAX_SCALE = 1.6;
const RADIUS = 90;

dock.addEventListener('mousemove', (e) => {
  icons.forEach((icon) => {
    const rect = icon.getBoundingClientRect();
    const center = rect.left + rect.width / 2;
    const dist = Math.abs(e.clientX - center);
    const scale = 1 + Math.max(0, 1 - dist / RADIUS) * (MAX_SCALE - 1);
    icon.style.setProperty('--scale', scale.toFixed(2));
  });
});

dock.addEventListener('mouseleave', () => {
  icons.forEach((icon) => icon.style.setProperty('--scale', '1'));
});

.nuda-sb2-cursor-dock {
  display: inline-block;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  backdrop-filter: blur(14px);
}

.nuda-sb2-cursor-dock__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.nuda-sb2-cursor-dock__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  transform: scale(var(--scale, 1)) translateY(calc((var(--scale, 1) - 1) * -14px));
  transition: transform .18s cubic-bezier(.16,1,.3,1);
  will-change: transform;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.35);
}

.nuda-sb2-cursor-dock__icon:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-sb2-cursor-dock__icon {
    transition: none;
    transform: none;
  }
}