JavaScript Cursor Trail Effect

Add a Smooth Cursor Trail Effect with Vanilla JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>Cursor Trail Effect using JavaScript | Mouse Events</title>
</head>

<body>
</body>

</html>

css

body {
            margin: 0;
            overflow: hidden;
            background-color: #000000;
        }

        .circle {
            position: absolute;
            border-radius: 50%;
            background-color: #0000ff99;
            pointer-events: none;
        }

javascript

const circles = [];

document.addEventListener('mousemove', (e) => {
    const circle = document.createElement('div');
    circle.classList.add('circle');
    document.body.appendChild(circle);

    circle.style.left = `${e.clientX}px`;
    circle.style.top = `${e.clientY}px`;
    circle.style.width = '30px';
    circle.style.height = '30px';
    circle.style.borderRadius = '50%';
    circle.style.position = 'absolute';
    circle.style.pointerEvents = 'none';

    circles.push(circle);

    circle.style.transition = 'transform 0.3s ease-out, opacity 0.5s ease-out';
    circle.style.opacity = 1;

    setTimeout(() => {
        circle.style.transform = 'scale(0)';
        circle.style.opacity = 0;
    }, 10);

    setTimeout(() => {
        circle.remove();
    }, 500);

});

setInterval(() => {
    if (circles.length > 50) {
        circles.shift().remove();
    }
}, 100);