Док-увеличение

Плитки растут по гауссовой кривой вокруг курсора — как док макоси.

Ведите мышью вдоль ряда.

ведите мышью вдоль ряда

Код

<div class="dock">
  <i></i><i></i><i></i><i></i><i></i>
</div>

<style>
.dock { display: flex; align-items: flex-end; gap: 10px; }
.dock i { width: 58px; aspect-ratio: 1;
  transform-origin: 50% 100%;              /* растут от «пола» */
  transition: transform .18s ease-out; }
</style>

<script>
var dock = document.querySelector(".dock");
var items = dock.querySelectorAll("i");
dock.addEventListener("pointermove", function (e) {
  items.forEach(function (it) {
    var r = it.getBoundingClientRect();
    var d = Math.abs(e.clientX - (r.left + r.width / 2));
    var k = Math.exp(-(d * d) / (2 * 90 * 90));  // гауссова кривая
    it.style.transform = "scale(" + (1 + k * .65) + ")";
  });
});
dock.addEventListener("pointerleave", function () {
  items.forEach(function (it) { it.style.transform = ""; });
});
</script>

Промпт для ИИ

Сделай док-увеличение как в macOS: ряд плиток (flex, align-items:flex-end, transform-origin 50% 100%); на pointermove каждая масштабируется по гауссовой кривой от расстояния центра плитки до курсора: k = exp(-d²/(2·90²)), scale = 1 + k*0.65 — ближайшая растёт сильнее, соседи по колоколу, дальние не шевелятся. transition 0.18s ease-out сглаживает. На уходе курсора всё в scale(1). Тачам — без эффекта.