Шлейф картинок за курсором

<style>
.uc-shl {
position: relative;
}

.tistolsIcon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
filter: grayscale(0%) contrast(100%);
overflow: hidden;
width: 100%;
height: 100%;
}

.tistolsIcon > div {
animation: markIn 1000ms forwards cubic-bezier(0, 0.73, 0.12, 1.71);
font-size: 0;
line-height: 0;
}

.tistolsIcon > div.out {
animation: markOut 100ms forwards ease-out;
}

@keyframes markIn {
0% {
transform: translate(-50%, -50%) scale(0.8) translateZ(0);
}
100% {
transform: translate(-50%, -50%) scale(1) translateZ(0);
}
}

@keyframes markOut {
0% {
transform: translate(-50%, -50%) scale(1) translateZ(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.2) translateZ(0);
opacity: 0;
filter: blur(10px);
}
}
</style>
<div class="tistolsIcon"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const tistolsIcon = document.querySelector(".tistolsIcon");
const ucShl = document.querySelector(".uc-shl");
const images = [
"https://static.tildacdn.com/tild3066-6466-4330-b964-323732323531/Sticker_Mockup_1.png",
"https://static.tildacdn.com/tild3361-3730-4462-b433-313561313333/Sticker_Mockup_5.png",
"https://static.tildacdn.com/tild6565-6634-4232-a661-323630643534/Sticker_Mockup_4.png",
"https://static.tildacdn.com/tild3030-3432-4130-b166-353161343939/Sticker_Mockup_2.png",
"https://static.tildacdn.com/tild3861-6466-4231-a334-643534363837/Sticker_Mockup_3.png",
"https://static.tildacdn.com/tild3361-3730-4462-b433-313561313333/Sticker_Mockup_5.png"
];

let lastX = null;
let lastY = null;
let imageIndex = 0;

function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function createImage(x, y) {
const size = getRandomInt(40, 240);
const rotation = getRandomInt(0, 50);
const imageUrl = images[imageIndex];

const container = document.createElement("div");
const img = document.createElement("div");

container.style.position = "absolute";
container.style.left = `${x}px`;
container.style.top = `${y}px`;
container.style.userSelect = "none";
container.style.pointerEvents = "none";
container.style.transformOrigin = "top left";

img.style.transform = `rotate(${rotation - 25}deg)`;
img.style.fontSize = `${size}px`;
img.style.backgroundImage = `url('${imageUrl}')`;
img.style.backgroundSize = "contain";
img.style.backgroundRepeat = "no-repeat";
img.style.width = "300px";
img.style.height = "300px";

container.appendChild(img);
tistolsIcon.appendChild(container);

setTimeout(() => {
container.classList.add("out");
setTimeout(() => container.remove(), 400);
}, 3000);
}

function updatePosition(event) {
const rect = ucShl.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
if (lastX === null || lastY === null || Math.hypot(x - lastX, y - lastY) > 100) {
createImage(x, y);
lastX = x;
lastY = y;
}
}

function updateTouchPosition(event) {
event.preventDefault();
const rect = ucShl.getBoundingClientRect();
const touch = event.touches[0];
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
createImage(x, y);
}

ucShl.addEventListener("mousemove", updatePosition);
ucShl.addEventListener("touchmove", updateTouchPosition, { passive: false });
ucShl.addEventListener("touchstart", updateTouchPosition);

ucShl.addEventListener("click", () => {
tistolsIcon.querySelectorAll("div").forEach(el => {
el.classList.add("out");
setTimeout(() => el.remove(), 400);
});
imageIndex = (imageIndex + 1) % images.length;
});


ucShl.appendChild(tistolsIcon);
});


</script>