@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/module/ui/backgrounds/variants/moonlight.js

@@ -0,0 +1,468 @@
+"use strict";
+
+/**
+ * Moonlight — moon over a still sea, the glade shimmering below.
+ *
+ * Composed like the pixel-art seascape it's modelled on: a night-sky
+ * gradient with breathing stars, cloud banks with moonlit top edges, a
+ * cratered moon in a TIGHT bloom (many rings at steep falloff — a big
+ * 8-ring glow shows its rings as visible circles), mountain silhouettes with
+ * a few shore lights on the horizon, and a glade built from chunky
+ * row-quantized water blocks — brightest mid-glade, thinning at the horizon
+ * and toward the viewer.
+ *
+ * Same contract as ../README.md: native-driven loops only, static geometry
+ * rasterized, scatter tables at module load, geometry sized from the WINDOW
+ * (never the modal — resizing crops, it doesn't stretch). Per-dash rands come
+ * off ONE stream in a fixed stride (the Deep Field lesson).
+ */
+
+import { memo } from "react";
+import { Animated, Dimensions, View } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { Base, LinearFade, RadialGlow, RasterLayer, Vignette, usePulse } from "../primitives.js";
+import { scatter, withAlpha } from "../rng.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const BASE_COLOR = "#040609";
+const HORIZON = 0.46;
+const MOON_X = 0.72;
+const MOON_Y = 0.17;
+const MOON_DIA = 56;
+
+/** Craters as fractions of the moon: [dx, dy, dia] of MOON_DIA. */
+const CRATERS = [[0.24, -0.12, 0.2], [-0.16, 0.2, 0.13], [0.08, 0.06, 0.1]];
+
+/** Stride 3: x, y, size. */
+const SKY_STAR_COUNT = 22;
+const SKY_STARS = scatter(0x52b7, SKY_STAR_COUNT * 3);
+
+// ============================================================================
+// Clouds — dark banks with a moonlit top edge
+// ============================================================================
+
+/**
+ * A cloud is a row of overlapping ellipses; the lit rim is the SAME puffs in
+ * a lighter colour, drawn first and offset up toward the moon, so the body
+ * occludes all of it except a moonlit sliver along the top.
+ */
+
+const CLOUDS = [{
+  at: [0.16, 0.3],
+  puffs: [[-62, 4, 150, 20], [-44, -8, 62, 24], [-4, -14, 74, 30], [38, -4, 54, 20]],
+  rim: [4, -3.5],
+  bodyAlpha: 0.94
+}, {
+  at: [0.84, 0.37],
+  puffs: [[-55, 3, 130, 18], [-30, -8, 56, 22], [8, -13, 64, 27], [42, -3, 44, 17]],
+  rim: [-2, -4],
+  bodyAlpha: 0.94
+}, {
+  at: [0.46, 0.425],
+  puffs: [[-40, 2, 96, 13], [-12, -6, 48, 16], [22, -2, 38, 12]],
+  rim: [3, -3],
+  bodyAlpha: 0.9
+}];
+function cloudPuffs(cloud, cx, cy, key) {
+  const parts = [];
+  // Pass 1: the lit rim (drawn first, mostly hidden by the body).
+  for (let i = 0; i < cloud.puffs.length; i++) {
+    const [dx, dy, w, h] = cloud.puffs[i];
+    parts.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: cx + dx + cloud.rim[0] - w / 2,
+        top: cy + dy + cloud.rim[1] - h / 2,
+        width: w,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: withAlpha("#1D2A42", 0.35)
+      }
+    }, `${key}-r${i}`));
+  }
+  // Pass 2: the body.
+  for (let i = 0; i < cloud.puffs.length; i++) {
+    const [dx, dy, w, h] = cloud.puffs[i];
+    parts.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: cx + dx - w / 2,
+        top: cy + dy - h / 2,
+        width: w,
+        height: h,
+        borderRadius: h / 2,
+        backgroundColor: withAlpha("#070D18", cloud.bodyAlpha)
+      }
+    }, `${key}-b${i}`));
+  }
+  return parts;
+}
+
+// ============================================================================
+// Mountains — silhouette range on the horizon
+// ============================================================================
+
+/** [xFrac, base width, height, color] — border-trick triangles. */
+const PEAKS = [[0.03, 120, 24, "#030609"], [0.11, 96, 36, "#020408"], [0.2, 140, 24, "#030609"], [0.29, 76, 15, "#020408"], [0.9, 96, 18, "#030609"], [0.98, 130, 27, "#020408"]];
+
+/** Tiny warm shore lights at the foot of the range: xFrac positions. */
+const SHORE_LIGHTS = [0.06, 0.13, 0.18, 0.26];
+
+// ============================================================================
+// Water blocks — the glade
+// ============================================================================
+
+/** Stride 4: depth, x jitter, width jitter, alpha jitter. */
+const GLADE_LAYERS = [{
+  count: 44,
+  seed: 0x3aa1
+}, {
+  count: 34,
+  seed: 0x77c2
+}, {
+  count: 26,
+  seed: 0xb4e9
+}];
+const GLADE_TABLES = GLADE_LAYERS.map(l => scatter(l.seed, l.count * 4));
+
+/** Quantizing block rows to this grid is what makes them read as ripples. */
+const ROW_STEP = 7;
+const GladeLayer = /*#__PURE__*/memo(function GladeLayer({
+  indices,
+  drive,
+  scale,
+  raster,
+  width,
+  height,
+  animated
+}) {
+  const sway = usePulse(drive === "swayA" ? 9000 : 12500, animated && drive !== "breathe");
+  const breathe = usePulse(6200, animated && drive === "breathe");
+  const moonX = width * MOON_X;
+  const horizonY = height * HORIZON;
+  const blocks = [];
+  for (const li of indices) {
+    const layer = GLADE_LAYERS[li];
+    const count = Math.round(layer.count * scale);
+    // Shipping scale reads the module-load table; an amplified scale (bench
+    // only) draws a longer stream from the same seed.
+    const table = scale === 1 ? GLADE_TABLES[li] : scatter(layer.seed, count * 4);
+    for (let i = 0; i < count; i++) {
+      const d = table[i * 4];
+      const jx = table[i * 4 + 1];
+      const jw = table[i * 4 + 2];
+      const ja = table[i * 4 + 3];
+      const y = horizonY + 4 + d * (height - horizonY) * 0.94;
+      const halfSpread = width * (0.03 + d * 0.16);
+      const x = moonX + (jx - 0.5) * 2 * halfSpread;
+      const blockW = 6 + d * 26 + jw * 10;
+      const blockH = d < 0.3 ? 1 : d < 0.62 ? 2 : 3;
+      // Brightest mid-glade and along the centre line, dimmer at the horizon
+      // and toward the viewer — the shape of a real moonglade.
+      const arc = Math.sin(Math.PI * (0.12 + d * 0.82));
+      const centered = Math.max(0.25, 1 - Math.abs(jx - 0.5) * 1.4);
+      const alpha = (0.16 + arc * 0.48) * centered * (0.75 + ja * 0.25);
+      blocks.push(/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: x - blockW / 2,
+          top: Math.round(y / ROW_STEP) * ROW_STEP,
+          width: blockW,
+          height: blockH,
+          borderRadius: 0.5,
+          backgroundColor: withAlpha("#CFE0F4", alpha)
+        }
+      }, `${li}-${i}`));
+    }
+  }
+  const style = drive === "breathe" ? {
+    opacity: breathe.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0.55, 1]
+    })
+  } : {
+    transform: [{
+      translateX: sway.interpolate({
+        inputRange: [0, 1],
+        outputRange: drive === "swayA" ? [-7, 7] : [6, -6]
+      })
+    }]
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [absoluteFill, style],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(RasterLayer, {
+      style: absoluteFill,
+      raster: raster,
+      children: blocks
+    })
+  });
+});
+
+// ============================================================================
+// The scene
+// ============================================================================
+
+/**
+ * The tunable body. `Moonlight` below is this with the shipping defaults; the
+ * bench route (`example-dev-build/app/bg-bench.tsx`) drives the knobs so every
+ * measured variant is this exact code, not a copy of it.
+ */
+export const MoonlightTunable = /*#__PURE__*/memo(function MoonlightTunable({
+  gladeScale = 1,
+  fusedGlade = false,
+  raster = true,
+  chrome = true,
+  ...props
+}) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  const twinkle = usePulse(7400, animated);
+  const cloudDrift = usePulse(26000, animated);
+  const starOpacity = twinkle.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.7, 1]
+  });
+  const cloudX = cloudDrift.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-8, 8]
+  });
+  const moonX = width * MOON_X;
+  const moonY = height * MOON_Y;
+  const horizonY = height * HORIZON;
+  // Light geometry is sized from the WINDOW so resizing the modal never
+  // swells or shrinks the moon's bloom — only positions follow the modal.
+  const refW = Dimensions.get("window").width;
+  const stars = [];
+  for (let i = 0; i < SKY_STAR_COUNT; i++) {
+    const size = SKY_STARS[i * 3 + 2];
+    const dia = 1 + size * 1.3;
+    const x = SKY_STARS[i * 3] * width;
+    const y = SKY_STARS[i * 3 + 1] * horizonY * 0.92;
+    // Keep the sky clear right around the moon so its bloom stays clean.
+    if (Math.hypot(x - moonX, y - moonY) < refW * 0.18) continue;
+    stars.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: x - dia / 2,
+        top: y - dia / 2,
+        width: dia,
+        height: dia,
+        borderRadius: dia / 2,
+        backgroundColor: withAlpha("#C9DAF0", 0.3 + size * 0.4)
+      }
+    }, i));
+  }
+  const clouds = CLOUDS.flatMap((cloud, i) => cloudPuffs(cloud, width * cloud.at[0], height * cloud.at[1], `c${i}`));
+  const mountains = PEAKS.map(([xf, wBase, h, color], i) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: width * xf - wBase / 2,
+      top: horizonY - h,
+      width: 0,
+      height: 0,
+      borderLeftWidth: wBase / 2,
+      borderRightWidth: wBase / 2,
+      borderBottomWidth: h,
+      borderLeftColor: "transparent",
+      borderRightColor: "transparent",
+      borderBottomColor: color
+    }
+  }, `m${i}`));
+  const lights = SHORE_LIGHTS.map((xf, i) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: width * xf,
+      top: horizonY - 3,
+      width: 2,
+      height: 1.5,
+      backgroundColor: withAlpha("#E8D9A8", 0.55 + i % 2 * 0.2)
+    }
+  }, `sl${i}`));
+  return (
+    /*#__PURE__*/
+    // Clips: the blooms are window-sized, so a small modal crops the scene.
+    _jsxs(View, {
+      style: [absoluteFill, {
+        overflow: "hidden"
+      }],
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Base, {
+        color: BASE_COLOR
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          height: horizonY
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#0A1424",
+          from: 0.45,
+          to: 0,
+          direction: "down",
+          bands: 20,
+          flattenBase: BASE_COLOR
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          opacity: starOpacity
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(RasterLayer, {
+          style: absoluteFill,
+          children: stars
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [absoluteFill, {
+          transform: [{
+            translateX: cloudX
+          }]
+        }],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(RasterLayer, {
+          style: absoluteFill,
+          children: clouds
+        })
+      }), /*#__PURE__*/_jsx(RadialGlow, {
+        size: refW * 0.44,
+        color: "#A9C2DE",
+        alpha: 0.15,
+        rings: 20,
+        falloff: 1.9,
+        style: {
+          position: "absolute",
+          left: moonX - refW * 0.22,
+          top: moonY - refW * 0.22
+        }
+      }), /*#__PURE__*/_jsx(RadialGlow, {
+        size: 116,
+        color: "#DCE8F6",
+        alpha: 0.34,
+        rings: 10,
+        falloff: 1.6,
+        style: {
+          position: "absolute",
+          left: moonX - 58,
+          top: moonY - 58
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: moonX - MOON_DIA / 2,
+          top: moonY - MOON_DIA / 2,
+          width: MOON_DIA,
+          height: MOON_DIA,
+          borderRadius: MOON_DIA / 2,
+          // Fully opaque: any translucency lets the app behind the modal
+          // bleed through the brightest surface in the scene.
+          backgroundColor: "#EDF3FB",
+          overflow: "hidden"
+        },
+        children: CRATERS.map(([dx, dy, frac], i) => {
+          const d = MOON_DIA * frac;
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              position: "absolute",
+              left: MOON_DIA / 2 + dx * MOON_DIA - d / 2,
+              top: MOON_DIA / 2 + dy * MOON_DIA - d / 2,
+              width: d,
+              height: d,
+              borderRadius: d / 2,
+              backgroundColor: withAlpha("#9DB2C8", 0.32)
+            }
+          }, i);
+        })
+      }), chrome ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY - 76,
+          height: 76
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#17293F",
+          from: 0,
+          to: 0.28,
+          direction: "down",
+          bands: 12
+        })
+      }) : null, /*#__PURE__*/_jsxs(RasterLayer, {
+        style: absoluteFill,
+        children: [mountains, lights]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          height: 1,
+          backgroundColor: withAlpha("#9FB8D4", 0.12)
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: moonX - width * 0.16,
+          top: horizonY,
+          width: width * 0.32,
+          height: 1,
+          backgroundColor: withAlpha("#C6DAF0", 0.32)
+        }
+      }), chrome ? /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: horizonY,
+          bottom: 0
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: "#010409",
+          from: 0,
+          to: 0.5,
+          direction: "down",
+          bands: 12
+        })
+      }) : null, fusedGlade ? /*#__PURE__*/_jsx(GladeLayer, {
+        indices: [0, 1, 2],
+        drive: "swayA",
+        scale: gladeScale,
+        raster: raster,
+        ...props
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(GladeLayer, {
+          indices: [0],
+          drive: "swayA",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        }), /*#__PURE__*/_jsx(GladeLayer, {
+          indices: [1],
+          drive: "swayB",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        }), /*#__PURE__*/_jsx(GladeLayer, {
+          indices: [2],
+          drive: "breathe",
+          scale: gladeScale,
+          raster: raster,
+          ...props
+        })]
+      }), chrome ? /*#__PURE__*/_jsx(Vignette, {
+        color: "#020305",
+        alpha: 0.42,
+        spread: 0.34
+      }) : null]
+    })
+  );
+});
+export const Moonlight = /*#__PURE__*/memo(function Moonlight(props) {
+  return /*#__PURE__*/_jsx(MoonlightTunable, {
+    ...props
+  });
+});