Fulge de zapada miscand cursorul

 <style>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

h1 {

  font-family: 'Poppins', sans-serif;

  font-size: 3rem;

  color: white;

  text-align: center;

  position: absolute;

  z-index: 2;

  letter-spacing: 4px;

  text-shadow: 

    0 0 5px rgba(255, 255, 255, 0.7), 

    0 0 10px rgba(255, 255, 255, 0.8), 

    0 0 15px rgba(255, 255, 255, 1), 

    0 0 20px rgba(128, 0, 255, 0.7), 

    0 0 30px rgba(128, 0, 255, 0.6), 

    0 0 40px rgba(0, 0, 255, 0.6);

  animation: glow 1.5s ease-in-out infinite alternate;

}

@keyframes glow {

  0% {

    text-shadow: 

      0 0 5px rgba(255, 255, 255, 0.7), 

      0 0 10px rgba(255, 255, 255, 0.8), 

      0 0 15px rgba(255, 255, 255, 1), 

      0 0 20px rgba(128, 0, 255, 0.7), 

      0 0 30px rgba(128, 0, 255, 0.6), 

      0 0 40px rgba(0, 0, 255, 0.6);

  }

  100% {

    text-shadow: 

      0 0 10px rgba(255, 255, 255, 0.9), 

      0 0 20px rgba(255, 255, 255, 1), 

      0 0 30px rgba(255, 255, 255, 1.2), 

      0 0 40px rgba(0, 255, 255, 0.9), 

      0 0 50px rgba(0, 255, 255, 0.8), 

      0 0 60px rgba(0, 0, 255, 0.8);

  }

}

.star {

  position: absolute;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 50%;

  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 

              0 0 12px rgba(128, 0, 255, 0.6), 

              0 0 20px rgba(255, 0, 255, 0.4);

  animation: spread 4s ease-out forwards;

}

@keyframes spread {

  0% {

    transform: scale(1) translate(0, 0);

    opacity: 1;

  }

  100% {

    transform: scale(5) translate(var(--x), var(--y));

    opacity: 0;

  }

}

</style>

<script>

document.body.addEventListener("mousemove", function(e) {

  //  Number of stars- you can change it

  const numStars = 4;

  for (let i = 0; i < numStars; i++) {

    let star = document.createElement("div");

    star.classList.add("star");

    let size = Math.random() * 3 + 1;

    star.style.width = `${size}px`;

    star.style.height = `${size}px`;

    star.style.left = `${e.clientX - size / 2}px`;

    star.style.top = `${e.clientY - size / 2}px`;

    let angle = Math.random() * 360;

    let distance = Math.random() * 200 + 50; 

    star.style.setProperty('--x', `${Math.cos(angle) * distance}px`);

    star.style.setProperty('--y', `${Math.sin(angle) * distance}px`);

    document.body.appendChild(star);

    star.style.animation = 'spread 2s ease-out forwards';

    setTimeout(() => {

      star.remove();

    }, 4000);

  }

});

</script>