Images Following Mouse

Add Code Block to page and replace the image source

<div class="imageList">
  <img src="https://images.unsplash.com/photo-1561948955-570b270e7c36?crop=entropy&cs=srgb&fm=jpg&q=85" alt="Image 1">
  <img src="https://images.unsplash.com/photo-1612532275214-e4ca76d0e4d1?crop=entropy&cs=srgb&fm=jpg&q=85" alt="Image 2">
  <img src="https://images.unsplash.com/photo-1606509769472-7660d4a478ac?crop=entropy&cs=srgb&fm=jpg&q=85" alt="">
  <img src="https://images.unsplash.com/photo-1548366086-7f1b76106622?crop=entropy&cs=srgb&fm=jpg&q=85" alt="">
</div>

Custom CSS

<style>
  body {
    --imgMaxWidth: 133px;
    --speed: 1s;
    --delay: 0.1s;
  }

  @keyframes zoomOutFade {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.2);
    }
  }

  .droppedImage {
    position: absolute;
    max-width: var(--imgMaxWidth);
    border-radius: 10px;
    animation: zoomOutFade var(--speed) forwards cubic-bezier(0.16, 1, 0.3, 1);
    animation-delay: var(--delay);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
  }

  .imageList {
    display: none;
  }
</style>

Javascript — can be added to Code Block, Advanced Page Header Injection or Code Injection.

NOTE: no need to install JS library since this code is Vanilla

<script>
  document.addEventListener("DOMContentLoaded", function () {
    let images = Array.from(document.querySelector('.imageList')?.children || []);
    let lastImagePosition = { x: 0, y: 0 };
    let isAddingImage = false;

    function getDistance(x1, y1, x2, y2) {
      let dx = x2 - x1;
      let dy = y2 - y1;
      return Math.sqrt(dx * dx + dy * dy);
    }

    document.addEventListener('mousemove', function (event) {
      if (isAddingImage || images.length === 0) return;

      let distanceFromLast = getDistance(
        lastImagePosition.x,
        lastImagePosition.y,
        event.clientX,
        event.clientY
      );

      if (distanceFromLast < window.innerWidth / 20) return;

      isAddingImage = true;
      setTimeout(function () {
        let img = document.createElement('img');
        let randomImage = images[Math.floor(Math.random() * images.length)];
        if (!randomImage) return;

        img.src = randomImage.src;
        img.style.left = event.clientX + 'px';
        img.style.top = event.clientY + 'px';
        img.classList.add('droppedImage');

        img.addEventListener('animationend', function () {
          this.remove();
        });

        document.body.appendChild(img);
        lastImagePosition = { x: event.clientX, y: event.clientY };
        isAddingImage = false;
      }, 50);
    });
  });
</script>