Java-Scripts.net

Mouse Cursor Trail

Bring back the 90s web aesthetic! This script tracks the mouse coordinates and updates the position of a series of trail elements to create a smooth following effect.

Move your mouse inside this box to see the trail.

Copy the Script

<style>
.trail {
    position: absolute; width: 10px; height: 10px;
    background: red; border-radius: 50%;
    pointer-events: none; /* Important: Click through */
}
</style>

<script>
var dots = [];
// Create dots
for(var i=0; i<5; i++){
    var d = document.createElement('div');
    d.className = 'trail';
    document.body.appendChild(d);
    dots.push(d);
}

document.onmousemove = function(e) {
    var x = e.clientX;
    var y = e.clientY;
    // Simple logic: Move all dots to cursor (stacking)
    // For a delay effect, you need an array of positions
    for(var i=0; i < dots.length; i++) {
        dots[i].style.left = x + (i*10) + "px"; // Offset for demo
        dots[i].style.top = y + "px";
    }
}
</script>

Frequently Asked Questions

Modern browsers handle this efficiently, but having too many trail elements (e.g., 50+) can cause lag on older devices. A trail length of 10-20 is usually safe.

Technically yes, but since mobile devices rely on touch (and don't have a 'hovering' cursor), the effect only appears briefly while dragging a finger.

Yes. The script creates HTML elements (usually `div` or `span`). You can style these with CSS to look like circles, squares, or even use images.