CSS 

<style>
.fireflies {
  position: fixed;
  overflow: hidden;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* Below content */
}
.ff {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #cfff78 40%, transparent 80%);
  filter: blur(1px);
  animation:
    glow var(--glowDur) ease-in-out infinite var(--delay),
    flyA var(--flyDur) linear infinite var(--delay);
}

.ff.b {
  animation:
    glow var(--glowDur) ease-in-out infinite var(--delay),
    flyB var(--flyDur) linear infinite var(--delay);
}

.ff.c {
  animation:
    glow var(--glowDur) ease-in-out infinite var(--delay),
    flyC var(--flyDur) linear infinite var(--delay);
}

/* Color variations for natural swarm look */
.ff:nth-child(3n) {
  background: radial-gradient(circle, #fff 0%, #eaff9f 40%, transparent 80%);
}

.ff:nth-child(3n+1) {
  background: radial-gradient(circle, #fff 0%, #f8ff9c 40%, transparent 80%);
}

.ff:nth-child(3n+2) {
  background: radial-gradient(circle, #fff 0%, #dfff80 40%, transparent 80%);
}

/* Glow / dim illusion with complete vanish */
@keyframes glow {
  0%, 100% {
    opacity: 0;
    transform: scale(0); /* Shrinks to invisible */
    filter: blur(2px);
  }
  50% {
    opacity: 1;
    transform: scale(2.2);  /* Fully bright when glowing */
    filter: blur(0.5px);
  }
}

/* Flight paths */
@keyframes flyA {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-20px, 30px); }
  50%  { transform: translate(15px, -25px); }
  75%  { transform: translate(-10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes flyB {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(25px, -10px) rotate(10deg); }
  40%  { transform: translate(-15px, 20px) rotate(-8deg); }
  70%  { transform: translate(10px, 15px) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes flyC {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-18px, -15px) scale(1.1); }
  55%  { transform: translate(20px, 10px) scale(0.9); }
  85%  { transform: translate(-12px, 18px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

</style>

Add to any CSS divs that you don't want the fireflies over:
 
  position: relative;
  z-index: 1; /* Above fireflies */
=========================================================
HTML--place anywhere in body

<div class="fireflies" aria-hidden="true"></div>
=========================================================
JavaScript -- place just before /body

<script>
  // Create N fireflies and split them into 3 animation groups
  const N = 60;
  const wrap = document.querySelector('.fireflies');
  const groups = ['a', 'b', 'c'];

  for (let i = 0; i < N; i++) {
    const el = document.createElement('span');

    // Random starting position
    el.style.setProperty('--x', (Math.random() * 100).toFixed(2) + 'vw');
    el.style.setProperty('--y', (Math.random() * 100).toFixed(2) + 'vh');

    // Random timings
    el.style.setProperty('--delay', (Math.random() * 5).toFixed(2) + 's');
    el.style.setProperty('--glowDur', (2 + Math.random() * 3).toFixed(2) + 's');
    el.style.setProperty('--flyDur', (8 + Math.random() * 12).toFixed(2) + 's');

    // Slightly different sizes
el.style.setProperty('--size', (5 + Math.random() * 5).toFixed(2) + 'px');

    el.className = 'ff ' + groups[i % 3];
    wrap.appendChild(el);
  }
</script>