@buoy-gg/shared-ui 7.0.25 → 7.0.27

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

@@ -0,0 +1,753 @@
+"use strict";
+
+/**
+ * The underwater family — the Abyss feeling, explored.
+ *
+ * Abyss set the register: lit from the surface, near-black at the bottom,
+ * everything moving in tens of seconds. The other three stay inside it and
+ * change what lives in the water: bubbles rising through the light, a bloom
+ * of glowing jellyfish — big bells up front, small dim ones behind — pulsing
+ * past on the current.
+ *
+ * Same contract as ../README.md: native-driven loops only, static geometry
+ * rasterized, scatter tables at module load. Vertical travel tiles the way
+ * Starfield tiles horizontally — a two-height layer, everything drawn twice
+ * one height apart, translated a full height per loop so the seam never
+ * shows. Wobble and sway are multi-stop interpolates on the SAME loop value —
+ * never `Animated.sequence([timing, loop])`, which silently fails to drive
+ * natively.
+ */
+
+import { memo } from "react";
+import { Animated, Dimensions, View } from "react-native";
+import { absoluteFill } from "../../../utils/absoluteFill.js";
+import { Base, LinearFade, RadialGlow, RasterLayer, Vignette, useLoop, usePulse } from "../primitives.js";
+import { scatter, withAlpha } from "../rng.js";
+
+// ============================================================================
+// Shared water: surface light, god rays, drifting particles
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * God rays: elongated squashed `RadialGlow`s hanging from above the surface.
+ * Squashed glows are circles under a scale, and circles antialias cleanly at
+ * any angle — the reason these aren't rotated strip stacks, which band.
+ * The shimmer is ONE node over the whole fan.
+ */
+const Rays = /*#__PURE__*/memo(function Rays({
+  width,
+  rays,
+  animated
+}) {
+  const shimmer = usePulse(9000, animated);
+  const opacity = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.6, 1]
+  });
+  // Geometry is sized from the WINDOW, not the modal — resizing the modal
+  // must reveal more or less water, never stretch the light. Only each ray's
+  // POSITION distributes across the live width.
+  const refW = Dimensions.get("window").width;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [absoluteFill, {
+      opacity
+    }],
+    pointerEvents: "none",
+    children: rays.map((ray, i) => {
+      const size = refW * ray.size;
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: width * ray.at - size / 2,
+          top: -size * 0.35,
+          width: size,
+          height: size,
+          transform: [{
+            rotate: `${ray.tilt}deg`
+          }, {
+            scaleX: 0.2
+          }, {
+            scaleY: 1.15
+          }]
+        },
+        children: /*#__PURE__*/_jsx(RadialGlow, {
+          size: size,
+          color: "#2C6373",
+          alpha: ray.alpha,
+          rings: 7,
+          falloff: 1.6
+        })
+      }, i);
+    })
+  });
+});
+
+/**
+ * A band of particles travelling a full surface-height per loop — direction
+ * "down" is marine snow, "up" is anything buoyant. `render` draws one
+ * particle so each preset owns its look; `sway` (px) adds a whole-layer
+ * side-to-side wobble keyframed onto the same node.
+ */
+export const DriftBand = /*#__PURE__*/memo(function DriftBand({
+  table,
+  count,
+  travelS,
+  direction,
+  sway = 0,
+  width,
+  height,
+  animated,
+  render
+}) {
+  const t = useLoop(travelS * 1000, animated);
+  const translateY = t.interpolate({
+    inputRange: [0, 1],
+    outputRange: direction === "down" ? [0, height] : [0, -height]
+  });
+  const translateX = t.interpolate({
+    inputRange: [0, 0.25, 0.5, 0.75, 1],
+    outputRange: [0, sway, 0, -sway, 0]
+  });
+  const parts = [];
+  for (let i = 0; i < count; i++) {
+    const x = table[i * 3] * width;
+    const y = table[i * 3 + 1] * height;
+    const size = table[i * 3 + 2];
+    for (let copy = 0; copy < 2; copy++) {
+      parts.push(render(x, y + copy * height, size, `${i}-${copy}`));
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: "absolute",
+      left: 0,
+      top: direction === "down" ? -height : 0,
+      width,
+      height: height * 2
+    }, {
+      transform: [{
+        translateY
+      }, {
+        translateX
+      }]
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(RasterLayer, {
+      style: {
+        width,
+        height: height * 2
+      },
+      children: parts
+    })
+  });
+});
+
+/** The shared floor: base coat + surface light. */
+export const Water = /*#__PURE__*/memo(function Water({
+  height,
+  vignette = 0.5,
+  base = "#030608",
+  wash = "#102833",
+  washAlpha = 0.5,
+  children
+}) {
+  return (
+    /*#__PURE__*/
+    // Clips: geometry is window-sized now, so a small modal is a crop into
+    // the scene rather than a scaled-down copy of it.
+    _jsxs(View, {
+      style: [absoluteFill, {
+        overflow: "hidden"
+      }],
+      pointerEvents: "none",
+      children: [/*#__PURE__*/_jsx(Base, {
+        color: base
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: 0,
+          height: height * 0.55
+        },
+        children: /*#__PURE__*/_jsx(LinearFade, {
+          color: wash,
+          from: washAlpha,
+          to: 0,
+          direction: "down",
+          bands: 20,
+          flattenBase: base
+        })
+      }), children, /*#__PURE__*/_jsx(Vignette, {
+        color: "#010304",
+        alpha: vignette,
+        spread: 0.36
+      })]
+    })
+  );
+});
+
+// ============================================================================
+// Abyss — a surface light fanning into the deep
+// ============================================================================
+
+const ABYSS_BASE = "#04080F";
+
+/**
+ * The whole scene radiates from ONE bright point at the top-centre surface:
+ * a hot bloom, and a fan of beams pivoting from it — each beam is the
+ * Lighthouse construction (a squashed `RadialGlow` in the right half of an
+ * end-pivot container; never rotated strips, which band). The beams' dim
+ * near-ends hide under the source bloom, so the composite is brightest at
+ * the surface and dies into the dark, like the reference.
+ *
+ * Beams: [angle° (90 = straight down), squash, alpha, color] — brightest
+ * near vertical, dimming toward the fan's edges.
+ */
+const ABYSS_BEAMS = [[46, 0.05, 0.08, "#35598F"], [64, 0.07, 0.12, "#466FA8"], [81, 0.09, 0.16, "#5580BE"], [97, 0.08, 0.15, "#5580BE"], [114, 0.06, 0.11, "#466FA8"], [133, 0.05, 0.07, "#35598F"]];
+const RayFan = /*#__PURE__*/memo(function RayFan({
+  width,
+  animated
+}) {
+  const shimmer = usePulse(9000, animated);
+  const opacity = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.65, 1]
+  });
+  // Window-sized geometry (the fixed-geometry contract): the source's
+  // POSITION follows the modal's top-centre, nothing rescales.
+  const ref = Dimensions.get("window");
+  const reach = ref.height * 0.62;
+  const bloom = Math.min(Math.min(ref.width, ref.height) * 0.42, 360);
+  const sx = width * 0.5;
+  const sy = -10;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: [absoluteFill, {
+      opacity
+    }],
+    pointerEvents: "none",
+    children: [ABYSS_BEAMS.map(([deg, squash, alpha, color], i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: sx - reach,
+        top: sy - reach / 2,
+        width: reach * 2,
+        height: reach,
+        transform: [{
+          rotate: `${deg}deg`
+        }]
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: reach,
+          top: 0,
+          width: reach,
+          height: reach,
+          transform: [{
+            scaleY: squash
+          }]
+        },
+        children: /*#__PURE__*/_jsx(RadialGlow, {
+          size: reach,
+          color: color,
+          alpha: alpha,
+          rings: 8,
+          falloff: 1.5
+        })
+      })
+    }, i)), /*#__PURE__*/_jsx(RadialGlow, {
+      size: bloom,
+      color: "#BFD9F5",
+      alpha: 0.16,
+      rings: 24,
+      falloff: 1.9,
+      style: {
+        position: "absolute",
+        left: sx - bloom / 2,
+        top: sy - bloom / 2
+      }
+    }), /*#__PURE__*/_jsx(RadialGlow, {
+      size: 72,
+      color: "#E8F2FC",
+      alpha: 0.3,
+      rings: 12,
+      falloff: 1.5,
+      style: {
+        position: "absolute",
+        left: sx - 36,
+        top: sy - 36
+      }
+    })]
+  });
+});
+
+/** Stride 3: x, y, size-draw. Nearer bands are sparser and faster. */
+const SNOW_BANDS = [{
+  count: 22,
+  travelS: 30,
+  seed: 0x61f3
+}, {
+  count: 14,
+  travelS: 21,
+  seed: 0x8d2b
+}, {
+  count: 8,
+  travelS: 14,
+  seed: 0xc55d
+}];
+const SNOW_TABLES = SNOW_BANDS.map(b => scatter(b.seed, b.count * 3));
+function snowFlake(dia, alpha, color = "#A8D8E0") {
+  return (x, y, _size, key) => /*#__PURE__*/_jsx(View, {
+    style: {
+      position: "absolute",
+      left: x - dia / 2,
+      top: y - dia / 2,
+      width: dia,
+      height: dia,
+      borderRadius: dia / 2,
+      backgroundColor: withAlpha(color, alpha)
+    }
+  }, key);
+}
+
+/**
+ * The bigger motes in the reference are little PLUS sparkles, not dots —
+ * two crossed bars, size varied per flake off the scatter stream.
+ */
+function sparkleFlake(alpha, color = "#D8E6F8") {
+  return (x, y, size, key) => {
+    const s = 5 + size * 4;
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "absolute",
+        left: x - s / 2,
+        top: y - s / 2,
+        width: s,
+        height: s
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: s / 2 - 0.75,
+          width: s,
+          height: 1.5,
+          borderRadius: 0.75,
+          backgroundColor: withAlpha(color, alpha)
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: s / 2 - 0.75,
+          top: 0,
+          width: 1.5,
+          height: s,
+          borderRadius: 0.75,
+          backgroundColor: withAlpha(color, alpha)
+        }
+      })]
+    }, key);
+  };
+}
+
+/** The original marine snow: plain dots, nearer bands bigger and brighter. */
+const ABYSS_RENDERS = [snowFlake(1.3, 0.26), snowFlake(1.9, 0.38), snowFlake(2.6, 0.5)];
+export const Abyss = /*#__PURE__*/memo(function Abyss(props) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  return /*#__PURE__*/_jsxs(Water, {
+    height: height,
+    base: ABYSS_BASE,
+    wash: "#12264A",
+    washAlpha: 0.55,
+    children: [/*#__PURE__*/_jsx(RayFan, {
+      width: width,
+      animated: animated
+    }), SNOW_BANDS.map((band, i) => /*#__PURE__*/_jsx(DriftBand, {
+      table: SNOW_TABLES[i],
+      count: band.count,
+      travelS: band.travelS,
+      direction: "down",
+      width: width,
+      height: height,
+      animated: animated,
+      render: ABYSS_RENDERS[i]
+    }, i))]
+  });
+});
+
+// ============================================================================
+// Bubbles — rising through the light
+// ============================================================================
+
+const BUBBLE_RAYS = [{
+  at: 0.3,
+  tilt: -10,
+  size: 0.95,
+  alpha: 0.2
+}, {
+  at: 0.68,
+  tilt: 6,
+  size: 0.8,
+  alpha: 0.16
+}];
+
+// Alpha lesson from round 2 applies underwater too: anything fainter than
+// ~0.3 vanishes under the vignette and the rows' own translucency.
+const BUBBLE_BANDS = [{
+  count: 14,
+  dia: 3,
+  alpha: 0.3,
+  travelS: 26,
+  sway: 4,
+  seed: 0x71a9
+}, {
+  count: 10,
+  dia: 5,
+  alpha: 0.42,
+  travelS: 18,
+  sway: -6,
+  seed: 0x93cd
+}, {
+  count: 7,
+  dia: 8,
+  alpha: 0.54,
+  travelS: 12,
+  sway: 8,
+  seed: 0xb5ef
+}];
+const BUBBLE_TABLES = BUBBLE_BANDS.map(b => scatter(b.seed, b.count * 3));
+
+/**
+ * A bubble is a RING with an off-centre highlight — the highlight is the
+ * entire difference between "dot" and "bubble".
+ */
+function bubble(dia, alpha) {
+  return (x, y, size, key) => {
+    const d = dia * (0.7 + size * 0.6);
+    const hi = Math.max(1.2, d * 0.22);
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        position: "absolute",
+        left: x - d / 2,
+        top: y - d / 2,
+        width: d,
+        height: d
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: d,
+          height: d,
+          borderRadius: d / 2,
+          borderWidth: 1,
+          borderColor: withAlpha("#9FE5F2", alpha)
+        }
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          position: "absolute",
+          left: d * 0.24,
+          top: d * 0.18,
+          width: hi,
+          height: hi,
+          borderRadius: hi / 2,
+          backgroundColor: withAlpha("#D8F5FB", alpha + 0.18)
+        }
+      })]
+    }, key);
+  };
+}
+export const Bubbles = /*#__PURE__*/memo(function Bubbles(props) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  return /*#__PURE__*/_jsxs(Water, {
+    height: height,
+    children: [/*#__PURE__*/_jsx(Rays, {
+      width: width,
+      rays: BUBBLE_RAYS,
+      animated: animated
+    }), BUBBLE_BANDS.map((band, i) => /*#__PURE__*/_jsx(DriftBand, {
+      table: BUBBLE_TABLES[i],
+      count: band.count,
+      travelS: band.travelS,
+      direction: "up",
+      sway: band.sway,
+      width: width,
+      height: height,
+      animated: animated,
+      render: bubble(band.dia, band.alpha)
+    }, i))]
+  });
+});
+
+// ============================================================================
+// Jellyfish — pulsing past on the current
+// ============================================================================
+
+const JELLY_RAYS = [{
+  at: 0.25,
+  tilt: -12,
+  size: 0.9,
+  alpha: 0.18
+}, {
+  at: 0.62,
+  tilt: 5,
+  size: 0.85,
+  alpha: 0.15
+}];
+
+/**
+ * `phase` staggers where each jelly is in its climb at mount, so the water is
+ * never empty while they all wait at the bottom. The offset is baked into the
+ * translateY interpolate as a piecewise ramp: the wrap-around jump lands
+ * off-screen at BOTH ends (above the top → below the bottom), so the loop
+ * seam is never visible.
+ */
+const JELLIES = [
+// Mount order is paint order: small dim jellies first — they read as
+// distance (slower, no pulse) and the big ones drift over them.
+{
+  x: 0.5,
+  w: 18,
+  travelS: 60,
+  pulseMs: 3000,
+  pulses: false,
+  sway: 8,
+  dim: true,
+  phase: 0.78
+}, {
+  x: 0.78,
+  w: 16,
+  travelS: 64,
+  pulseMs: 3000,
+  pulses: false,
+  sway: 7,
+  dim: true,
+  phase: 0.62
+}, {
+  x: 0.2,
+  w: 14,
+  travelS: 70,
+  pulseMs: 3000,
+  pulses: false,
+  sway: -6,
+  dim: true,
+  phase: 0.3
+},
+// The stars: big bells up front, each pulsing on its own clock.
+{
+  x: 0.12,
+  w: 54,
+  travelS: 40,
+  pulseMs: 3000,
+  pulses: true,
+  sway: -18,
+  dim: false,
+  phase: 0.85
+}, {
+  x: 0.28,
+  w: 46,
+  travelS: 34,
+  pulseMs: 2600,
+  pulses: true,
+  sway: 16,
+  dim: false,
+  phase: 0.55
+}, {
+  x: 0.45,
+  w: 40,
+  travelS: 38,
+  pulseMs: 3150,
+  pulses: true,
+  sway: 14,
+  dim: false,
+  phase: 0.35
+}, {
+  x: 0.68,
+  w: 36,
+  travelS: 46,
+  pulseMs: 3400,
+  pulses: true,
+  sway: -12,
+  dim: false,
+  phase: 0.2
+}, {
+  x: 0.88,
+  w: 28,
+  travelS: 52,
+  pulseMs: 2850,
+  pulses: true,
+  sway: 10,
+  dim: false,
+  phase: 0.05
+}];
+
+/** Tentacles as fractions of the bell width: [dx, length, thick, tilt]. */
+const TENTACLES = [[-0.32, 1.1, 1, -5], [-0.1, 1.35, 1, -2], [0.14, 1.2, 1, 3], [0.34, 0.95, 1, 6], [-0.22, 0.6, 1.5, -3], [0.24, 0.55, 1.5, 4]];
+const Jelly = /*#__PURE__*/memo(function Jelly({
+  index,
+  width,
+  height,
+  animated
+}) {
+  const j = JELLIES[index];
+  const rise = useLoop(j.travelS * 1000, animated);
+  const squish = usePulse(j.pulseMs, animated && j.pulses);
+  const w = j.w;
+  const bellH = w * 0.78;
+  const jellyH = w * 2.2;
+  const travel = height + jellyH * 1.5;
+  // Piecewise phase offset: same climb speed on both segments, with the
+  // (invisible) top→bottom teleport at t = 1 - phase.
+  const wrap = 1 - j.phase;
+  const translateY = rise.interpolate({
+    inputRange: [0, wrap, Math.min(wrap + 0.0001, 0.9999), 1],
+    outputRange: [-travel * j.phase, -travel, 0, -travel * j.phase]
+  });
+  const translateX = rise.interpolate({
+    inputRange: [0, 0.2, 0.45, 0.7, 1],
+    outputRange: [0, j.sway, -j.sway * 0.6, j.sway * 0.8, 0]
+  });
+  const scaleX = squish.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 1.07]
+  });
+  const scaleY = squish.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0.9]
+  });
+  const stroke = j.dim ? 0.16 : 0.3;
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    style: {
+      position: "absolute",
+      left: width * j.x - w,
+      // Starts just below the surface's bottom edge and exits above the
+      // top, so the loop's snap back happens entirely off-screen.
+      top: height,
+      width: w * 2,
+      height: jellyH,
+      transform: [{
+        translateY
+      }, {
+        translateX
+      }]
+    },
+    pointerEvents: "none",
+    children: [/*#__PURE__*/_jsx(RadialGlow, {
+      size: w * 1.8,
+      color: "#7DEBF7",
+      alpha: j.dim ? 0.08 : 0.14,
+      rings: 6,
+      falloff: 1.8,
+      style: {
+        position: "absolute",
+        left: w - w * 0.9,
+        top: bellH / 2 - w * 0.9
+      }
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        position: "absolute",
+        left: w / 2,
+        top: 0,
+        width: w,
+        height: bellH,
+        transform: [{
+          scaleX
+        }, {
+          scaleY
+        }]
+      },
+      pointerEvents: "none",
+      children: /*#__PURE__*/_jsxs(View, {
+        style: {
+          position: "absolute",
+          left: 0,
+          top: 0,
+          width: w,
+          height: bellH,
+          borderTopLeftRadius: w / 2,
+          borderTopRightRadius: w / 2,
+          borderBottomLeftRadius: w * 0.18,
+          borderBottomRightRadius: w * 0.18,
+          backgroundColor: withAlpha("#67E8F9", 0.09),
+          borderWidth: 1,
+          borderColor: withAlpha("#8FE9F7", stroke),
+          overflow: "hidden"
+        },
+        children: [/*#__PURE__*/_jsx(RadialGlow, {
+          size: w * 0.9,
+          color: "#7DEBF7",
+          alpha: j.dim ? 0.2 : 0.38,
+          rings: 6,
+          falloff: 1.6,
+          style: {
+            position: "absolute",
+            left: w * 0.05,
+            top: -w * 0.12
+          }
+        }), !j.dim && /*#__PURE__*/_jsx(RadialGlow, {
+          size: w * 0.5,
+          color: "#D9FBFF",
+          alpha: 0.28,
+          rings: 5,
+          falloff: 1.4,
+          style: {
+            position: "absolute",
+            left: w * 0.25,
+            top: w * 0.06
+          }
+        })]
+      })
+    }), TENTACLES.map(([dx, len, thick, tilt], i) => /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        left: w + dx * w,
+        top: bellH - 2,
+        width: thick,
+        height: w * len,
+        borderRadius: thick,
+        backgroundColor: withAlpha("#8FE9F7", j.dim ? 0.12 : 0.2),
+        transform: [{
+          rotate: `${tilt}deg`
+        }]
+      }
+    }, i))]
+  });
+});
+const JELLY_SNOW = scatter(0xd7a3, 14 * 3);
+export const Jellyfish = /*#__PURE__*/memo(function Jellyfish(props) {
+  const {
+    width,
+    height,
+    animated
+  } = props;
+  return /*#__PURE__*/_jsxs(Water, {
+    height: height,
+    children: [/*#__PURE__*/_jsx(Rays, {
+      width: width,
+      rays: JELLY_RAYS,
+      animated: animated
+    }), /*#__PURE__*/_jsx(DriftBand, {
+      table: JELLY_SNOW,
+      count: 14,
+      travelS: 32,
+      direction: "down",
+      width: width,
+      height: height,
+      animated: animated,
+      render: snowFlake(1.4, 0.3)
+    }), JELLIES.map((_, i) => /*#__PURE__*/_jsx(Jelly, {
+      index: i,
+      ...props
+    }, i))]
+  });
+});