Design Engineering: реакція елементів на наближення курсора в Opus 4.8

З виходом 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, де елементи реагують ще до безпосереднього наведення курсора.