Мышиный параллакс

Сцена дрейфует за курсором: у каждого элемента своя сила. Движение через лерп, поэтому оно мягкое.

Водите мышью по экрану.

ведите мышью

Код

<section class="hero">
  <div class="bg"   data-m="14">фоновое фото</div>
  <img  class="card" data-m="34" src="a.jpg">
  <img  class="card" data-m="52" src="b.jpg">
  <h1   data-m="8">Заголовок</h1>
</section>

<script>
var mice = [].map.call(document.querySelectorAll("[data-m]"), function (el) {
  return { el: el, k: +el.getAttribute("data-m"), x: 0, y: 0 };
});
var mx = 0, my = 0;
addEventListener("pointermove", function (e) {
  mx = e.clientX / innerWidth - 0.5;    // -0.5 .. 0.5
  my = e.clientY / innerHeight - 0.5;
}, { passive: true });

function loop() {
  mice.forEach(function (m) {
    m.x += (mx * m.k - m.x) * 0.06;     // мягкий лерп
    m.y += (my * m.k - m.y) * 0.06;
    m.el.style.transform = "translate3d(" + m.x + "px," + m.y + "px,0)";
  });
  requestAnimationFrame(loop);
}
if (!matchMedia("(prefers-reduced-motion: reduce)").matches)
  requestAnimationFrame(loop);
</script>

Промпт для ИИ

Добавь в hero-секцию мышиный параллакс как на thisisstudiox.com: фоновое фото и плавающие карточки дрейфуют за курсором, каждый элемент со своей силой в атрибуте data-m (px): фон 12-16, карточки 30-50, заголовок 6-10. Нормализуй позицию курсора к диапазону -0.5..0.5; в rAF-цикле лерпом (фактор 0.06) веди каждый элемент к target = курсор * сила, применяй translate3d. Без transition — только лерп. Отключай при prefers-reduced-motion и на тач-устройствах.