Proximity‑Based Cursor Effects: Scaling UI Elements with Opus 4.8

With the release of Opus 4.8, more and more designers are getting into Design Engineering, so I decided to share one of the interaction patterns that experienced designers use very often:

Use not only hover, but also a reaction to the cursor’s proximity. When the pointer is near an element, neighboring elements can smoothly enlarge and become darker depending on the distance to the cursor.

This makes the interface feel more responsive, less binary, and much livelier.

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;
 });

Here the coefficient t is calculated based on the distance between the cursor and the center of the element. The closer the cursor, the stronger the scaling. This approach resembles the dock‑panel effect in macOS, where elements react even before the cursor actually hovers over them.