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

З виходом Opus 4.8 усе більше дизайнерів починають займатися Design Engineering, тому вирішив поділитися одним із патернів взаємодії, який дуже часто використовують досвідчені дизайнери:

Використовуйте не лише hover, а й реакцію на наближення курсора. Коли вказівник опиняється поруч із елементом, сусідні елементи можуть плавно збільшуватись і ставати темнішими залежно від відстані до курсора.

Так інтерфейс сприймається більш чуйним, менш бінарним і значно живішим.

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

Тут коефіцієнт t обчислюється на основі відстані між курсором і центром елемента. Чим ближче курсор, тим сильніше масштабування. Такий підхід нагадує ефект док‑панелі в macOS, де елементи реагують ще до безпосереднього наведення курсора.