Java-Scripts.net

Star Cursor Trail

Create a whimsical user experience. As the user moves their mouse, this script spawns small star characters that drift and fade out, mimicking a fairy dust effect.

Move your mouse here to see the sparkles.

Copy the Script

<style>
.star {
    position: absolute; font-size: 10px; color: yellow;
    pointer-events: none; animation: fadeOut 1s linear forwards;
}
@keyframes fadeOut { to { opacity: 0; transform: translateY(20px); } }
</style>

<script>
document.addEventListener('mousemove', function(e) {
    var star = document.createElement('div');
    star.className = 'star';
    star.innerHTML = '?';
    star.style.left = e.pageX + 'px';
    star.style.top = e.pageY + 'px';
    document.body.appendChild(star);
    
    setTimeout(function() { star.remove(); }, 1000);
});
</script>

Frequently Asked Questions

Yes. You can edit the CSS `color` property of the star elements, or modify the JavaScript to assign random colors for a rainbow effect.

Yes. It uses standard DOM manipulation compatible with all modern browsers. However, trails are generally disabled on touch devices.

It is lightweight, but spawning too many particles (e.g., >50) can cause performance issues on older hardware.