Starfield background for a website

<canvas id="stars" style="position:fixed;inset:0;width:100%;height:100%;background:#05060a"></canvas>
<script>
const canvas = document.getElementById('stars')
const g = canvas.getContext('2d')
const N = 600, SPEED = 0.12 // depth units per second
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
let w, h
function size() {
  w = canvas.width = innerWidth * devicePixelRatio
  h = canvas.height = innerHeight * devicePixelRatio
}
size(); addEventListener('resize', size)
const rand = () => Math.random() * 2 - 1
const stars = Array.from({ length: N }, () => ({ x: rand(), y: rand(), z: Math.random() }))
let last = performance.now()
function frame(now) {
  const dt = Math.min(0.05, (now - last) / 1000); last = now
  g.fillStyle = '#05060a'; g.fillRect(0, 0, w, h)
  const scale = Math.max(w, h) / 2
  for (const s of stars) {
    if (!still) s.z -= SPEED * dt
    if (s.z <= 0.02) { s.x = rand(); s.y = rand(); s.z = 1 }
    const px = w / 2 + (s.x / s.z) * scale * 0.5
    const py = h / 2 + (s.y / s.z) * scale * 0.5
    const r = (1 - s.z) * 1.8 * devicePixelRatio
    g.globalAlpha = 1 - s.z
    g.fillStyle = '#fff'
    g.beginPath(); g.arc(px, py, r, 0, Math.PI * 2); g.fill()
  }
  g.globalAlpha = 1
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>