@buoy-gg/shared-ui 7.0.36 → 7.0.38

package/lib/commonjs/ui/backgrounds/README.md

@@ -195,3 +195,55 @@ switcher shows both, which is the point — it's a review tool, not decoration.
 Alpha calibration: every preset runs a 0.4–0.55 vignette, and anything fainter
 than ~0.2 alpha disappears under it — hairline strokes in particular need ~0.2
 alpha or a second pixel of height to register at all.
+
+
+## Wormhole mobile preview
+
+Wormhole is the eighth registry entry (including Off). Select it under the
+Buoy dial's Settings → Background; the existing store persists that choice.
+The example app also exposes `/bg-bench?v=wormhole` and
+`/bg-bench?v=wormhole-still` for comparison under identical tool content.
+
+The moving scene is a zoom, and a zoom only loops invisibly when the picture
+is self-similar under the handoff. Two copies of one opaque cloud sheet scale
+toward the viewer one period apart (×√6 in scale, +21° in rotation) and
+crossfade with balanced source-over opacities; each forward pass takes six
+seconds (two periods) at constant proportional expansion, and four passes fit
+inside one 24-second camera-bank cycle. The sheet is built by
+`scripts/generate-wormhole-textures.cjs` by tiling one annulus of the real
+shader frame in log-polar space with exactly that (×√6, +21°) symmetry, so the
+two copies are the same picture wherever they overlap and neither the
+crossfade nor a layer's reset can be seen. The destination is cut from the
+same frame with a feathered alpha and drawn as a static layer above the
+sheets — the far end of a tunnel does not zoom. One native Animated loop
+drives the scene. It approximates the flight: the tunnel geometry is baked into
+the textures, not ray-marched on the device. There is no Skia, Reanimated,
+WebView, new native dependency, or per-frame JS callback.
+
+TRAP (the "badly looping GIF" we shipped first): a feathered ring texture is
+NOT self-similar, so a copy born at 0.42× painted a shrunken tunnel — its own
+copper rim included — over the destination every 3 s, then pushed it outward.
+Fade tuning cannot hide that; only a sheet that matches itself under the
+handoff transform can. `WORMHOLE_PERIOD` / `WORMHOLE_TWIST` in `motion.ts` are
+that transform: change either and regenerate the sheet (the generator checks
+the pixels against the symmetry and refuses a sheet that does not match).
+
+While moving, the 1440×1440 sheet (JPEG) and the 384×384 eye (PNG) contribute
+about 337 KiB of source data and roughly 8.5 MiB of decoded pixels; the still
+(640×640 JPEG, 57 KiB, 1.6 MiB decoded) is mounted only when the scene does
+not move. Instances can reuse the same image source objects. Reduced motion
+shows the still texture; the existing animation primitive pauses on AppState
+changes and stops on unmount. Geometry is window-sized and cropped by each tool
+surface. Actual device performance remains to be measured in the benchmark
+screen.
+
+The desktop menu keeps one Wormhole entry and its existing live WebGL renderer.
+The mobile texture preview does not replace the desktop shader.
+
+Texture source: `node scripts/generate-wormhole-textures.cjs` (from
+`packages/shared`) ports the website's dark shader to the CPU, renders it at
+u_t=4 with the destination centred and no copy scrim or vignette, tiles the
+sheet, cuts the eye, and rewrites `textures.ts`. It keeps the embedded still
+unless `--still scene.jpg` supplies a fresh centered 640px WebGL capture; JPEG
+encoding shells out to macOS `sips`. Both packages and Metro can consume the
+module without an asset-loader plugin.

package/lib/commonjs/ui/backgrounds/ToolBackground.js

@@ -37,7 +37,8 @@ const bucket = n => Math.max(0, Math.ceil(n / 8) * 8);
 const ToolBackground = exports.ToolBackground = /*#__PURE__*/(0, _react.memo)(function ToolBackground({
   id,
   motion,
-  opacity = 1
+  opacity = 1,
+  focus
 }) {
   const shared = (0, _backgroundStore.useToolBackground)();
   const [size, setSize] = (0, _react.useState)({
@@ -68,7 +69,8 @@ const ToolBackground = exports.ToolBackground = /*#__PURE__*/(0, _react.memo)(fu
     children: Variant && ready ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Variant, {
       width: size.width,
       height: size.height,
-      animated: animated
+      animated: animated,
+      focus: focus
     }) : null
   });
 });

package/lib/commonjs/ui/backgrounds/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "ToolBackground", {
     return _ToolBackground.ToolBackground;
   }
 });
