Шлейф картинок

<section class="trail" data-imgs="a.jpg|b.jpg|c.jpg">
  <h1>Заголовок</h1>
</section>

<style>
.trail { position: relative; overflow: hidden; }
.tr-img { position: absolute; width: 150px; aspect-ratio: 3/4;
  object-fit: cover; pointer-events: none; translate: -50% -50%;
  animation: trIn .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes trIn {
  0%   { opacity: 0; transform: scale(.5) rotate(var(--rot)); }
  18%  { opacity: 1; transform: scale(1) rotate(var(--rot)); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scale(.92) translateY(26px); } }
</style>

<script>
var stage = document.querySelector(".trail");
var srcs = stage.getAttribute("data-imgs").split("|");
var i = 0, lx = 0, ly = 0;
stage.addEventListener("pointermove", function (e) {
  var r = stage.getBoundingClientRect();
  var x = e.clientX - r.left, y = e.clientY - r.top;
  if (Math.hypot(x - lx, y - ly) < 110) return;  // новая карточка каждые 110px пути
  lx = x; ly = y;
  var img = document.createElement("img");
  img.className = "tr-img";
  img.src = srcs[i++ % srcs.length];
  img.style.left = x + "px"; img.style.top = y + "px";
  img.style.setProperty("--rot", (Math.random() * 14 - 7) + "deg");
  stage.appendChild(img);
  setTimeout(function () { img.remove(); }, 950);
});
</script>

Сделай шлейф картинок за курсором (image trail, любимый приём студий): на pointermove по секции, если курсор прошёл больше 110px от последней точки — создаётся img в этой позиции (absolute, translate -50%/-50%, случайный поворот ±7°) со сквозной анимацией: появление scale .5→1 к 18%, удержание, растворение со сдвигом вниз к 100% за 0.9s; элемент удаляется по завершении. Картинки берутся по кругу из списка. На тач-устройствах не включать.