Starfield / Hyperspace

`<pura-starfield>` is the classic tech-section backdrop: a field of stars flying toward the screen at warp speed, in the style of tsParticles' Hyperspace and Stars presets and React Bits' Hyperspeed (2D). A Canvas 2D loop runs a trivial pseudo-3D projection (each star has x/y/z, z shrinks and the point is reprojected), so depth and perspective come for free with zero dependencies. `speed` sets the warp factor and `streak` the trail length; with `streak="0"` you get a calm drifting star dome instead of hyperspace. Theme with `--pura-starfield-color` and `--pura-starfield-bg`. The pure template server-renders a dark backdrop with deterministic static stars (gently twinkling), the client canvas takes over after the first frame, and the loop pauses while the element is offscreen. Reduced motion freezes the canvas on a single frame of round stars. Each instance registers in `window.__puraStarfields` by `data-pura-id` with `{ count, speed, pause, resume }`.

Preview

<!-- hero section with a warp-speed backdrop -->
<pura-starfield count="300" speed="2" style="min-height: 100vh;">
  <header class="hero">
    <h1>Ship at lightspeed</h1>
  </header>
</pura-starfield>

<!-- calm ambient star dome: slow drift, no streaks -->
<pura-starfield count="160" speed="0.15" streak="0" style="height: 320px; --pura-starfield-color: #cdd6ff;">
  <div class="panel">Quiet night sky behind content</div>
</pura-starfield>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/starfield.js"></script>

import "./pura/lib/starfield.js";