Proximity hover effects

Klasický :hover je binární — buď myš nad prvkem je, nebo ne. Proximity-based interakce sleduje vzdálenost kurzoru od každého prvku a aplikuje plynulý efekt podle této vzdálenosti. Výsledek působí responzivně a živě, podobně jako macOS Dock magnification.

Princip

Pro každý prvek se počítá vzdálenost mezi kurzorem a středem prvku. Z té se odvodí intenzita efektu (scale, opacity, filter, …) — typicky přes lineární rampu s prahem (např. 120 px), za kterým je efekt nulový.

Minimální implementace

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

• t je normalizovaná blízkost v intervalu [0, 1] (1 = kurzor přímo na středu, 0 = mimo dosah)
• 120 je práh v pixelech, kde efekt přechází do nuly
• scale = 1 + t * 0.5 znamená maximální zvětšení na 1.5× ve středu

Možnosti rozšíření

• 2D vzdálenost — počítat Math.hypot(dx, dy) místo jen horizontální složky
• Více vlastností — kombinovat scale, opacity, filter: brightness() pro „temnější” prvky dál od kurzoru
• Throttling — pro velké DOM kolekce použít requestAnimationFrame místo přímé manipulace ve pointermove
• CSS proměnné — místo el.style.scale nastavovat --proximity a efekt řešit v CSS (lépe se cachuje a animuje)

Kdy použít

• Doky, paletky nástrojů, navigační lišty s ikonami
• Galerie miniatur, kde uživatel skenuje obsah pohybem myši
• Hero sekce, kde má interakce dělat dojem

Naopak se nehodí pro běžné formuláře a textový obsah — efekt rozptyluje, když uživatel míří na konkrétní cíl.