Fireflies animation for a website

<canvas id="flies" style="position:fixed;inset:0;width:100%;height:100%;background:#081018"></canvas>
<script>
const canvas = document.getElementById('flies')
const g = canvas.getContext('2d')
const N = 40, PERIOD = 3, SYNC = 0.02
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let w, h, dpr
function size() {
  dpr = Math.min(devicePixelRatio, 2)
  w = canvas.width = innerWidth * dpr
  h = canvas.height = innerHeight * dpr
}
size(); addEventListener('resize', size)
const flies = Array.from({ length: N }, () => ({
  x: Math.random() * w, y: h * (0.3 + Math.random() * 0.7),
  a: Math.random() * 6.28, phase: Math.random(),
}))
let last = performance.now()
function glow(f) {
  const t = f.phase < 0.15 ? Math.sin((f.phase / 0.15) * Math.PI) : 0
  return still ? 0.6 : t
}
function frame(now) {
  const dt = Math.min(0.05, (now - last) / 1000); last = now
  g.globalCompositeOperation = 'source-over'
  g.fillStyle = '#081018'; g.fillRect(0, 0, w, h)
  g.globalCompositeOperation = 'lighter'
  const mean = Math.atan2(
    flies.reduce((s, f) => s + Math.sin(f.phase * 6.28), 0),
    flies.reduce((s, f) => s + Math.cos(f.phase * 6.28), 0)) / 6.28
  for (const f of flies) {
    if (!still) {
      f.a += (Math.random() - 0.5) * 0.3
      f.x = (f.x + Math.cos(f.a) * 12 * dpr * dt + w) % w
      f.y = Math.min(h, Math.max(h * 0.2, f.y + Math.sin(f.a) * 8 * dpr * dt))
      f.phase = (f.phase + dt / PERIOD + SYNC * dt * Math.sin((mean - f.phase) * 6.28)) % 1
      if (f.phase < 0) f.phase += 1
    }
    const k = glow(f)
    if (k <= 0) continue
    const r = 18 * dpr
    const halo = g.createRadialGradient(f.x, f.y, 0, f.x, f.y, r)
    halo.addColorStop(0, 'rgba(220,255,120,' + 0.9 * k + ')')
    halo.addColorStop(0.15, 'rgba(180,240,90,' + 0.4 * k + ')')
    halo.addColorStop(1, 'rgba(120,200,60,0)')
    g.fillStyle = halo
    g.beginPath(); g.arc(f.x, f.y, r, 0, Math.PI * 2); g.fill()
  }
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>