Windows Trail on moving HTML/CSS

I'm trying to create a cool effect on my website using HTML, CSS, and maybe some JavaScript.

I want to use an image and as my cursor,
and I want it to leave a trail behind as I move my mouse around the page.

I'm not very experienced with JavaScript, so I'd appreciate it if you could show me some examples.

The image I want to use is an old Windows error message, and I want to fill up the page with it.

Can anyone help me achieve this effect?

Thank you!

unfortunately for now native CSS cursor can't be used for this type of things natively (for example: image need to be very small like a icon)

but if we use <img> approach then hopefully we can find a solution:

TLDR solution:

Without any complex math or javascript,
<br>we can use the native CSS property transition-duration,
<br>and get some results that are very smooth.

transition-duration: calc(
                          var(--i) * 0.02s /* increase the 0.02s if you want more effect, for example to 0.05s */
                         ); 

here the result I got:

demo code below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const popups = document.querySelectorAll(".popup");

// just a simple move event, the magic is in the css
document.addEventListener("mousemove", (e) => {
  popups.forEach((popup) => {
    popup.style.left = `${e.clientX - popup.clientWidth  / 2}px`;
    popup.style.top =  `${e.clientY - popup.clientHeight / 2}px`;
  });
});

<!-- language: lang-css -->

.popup-container {
  position: relative;
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 50vh;
  transition-duration: calc(var(--i) * 0.02s); /* here magic happens */
}

<!-- language: lang-html -->

<div class="popup-container">
  <img style="--i: 5;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
  <img style="--i: 4;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
  <img style="--i: 3;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
  <img style="--i: 2;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
  <img style="--i: 1;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
  <img style="--i: 0;" class="popup" src="https://i.stack.imgur.com/YNu91.png" alt="" />
</div>

<!-- end snippet -->