How it works

<section class="hero">
  <particle-field look="event-horizon" max-particles="80000" pixel-ratio="1"></particle-field>
  …content…
</section>

.hero particle-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  mix-blend-mode: screen;   /* keep the light, drop the black */
  pointer-events: none;     /* page stays clickable */
}

max-particles and pixel-ratio keep a background light on laptops and phones. Scroll down and the field stops rendering until it is visible again.