gsap, hue-rotate, mousemove

.cursor{position: relative; pointer-events: none;}
.cursor .box { position: absolute; width: 10px; height: 5px; top:-50px; 
background-color: aqua;box-shadow: 0 0 15px aqua, 0 0 50px aqua ;
transform-origin: center 50px;}

<div class="cursor"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    document.addEventListener("DOMContentLoaded", () =>{
        let cursor = document.querySelector('.cursor');
        for (let i = 0; i<36; i++){
            let span = document.createElement('span');
            span.classList.add('box');
            span.style.setProperty('--i', i+1);
            span.style.filter = `hue-rotate(${i * 10}deg)`;
            cursor.appendChild(span);
        }
    });
    document.addEventListener("mousemove", e =>{
        gsap.to(".box", {
            x:e.clientX,
            y:e.clientY,
            rotate:(index) => (index) * 10,
            stagger:0.05,
        })
    })
</script>