gsap, mouse move

*{margin: 0;padding: 0; box-sizing: border-box;}
body{background-color: #000; 
background-image: linear-gradient(to right, #333 1px , transparent 1px),
linear-gradient(to bottom, #333 1px , transparent 1px);
background-size: 20px 20px;}
.cursor{position: absolute; pointer-events: none; top: 30px; left: 30px;}
.box{position: absolute; width: 20px; height: 10px; background: #00ff9a;}

<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",()=>{
    const cursor = document.querySelector('.cursor');
    for(let i = 0; i<20; i++){
        const span = document.createElement('span');
        span.classList.add('box');
        span.style.setProperty('--i', i+1);
        span.style.left = i * 20+'px';
        span.style.filter = `hue-rotate(${i * 10}deg)`;
        cursor.appendChild(span);
    }
})
document.addEventListener("mousemove", e=>{
    gsap.to(".box",{
        x : e.clientX,
        y : e.clientY,
        stagger : 0.05
    })
})
</script>