@buoy-gg/shared-ui 7.0.25 → 7.0.27

package/lib/commonjs/ui/backgrounds/variants/hyperspace.js

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Hyperspace = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
+var _primitives = require("../primitives.js");
+var _rng = require("../rng.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Hyperspace — a faithful port of the Everlights `HyperspaceBackground`
+ * (components/hyperspace-background.tsx), the Star Wars "lightspeed" field:
+ * crisp ROUND points streaming out of a centre vanishing point on the 3D
+ * depth projection `screen = plane / z`.
+ *
+ * THE FIELD IS EXACT: one mulberry32 stream seeded `0x5747 ^ 260`, pulling
+ * `ang, rad, z0, tw` per star in the original's call order — same 260 stars,
+ * same sqrt-biased radii with the 12% clear centre, same palette pick
+ * formula, same z sweep (1.0 → 0.06), same speed (0.55 z-units/sec, the
+ * "lightspeed" tuning), same 0.15 + 0.85·near² brightness with 6% fade at
+ * both ends of a star's life. Stars are round dots, NOT streaks — the
+ * original never elongates anything.
+ *
+ * HOW THE PROJECTION RUNS WITHOUT SKIA: a star at plane offset p appears at
+ * `centre + (p/z)·centre`, so a LAYER scaled by S = 1/z about the centre
+ * carries every star along its exact trajectory. The z-sweep becomes scale
+ * keyframes on ONE looping value.
+ *
+ * WHAT COULDN'T COME ACROSS 1:1, and what was done instead:
+ *
+ *  - **Continuous per-star start phase.** Every star has its own `z0`; per
+ *    star that's 260 nodes. `z0` (and ONLY z0) is quantised into 8 shells —
+ *    the same single-quantity discipline Deep Field applies to speed.
+ *    Position, size, colour and brightness stay exact.
+ *  - **The size CAP.** The original stamps its sprite at `dia = baseDia/z`
+ *    capped at 4.5×base, but a scaling layer can't cap one star's size
+ *    mid-flight. Instead each dot is drawn at the sprite's true lit-core
+ *    size (12.5% of the stamp — 0.45px at z=1), which reaches the original's
+ *    2px cap at the cap's own z and only overshoots inside the final 6%
+ *    fade-out, where brightness is already dying.
+ *  - **The blurred sprite.** As in Deep Field: a solid core at the lit 12.5%
+ *    plus one concentric disc at the halo's α0.30 stands in for the blur.
+ *  - **Additive blend + the 5% twinkle** are dropped; over near-black at this
+ *    density neither reads.
+ */
+
+const BASE_COLOR = "#050505";
+
+// ---------------------------------------------------------------------------
+// The original's constants, verbatim (variant 1, "lightspeed").
+// ---------------------------------------------------------------------------
+const COUNT = 260;
+const SPEED = 0.55; // z-units/sec → one life = 1/0.55 s
+const BASE_DIA = 3.6; // sprite diameter px at z=1
+const PLANE = 0.5;
+const Z_FAR = 1.0;
+const Z_NEAR = 0.06;
+const Z_SPAN = Z_FAR - Z_NEAR;
+/** The lit core of the 64px sprite is r=4 → 12.5% of the stamp. */
+const CORE_FRAC = 0.125;
+const CYCLE_MS = Math.round(1000 / SPEED);
+const PALETTE = ["#FFFFFF", "#B3D9FF", "#8CB3FF"];
+const SHELLS = 8;
+/**
+ * The original field, regenerated — ONE rng stream, original call order
+ * (ang, rad, z0, tw per star), original seed. Any other order or seed is a
+ * different sky.
+ */
+function buildField() {
+  const rnd = (0, _rng.mulberry32)((0x5747 ^ COUNT) >>> 0);
+  const stars = [];
+  for (let i = 0; i < COUNT; i++) {
+    const ang = rnd() * Math.PI * 2;
+    // sqrt-biased outward, inner 12% clear of the vanishing point.
+    const rad = (0.12 + 0.88 * Math.sqrt(rnd())) * PLANE;
+    const z0 = rnd();
+    const tw = rnd() * Math.PI * 2;
+    stars.push({
+      px: Math.cos(ang) * rad,
+      py: Math.sin(ang) * rad,
+      shell: Math.min(SHELLS - 1, Math.floor(z0 * SHELLS)),
+      // The original's exact (quirky) pick: floor((tw·0.5 + 0.5)·n) % n.
+      color: PALETTE[Math.floor((tw * 0.5 + 0.5) * PALETTE.length) % PALETTE.length]
+    });
+  }
+  return stars;
+}
+const FIELD = buildField();
+
+/** S(p) = 1/z with z falling linearly over the phase — the projection. */
+function scaleAt(p) {
+  return 1 / (Z_FAR - p * Z_SPAN);
+}
+
+/** The original's brightness: 0.15 + 0.85·near², faded over the first and
+ * last 6% of a star's life (which also hides the shell's wrap snap). */
+function opacityAt(p) {
+  let bright = 0.15 + 0.85 * p * p;
+  if (p < 0.06) bright *= p / 0.06;else if (p > 0.94) bright *= (1 - p) / 0.06;
+  return Math.min(1, bright);
+}
+
+/** Interpolate stops for shell k (phase = (v + k/K) mod 1); the wrap point is
+ * double-sampled 1e-4 apart inside the zero-opacity sliver. */
+function shellStops(k) {
+  const offset = k / SHELLS;
+  const vs = [];
+  const SEGMENTS = 18;
+  for (let i = 0; i <= SEGMENTS; i++) vs.push(i / SEGMENTS);
+  const vWrap = (1 - offset) % 1;
+  if (vWrap > 1e-3 && vWrap < 1 - 1e-3) vs.push(vWrap - 1e-4, vWrap + 1e-4);
+  vs.sort((a, b) => a - b);
+  const input = [];
+  const scale = [];
+  const opacity = [];
+  for (const v of vs) {
+    // At the loop boundary the offset-0 shell's phase must read as END of
+    // life (p=1, max scale, zero opacity), not wrap to 0 — otherwise the
+    // last segment lerps scale back to 1 at visible opacity and the stars
+    // retract to the centre once per cycle.
+    const p = offset === 0 && v === 1 ? 1 : (v + offset) % 1;
+    input.push(v);
+    scale.push(scaleAt(p));
+    opacity.push(opacityAt(p));
+  }
+  return {
+    input,
+    scale,
+    opacity
+  };
+}
+const SHELL_STOPS = Array.from({
+  length: SHELLS
+}, (_, k) => shellStops(k));
+const Hyperspace = exports.Hyperspace = /*#__PURE__*/(0, _react.memo)(function Hyperspace({
+  width,
+  height,
+  animated
+}) {
+  const drive = (0, _primitives.useLoop)(CYCLE_MS, animated);
+  const cx = width / 2;
+  const cy = height / 2;
+
+  // Core at the sprite's lit 12.5% (0.45px at z=1) with a floor so the far
+  // stars land on a pixel; halo disc at the sprite's α0.30, 2.4× the core.
+  const core = Math.max(0.5, BASE_DIA * CORE_FRAC);
+  const halo = core * 2.4;
+  const shells = [];
+  for (let k = 0; k < SHELLS; k++) {
+    const stops = SHELL_STOPS[k];
+    const stars = [];
+    for (let i = 0; i < FIELD.length; i++) {
+      const star = FIELD[i];
+      if (star.shell !== k) continue;
+      // The original's projection at z=1: sx = cx + px·cx, sy = cy + py·cy
+      // (offsets scale with the HALF-extent — elliptical, exactly as there).
+      const x = cx + star.px * cx;
+      const y = cy + star.py * cy;
+      stars.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - halo / 2,
+          top: y - halo / 2,
+          width: halo,
+          height: halo,
+          borderRadius: halo / 2,
+          backgroundColor: (0, _rng.withAlpha)(star.color, 0.3)
+        }
+      }, `${i}-h`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: x - core / 2,
+          top: y - core / 2,
+          width: core,
+          height: core,
+          borderRadius: core / 2,
+          backgroundColor: star.color
+        }
+      }, i));
+    }
+    shells.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_absoluteFill.absoluteFill, {
+        opacity: drive.interpolate({
+          inputRange: stops.input,
+          outputRange: stops.opacity
+        }),
+        transform: [{
+          scale: drive.interpolate({
+            inputRange: stops.input,
+            outputRange: stops.scale
+          })
+        }]
+      }],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RasterLayer, {
+        style: _absoluteFill.absoluteFill,
+        raster: false,
+        children: stars
+      })
+    }, k));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_absoluteFill.absoluteFill, {
+      overflow: "hidden"
+    }],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Base, {
+      color: BASE_COLOR
+    }), shells, /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Vignette, {
+      color: "#000000",
+      alpha: 0.3,
+      spread: 0.3
+    })]
+  });
+});