+Object.defineProperty(exports, "Wormhole", {
+  enumerable: true,
+  get: function () {
+    return _wormhole.Wormhole;
+  }
+});
 Object.defineProperty(exports, "backgroundStore", {
   enumerable: true,
   get: function () {
@@ -157,4 +163,5 @@ var _deepField = require("./variants/deepField.js");
 var _moonlight = require("./variants/moonlight.js");
 var _daylight = require("./variants/daylight.js");
 var _liveSky = require("./variants/liveSky.js");
-var _skyClock = require("./skyClock.js");
+var _skyClock = require("./skyClock.js");
+var _wormhole = require("./variants/wormhole.js");

package/lib/commonjs/ui/backgrounds/registry.js

@@ -8,6 +8,7 @@ exports.getPreset = getPreset;
 exports.presetAt = presetAt;
 exports.presetIndex = presetIndex;
 var _deepField = require("./variants/deepField.js");
+var _wormhole = require("./variants/wormhole.js");
 var _hyperspace = require("./variants/hyperspace.js");
 var _liveSky = require("./variants/liveSky.js");
 var _underwater = require("./variants/underwater.js");
@@ -72,6 +73,13 @@ const BACKGROUND_PRESETS = exports.BACKGROUND_PRESETS = [{
   nodes: 15,
   views: 250,
   Component: _underwater.Jellyfish
+}, {
+  id: "wormhole",
+  label: "Wormhole",
+  blurb: "Cobalt clouds and copper light — a native flight through the tunnel",
+  nodes: 1,
+  views: 7,
+  Component: _wormhole.Wormhole
 }];
 
 // Ships OFF: a backdrop is an opt-in, so first load is plain black and the

package/lib/commonjs/ui/backgrounds/variants/wormhole/motion.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WORMHOLE_TWIST = exports.WORMHOLE_SHELLS = exports.WORMHOLE_PERIOD = exports.WORMHOLE_PASSES = exports.WORMHOLE_INPUT = exports.WORMHOLE_CYCLE_MS = exports.WORMHOLE_CAMERA_ROTATION = void 0;
+/** One slow camera cycle containing four faster forward passes.
+ * Keyframes run on Animated's native driver; this math runs only at import.
+ *
+ * The sheet texture is self-similar: scaled by WORMHOLE_PERIOD and rotated by
+ * WORMHOLE_TWIST it is the same picture (scripts/generate-wormhole-textures.cjs
+ * builds it that way and checks it). The two shells sit exactly one period
+ * apart, so at every instant they show identical pixels and the crossfade
+ * between them — and each shell's reset — cannot be seen. Change either
+ * constant and regenerate the textures; the sheet must be rebuilt to match.
+ */
+const WORMHOLE_CYCLE_MS = exports.WORMHOLE_CYCLE_MS = 24000;
+const WORMHOLE_PASSES = exports.WORMHOLE_PASSES = 4;
+/** Scale ratio between the two shells; one pass covers two periods (×6). */
+const WORMHOLE_PERIOD = exports.WORMHOLE_PERIOD = Math.sqrt(6);
+/** Degrees the picture turns per period — its spiral symmetry. */
+const WORMHOLE_TWIST = exports.WORMHOLE_TWIST = 21;
+const STEPS_PER_PASS = 64;
+const WORMHOLE_INPUT = exports.WORMHOLE_INPUT = Array.from({
+  length: STEPS_PER_PASS * WORMHOLE_PASSES + 1
+}, (_, i) => i / (STEPS_PER_PASS * WORMHOLE_PASSES));
+const smooth = (from, to, value) => {
+  const t = Math.max(0, Math.min(1, (value - from) / (to - from)));
+  return t * t * (3 - 2 * t);
+};
+const PHASES = [0, 0.5].map(offset => WORMHOLE_INPUT.map(t => (t * WORMHOLE_PASSES + offset) % 1));
+// Broad overlapping windows, with a completely invisible interval around wraps.
+const WEIGHTS = PHASES.map(phase => phase.map(t => Math.sin(Math.PI * t) ** 2 * smooth(0.02, 0.12, t) * (1 - smooth(0.88, 0.98, t))));
+const WORMHOLE_SHELLS = exports.WORMHOLE_SHELLS = PHASES.map((phase, layer) => ({
+  // Constant proportional expansion keeps the forward speed steady. The
+  // sheet covers the whole plane from scale 1, so a shell never shows an edge.
+  scale: phase.map(t => Math.pow(WORMHOLE_PERIOD, 2 * t)),
+  // Normalize layer transmission across the overlapping fades.
+  opacity: phase.map((_, i) => {
+    const total = WEIGHTS.reduce((sum, weights) => sum + weights[i], 0);
+    return 1 - Math.pow(0.08, WEIGHTS[layer][i] / total);
+  }),
+  // One twist per period, centred so the shells sit ±θ/2 around the camera.
+  rotate: phase.map(t => `${(2 * t - 1) * WORMHOLE_TWIST}deg`)
+}));
+// Zero velocity at the turnarounds and the loop boundary, rather than the
+// sharp reversal from a three-keyframe triangle-wave camera bank.
+const WORMHOLE_CAMERA_ROTATION = exports.WORMHOLE_CAMERA_ROTATION = WORMHOLE_INPUT.map(t => `${-5 * Math.cos(t * Math.PI * 2)}deg`);