Cursor Particle Trail

<div class="part" id="part"><span>Move cursor here</span></div>

body{background:#0d1426}
.part{position:relative;width:320px;height:200px;border-radius:18px;background:#121a2e;display:grid;place-items:center;overflow:hidden;cursor:crosshair}
.part span{color:#9fb0d0;font:600 15px/1 system-ui,sans-serif;pointer-events:none}
.dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff477e;pointer-events:none;animation:dot .8s ease-out forwards}
@keyframes dot{to{transform:scale(0) translateY(-30px);opacity:0}}

var p=document.getElementById('part'),last=0;
p.addEventListener('mousemove',function(e){var now=Date.now();if(now-last<40)return;last=now;var r=p.getBoundingClientRect(),d=document.createElement('span');d.className='dot';d.style.left=(e.clientX-r.left)+'px';d.style.top=(e.clientY-r.top)+'px';d.style.background='hsl('+(Math.random()*60+330)+',90%,65%)';p.appendChild(d);setTimeout(function(){d.remove()},800)});