Trail Effect Bubble

How to Create a Cursor Bubble Trail Effect 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 Bubbles Trail Effect using JavaScript | Mouse Events</title>
</head>

<body>
</body>

</html>

css

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

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            transition: transform 0.5s ease-out, opacity 0.6s ease-out;
        }

javascript

document.addEventListener('mousemove', (e) => {
    const numParticles = 20;
    const explosionRadius = 100;

    for (let i = 0; i < numParticles; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        document.body.appendChild(particle);

        const angle = Math.random() * Math.PI * 2;
        const distance = Math.random() * explosionRadius;
        const x = e.clientX + Math.cos(angle) * distance;
        const y = e.clientY + Math.sin(angle) * distance;

        particle.style.left = `${e.clientX - 5}px`;
        particle.style.top = `${e.clientY - 5}px`;
        particle.style.width = `${Math.random() * 10 + 5}px`;
        particle.style.height = particle.style.width;
        particle.style.position = 'absolute';
        particle.style.backgroundColor = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.8)`;
        particle.style.borderRadius = '50%';
        particle.style.pointerEvents = 'none';
        particle.style.transition = 'transform 0.5s ease-out, opacity 0.6s ease-out';

        setTimeout(() => {
            particle.style.transform = `translate(${x - e.clientX}px, ${y - e.clientY}px)`;
            particle.style.opacity = '0';
        }, 10);

        setTimeout(() => {
            particle.remove();
        }, 600);
    }
});