Confetti Cursor Trail Animation

Adding CSS

1. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.

.circles {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    opacity: 1;
    transform: translateY(0);
    z-index: 99999;
  }
  @keyframes fall {
    to {
      transform: translateY(var(--fall-distance)) scale(var(--scale));
      opacity: 0;
    }
  }

Adding JavaScript

2. Copy JavaScript code below, go to Tools ➝ Code Editor ➝ JavaScript and paste it.

let lastX = 0, lastY = 0;
document.addEventListener('mousemove', function(e) {
    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;
    const distance = Math.sqrt(dx*dx + dy*dy);
    if (distance < 10) return;
    const count = 1;
    for (let i = 0; i < count; i++) {
    const circle = document.createElement('div');
    circle.classList.add('circles');
    const size = Math.random() * 10 + 5;
    circle.style.width = size + 'px';
    circle.style.height = size + 'px';
    circle.style.background = `hsl(${Math.random() * 360}, 80%, 60%)`;
    const offsetX = (Math.random() - 0.5) * 20;
    const offsetY = (Math.random() - 0.5) * 20;
    circle.style.left = e.clientX + offsetX - size/2 + 'px';
    circle.style.top = e.clientY + offsetY - size/2 + 'px';
    const fallDistance = 50 + Math.random() * 100 + 'px';
    const scale = 0.3 + Math.random() * 0.7;
    circle.style.setProperty('--fall-distance', fallDistance);
    circle.style.setProperty('--scale', scale);
    const duration = 0.5 + Math.random() * 1.5 + 's';
    circle.style.animation = `fall ${duration} linear forwards`;
    document.body.appendChild(circle);
    circle.addEventListener('animationend', () => circle.remove());
    }
    lastX = e.clientX;
    lastY = e.clientY;
});