Kamil1998/glowy-cursor-trails

1document.addEventListener('DOMContentLoaded', () => {2    const cursor = document.querySelector('.cursor-trail');3    let posX = 0, posY = 0;4    let mouseX = 0, mouseY = 0;5    6    // Create particles7    const particles = [];8    for (let i = 0; i < 10; i++) {9        const particle = document.createElement('div');10        particle.className = 'cursor-particle';11        document.body.appendChild(particle);12        particles.push({13            el: particle,14            x: 0,15            y: 0,16            delay: i * 0.0517        });18    }19    20    // Style particles21    const style = document.createElement('style');22    style.textContent = `23        .cursor-particle {24            position: fixed;25            width: 6px;26            height: 6px;27            border-radius: 50%;28            background-color: rgba(59, 130, 246, 0.6);29            pointer-events: none;30            z-index: 9998;31            transform: translate(-50%, -50%);32            filter: blur(1px);33            transition: transform 0.3s ease, opacity 0.3s ease;34        }35    `;36    document.head.appendChild(style);37    38    // Mouse move event39    document.addEventListener('mousemove', e => {40        mouseX = e.clientX;41        mouseY = e.clientY;42    });43    44    // Click effect45    document.addEventListener('mousedown', () => {46        cursor.classList.add('active');47    });48    49    document.addEventListener('mouseup', () => {50        cursor.classList.remove('active');51    });52    53    // Animation loop54    const updateCursor = () => {55        // Smooth main cursor movement56        posX += (mouseX - posX) / 5;57        posY += (mouseY - posY) / 5;58        59        cursor.style.left = `${posX}px`;60        cursor.style.top = `${posY}px`;61        62        // Update particles with delay63        particles.forEach((particle, i) => {64            const targetX = mouseX - (mouseX - posX) * particle.delay;65            const targetY = mouseY - (mouseY - posY) * particle.delay;66            67            particle.x += (targetX - particle.x) / 10;68            particle.y += (targetY - particle.y) / 10;69            70            particle.el.style.left = `${particle.x}px`;71            particle.el.style.top = `${particle.y}px`;72            particle.el.style.opacity = 1 - (i / particles.length);73        });74        75        requestAnimationFrame(updateCursor);76    };77    78    updateCursor();79});