Estela de colores

Partículas de colores que siguen al cursor. Cada partícula tiene un tono distinto creando un arcoíris en movimiento.

Mueve el cursor aquí dentro

Código

window.addEventListener("mousemove", (e) => {
  const particle = document.createElement("div")
  
  // Color aleatorio en cada partícula
  const hue = Math.random() * 360
  particle.style.cssText = `
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: hsl(${hue}, 80%, 60%);
    left: ${e.clientX}px;
    top: ${e.clientY}px;
    pointer-events: none;
    z-index: 9999;
  `
  document.body.appendChild(particle)

  // Animar y eliminar
  gsap.to(particle, {
    x: (Math.random() - 0.5) * 60,
    y: (Math.random() - 0.5) * 60,
    opacity: 0,
    scale: 0,
    duration: 0.8,
    ease: "power2.out",
    onComplete: () => particle.remove()
  })
})