С выходом Opus 4.8 всё больше дизайнеров начинают заниматься Design Engineering, поэтому решил поделиться одним из паттернов взаимодействия, который очень часто юзают опытные дизайнеры:

Используйте не только hover, но и реакцию на приближение курсора. Когда указатель оказывается рядом с элементом, соседние элементы могут плавно увеличиваться и становиться темнее в зависимости от расстояния до курсора.

Так интерфейс ощущается более отзывчивым, менее бинарным и гораздо более живым.

onpointermove = e =>
  document.querySelectorAll(".dock>*").forEach(el => {
    const r = el.getBoundingClientRect();
    const t = Math.max(
      0,
      1 - Math.abs(e.clientX - r.x - r.width / 2) / 120
    );

    el.style.scale = 1 + t * .5;
  });

Здесь коэффициент t вычисляется на основе расстояния между курсором и центром элемента. Чем ближе курсор, тем сильнее масштабирование. Такой подход напоминает эффект док-панели в macOS, где элементы реагируют ещё до непосредственного наведения курсора.