@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,757 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Water = exports.Jellyfish = exports.DriftBand = exports.Bubbles = exports.Abyss = 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");
-/**
- * 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.
- */
-
-// ============================================================================
-// Shared water: surface light, god rays, drifting particles
-// ============================================================================
-
-/**
- * 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__*/(0, _react.memo)(function Rays({
-  width,
-  rays,
-  animated
-}) {
-  const shimmer = (0, _primitives.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 = _reactNative.Dimensions.get("window").width;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [_absoluteFill.absoluteFill, {
-      opacity
-    }],
-    pointerEvents: "none",
-    children: rays.map((ray, i) => {
-      const size = refW * ray.size;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_primitives.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.
- */
-const DriftBand = exports.DriftBand = /*#__PURE__*/(0, _react.memo)(function DriftBand({
-  table,
-  count,
-  travelS,
-  direction,
-  sway = 0,
-  width,
-  height,
-  animated,
-  render
-}) {
-  const t = (0, _primitives.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [{
-      position: "absolute",
-      left: 0,
-      top: direction === "down" ? -height : 0,
-      width,
-      height: height * 2
-    }, {
-      transform: [{
-        translateY
-      }, {
-        translateX
-      }]
-    }],
-    pointerEvents: "none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RasterLayer, {
-      style: {
-        width,
-        height: height * 2
-      },
-      children: parts
-    })
-  });
-});
-
-/** The shared floor: base coat + surface light. */
-const Water = exports.Water = /*#__PURE__*/(0, _react.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.
-    (0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [_absoluteFill.absoluteFill, {
-        overflow: "hidden"
-      }],
-      pointerEvents: "none",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Base, {
-        color: base
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          top: 0,
-          height: height * 0.55
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.LinearFade, {
-          color: wash,
-          from: washAlpha,
-          to: 0,
-          direction: "down",
-          bands: 20,
-          flattenBase: base
-        })
-      }), children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _react.memo)(function RayFan({
-  width,
-  animated
-}) {
-  const shimmer = (0, _primitives.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 = _reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-    style: [_absoluteFill.absoluteFill, {
-      opacity
-    }],
-    pointerEvents: "none",
-    children: [ABYSS_BEAMS.map(([deg, squash, alpha, color], i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: sx - reach,
-        top: sy - reach / 2,
-        width: reach * 2,
-        height: reach,
-        transform: [{
-          rotate: `${deg}deg`
-        }]
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: reach,
-          top: 0,
-          width: reach,
-          height: reach,
-          transform: [{
-            scaleY: squash
-          }]
-        },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RadialGlow, {
-          size: reach,
-          color: color,
-          alpha: alpha,
-          rings: 8,
-          falloff: 1.5
-        })
-      })
-    }, i)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_primitives.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 => (0, _rng.scatter)(b.seed, b.count * 3));
-function snowFlake(dia, alpha, color = "#A8D8E0") {
-  return (x, y, _size, key) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      position: "absolute",
-      left: x - dia / 2,
-      top: y - dia / 2,
-      width: dia,
-      height: dia,
-      borderRadius: dia / 2,
-      backgroundColor: (0, _rng.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: x - s / 2,
-        top: y - s / 2,
-        width: s,
-        height: s
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: s / 2 - 0.75,
-          width: s,
-          height: 1.5,
-          borderRadius: 0.75,
-          backgroundColor: (0, _rng.withAlpha)(color, alpha)
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: s / 2 - 0.75,
-          top: 0,
-          width: 1.5,
-          height: s,
-          borderRadius: 0.75,
-          backgroundColor: (0, _rng.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)];
-const Abyss = exports.Abyss = /*#__PURE__*/(0, _react.memo)(function Abyss(props) {
-  const {
-    width,
-    height,
-    animated
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Water, {
-    height: height,
-    base: ABYSS_BASE,
-    wash: "#12264A",
-    washAlpha: 0.55,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RayFan, {
-      width: width,
-      animated: animated
-    }), SNOW_BANDS.map((band, i) => /*#__PURE__*/(0, _jsxRuntime.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 => (0, _rng.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: x - d / 2,
-        top: y - d / 2,
-        width: d,
-        height: d
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: 0,
-          top: 0,
-          width: d,
-          height: d,
-          borderRadius: d / 2,
-          borderWidth: 1,
-          borderColor: (0, _rng.withAlpha)("#9FE5F2", alpha)
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          position: "absolute",
-          left: d * 0.24,
-          top: d * 0.18,
-          width: hi,
-          height: hi,
-          borderRadius: hi / 2,
-          backgroundColor: (0, _rng.withAlpha)("#D8F5FB", alpha + 0.18)
-        }
-      })]
-    }, key);
-  };
-}
-const Bubbles = exports.Bubbles = /*#__PURE__*/(0, _react.memo)(function Bubbles(props) {
-  const {
-    width,
-    height,
-    animated
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Water, {
-    height: height,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rays, {
-      width: width,
-      rays: BUBBLE_RAYS,
-      animated: animated
-    }), BUBBLE_BANDS.map((band, i) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _react.memo)(function Jelly({
-  index,
-  width,
-  height,
-  animated
-}) {
-  const j = JELLIES[index];
-  const rise = (0, _primitives.useLoop)(j.travelS * 1000, animated);
-  const squish = (0, _primitives.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      style: {
-        position: "absolute",
-        left: w / 2,
-        top: 0,
-        width: w,
-        height: bellH,
-        transform: [{
-          scaleX
-        }, {
-          scaleY
-        }]
-      },
-      pointerEvents: "none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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: (0, _rng.withAlpha)("#67E8F9", 0.09),
-          borderWidth: 1,
-          borderColor: (0, _rng.withAlpha)("#8FE9F7", stroke),
-          overflow: "hidden"
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_primitives.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        position: "absolute",
-        left: w + dx * w,
-        top: bellH - 2,
-        width: thick,
-        height: w * len,
-        borderRadius: thick,
-        backgroundColor: (0, _rng.withAlpha)("#8FE9F7", j.dim ? 0.12 : 0.2),
-        transform: [{
-          rotate: `${tilt}deg`
-        }]
-      }
-    }, i))]
-  });
-});
-const JELLY_SNOW = (0, _rng.scatter)(0xd7a3, 14 * 3);
-const Jellyfish = exports.Jellyfish = /*#__PURE__*/(0, _react.memo)(function Jellyfish(props) {
-  const {
-    width,
-    height,
-    animated
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Water, {
-    height: height,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Rays, {
-      width: width,
-      rays: JELLY_RAYS,
-      animated: animated
-    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(Jelly, {
-      index: i,
-      ...props
-    }, i))]
-  });
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.Water=exports.Jellyfish=exports.DriftBand=exports.Bubbles=exports.Abyss=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");const Rays=(0,_react.memo)(function l({width:o,rays:n,animated:i}){const a=(0,_primitives.usePulse)(9e3,i);const e=a.interpolate({inputRange:[0,1],outputRange:[.6,1]});const t=_reactNative.Dimensions.get("window").width;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[_absoluteFill.absoluteFill,{opacity:e}],pointerEvents:"none",children:n.map((r,s)=>{const u=t*r.size;return(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:o*r.at-u/2,top:-u*.35,width:u,height:u,transform:[{rotate:`${r.tilt}deg`},{scaleX:.2},{scaleY:1.15}]},children:(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:u,color:"#2C6373",alpha:r.alpha,rings:7,falloff:1.6})},s)})})});const DriftBand=exports.DriftBand=(0,_react.memo)(function l({table:o,count:n,travelS:i,direction:a,sway:e=0,width:t,height:r,animated:s,render:u}){const h=(0,_primitives.useLoop)(i*1e3,s);const d=h.interpolate({inputRange:[0,1],outputRange:a==="down"?[0,r]:[0,-r]});const c=h.interpolate({inputRange:[0,.25,.5,.75,1],outputRange:[0,e,0,-e,0]});const w=[];for(let p=0;p<n;p++){const m=o[p*3]*t;const x=o[p*3+1]*r;const b=o[p*3+2];for(let f=0;f<2;f++){w.push(u(m,x+f*r,b,`${p}-${f}`))}}return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[{position:"absolute",left:0,top:a==="down"?-r:0,width:t,height:r*2},{transform:[{translateY:d},{translateX:c}]}],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_primitives.RasterLayer,{style:{width:t,height:r*2},children:w})})});const Water=exports.Water=(0,_react.memo)(function l({height:o,vignette:n=.5,base:i="#030608",wash:a="#102833",washAlpha:e=.5,children:t}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[_absoluteFill.absoluteFill,{overflow:"hidden"}],pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_primitives.Base,{color:i}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:0,right:0,top:0,height:o*.55},children:(0,_jsxRuntime.jsx)(_primitives.LinearFade,{color:a,from:e,to:0,direction:"down",bands:20,flattenBase:i})}),t,(0,_jsxRuntime.jsx)(_primitives.Vignette,{color:"#010304",alpha:n,spread:.36})]})});const ABYSS_BASE="#04080F";const ABYSS_BEAMS=[[46,.05,.08,"#35598F"],[64,.07,.12,"#466FA8"],[81,.09,.16,"#5580BE"],[97,.08,.15,"#5580BE"],[114,.06,.11,"#466FA8"],[133,.05,.07,"#35598F"]];const RayFan=(0,_react.memo)(function l({width:o,animated:n}){const i=(0,_primitives.usePulse)(9e3,n);const a=i.interpolate({inputRange:[0,1],outputRange:[.65,1]});const e=_reactNative.Dimensions.get("window");const t=e.height*.62;const r=Math.min(Math.min(e.width,e.height)*.42,360);const s=o*.5;const u=-10;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:[_absoluteFill.absoluteFill,{opacity:a}],pointerEvents:"none",children:[ABYSS_BEAMS.map(([h,d,c,w],p)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:s-t,top:u-t/2,width:t*2,height:t,transform:[{rotate:`${h}deg`}]},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t,top:0,width:t,height:t,transform:[{scaleY:d}]},children:(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:t,color:w,alpha:c,rings:8,falloff:1.5})})},p)),(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:r,color:"#BFD9F5",alpha:.16,rings:24,falloff:1.9,style:{position:"absolute",left:s-r/2,top:u-r/2}}),(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:72,color:"#E8F2FC",alpha:.3,rings:12,falloff:1.5,style:{position:"absolute",left:s-36,top:u-36}})]})});const SNOW_BANDS=[{count:22,travelS:30,seed:25075},{count:14,travelS:21,seed:36139},{count:8,travelS:14,seed:50525}];const SNOW_TABLES=SNOW_BANDS.map(l=>(0,_rng.scatter)(l.seed,l.count*3));function snowFlake(l,o,n="#A8D8E0"){return(i,a,e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:i-l/2,top:a-l/2,width:l,height:l,borderRadius:l/2,backgroundColor:(0,_rng.withAlpha)(n,o)}},t)}function sparkleFlake(l,o="#D8E6F8"){return(n,i,a,e)=>{const t=5+a*4;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"absolute",left:n-t/2,top:i-t/2,width:t,height:t},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:0,top:t/2-.75,width:t,height:1.5,borderRadius:.75,backgroundColor:(0,_rng.withAlpha)(o,l)}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t/2-.75,top:0,width:1.5,height:t,borderRadius:.75,backgroundColor:(0,_rng.withAlpha)(o,l)}})]},e)}}const ABYSS_RENDERS=[snowFlake(1.3,.26),snowFlake(1.9,.38),snowFlake(2.6,.5)];const Abyss=exports.Abyss=(0,_react.memo)(function l(o){const{width:n,height:i,animated:a}=o;return(0,_jsxRuntime.jsxs)(Water,{height:i,base:ABYSS_BASE,wash:"#12264A",washAlpha:.55,children:[(0,_jsxRuntime.jsx)(RayFan,{width:n,animated:a}),SNOW_BANDS.map((e,t)=>(0,_jsxRuntime.jsx)(DriftBand,{table:SNOW_TABLES[t],count:e.count,travelS:e.travelS,direction:"down",width:n,height:i,animated:a,render:ABYSS_RENDERS[t]},t))]})});const BUBBLE_RAYS=[{at:.3,tilt:-10,size:.95,alpha:.2},{at:.68,tilt:6,size:.8,alpha:.16}];const BUBBLE_BANDS=[{count:14,dia:3,alpha:.3,travelS:26,sway:4,seed:29097},{count:10,dia:5,alpha:.42,travelS:18,sway:-6,seed:37837},{count:7,dia:8,alpha:.54,travelS:12,sway:8,seed:46575}];const BUBBLE_TABLES=BUBBLE_BANDS.map(l=>(0,_rng.scatter)(l.seed,l.count*3));function bubble(l,o){return(n,i,a,e)=>{const t=l*(.7+a*.6);const r=Math.max(1.2,t*.22);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"absolute",left:n-t/2,top:i-t/2,width:t,height:t},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:0,top:0,width:t,height:t,borderRadius:t/2,borderWidth:1,borderColor:(0,_rng.withAlpha)("#9FE5F2",o)}}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:t*.24,top:t*.18,width:r,height:r,borderRadius:r/2,backgroundColor:(0,_rng.withAlpha)("#D8F5FB",o+.18)}})]},e)}}const Bubbles=exports.Bubbles=(0,_react.memo)(function l(o){const{width:n,height:i,animated:a}=o;return(0,_jsxRuntime.jsxs)(Water,{height:i,children:[(0,_jsxRuntime.jsx)(Rays,{width:n,rays:BUBBLE_RAYS,animated:a}),BUBBLE_BANDS.map((e,t)=>(0,_jsxRuntime.jsx)(DriftBand,{table:BUBBLE_TABLES[t],count:e.count,travelS:e.travelS,direction:"up",sway:e.sway,width:n,height:i,animated:a,render:bubble(e.dia,e.alpha)},t))]})});const JELLY_RAYS=[{at:.25,tilt:-12,size:.9,alpha:.18},{at:.62,tilt:5,size:.85,alpha:.15}];const JELLIES=[{x:.5,w:18,travelS:60,pulseMs:3e3,pulses:false,sway:8,dim:true,phase:.78},{x:.78,w:16,travelS:64,pulseMs:3e3,pulses:false,sway:7,dim:true,phase:.62},{x:.2,w:14,travelS:70,pulseMs:3e3,pulses:false,sway:-6,dim:true,phase:.3},{x:.12,w:54,travelS:40,pulseMs:3e3,pulses:true,sway:-18,dim:false,phase:.85},{x:.28,w:46,travelS:34,pulseMs:2600,pulses:true,sway:16,dim:false,phase:.55},{x:.45,w:40,travelS:38,pulseMs:3150,pulses:true,sway:14,dim:false,phase:.35},{x:.68,w:36,travelS:46,pulseMs:3400,pulses:true,sway:-12,dim:false,phase:.2},{x:.88,w:28,travelS:52,pulseMs:2850,pulses:true,sway:10,dim:false,phase:.05}];const TENTACLES=[[-.32,1.1,1,-5],[-.1,1.35,1,-2],[.14,1.2,1,3],[.34,.95,1,6],[-.22,.6,1.5,-3],[.24,.55,1.5,4]];const Jelly=(0,_react.memo)(function l({index:o,width:n,height:i,animated:a}){const e=JELLIES[o];const t=(0,_primitives.useLoop)(e.travelS*1e3,a);const r=(0,_primitives.usePulse)(e.pulseMs,a&&e.pulses);const s=e.w;const u=s*.78;const h=s*2.2;const d=i+h*1.5;const c=1-e.phase;const w=t.interpolate({inputRange:[0,c,Math.min(c+1e-4,.9999),1],outputRange:[-d*e.phase,-d,0,-d*e.phase]});const p=t.interpolate({inputRange:[0,.2,.45,.7,1],outputRange:[0,e.sway,-e.sway*.6,e.sway*.8,0]});const m=r.interpolate({inputRange:[0,1],outputRange:[1,1.07]});const x=r.interpolate({inputRange:[0,1],outputRange:[1,.9]});const b=e.dim?.16:.3;return(0,_jsxRuntime.jsxs)(_reactNative.Animated.View,{style:{position:"absolute",left:n*e.x-s,top:i,width:s*2,height:h,transform:[{translateY:w},{translateX:p}]},pointerEvents:"none",children:[(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:s*1.8,color:"#7DEBF7",alpha:e.dim?.08:.14,rings:6,falloff:1.8,style:{position:"absolute",left:s-s*.9,top:u/2-s*.9}}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{position:"absolute",left:s/2,top:0,width:s,height:u,transform:[{scaleX:m},{scaleY:x}]},pointerEvents:"none",children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:{position:"absolute",left:0,top:0,width:s,height:u,borderTopLeftRadius:s/2,borderTopRightRadius:s/2,borderBottomLeftRadius:s*.18,borderBottomRightRadius:s*.18,backgroundColor:(0,_rng.withAlpha)("#67E8F9",.09),borderWidth:1,borderColor:(0,_rng.withAlpha)("#8FE9F7",b),overflow:"hidden"},children:[(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:s*.9,color:"#7DEBF7",alpha:e.dim?.2:.38,rings:6,falloff:1.6,style:{position:"absolute",left:s*.05,top:-s*.12}}),!e.dim&&(0,_jsxRuntime.jsx)(_primitives.RadialGlow,{size:s*.5,color:"#D9FBFF",alpha:.28,rings:5,falloff:1.4,style:{position:"absolute",left:s*.25,top:s*.06}})]})}),TENTACLES.map(([f,y,g,j],R)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:{position:"absolute",left:s+f*s,top:u-2,width:g,height:s*y,borderRadius:g,backgroundColor:(0,_rng.withAlpha)("#8FE9F7",e.dim?.12:.2),transform:[{rotate:`${j}deg`}]}},R))]})});const JELLY_SNOW=(0,_rng.scatter)(55203,14*3);const Jellyfish=exports.Jellyfish=(0,_react.memo)(function l(o){const{width:n,height:i,animated:a}=o;return(0,_jsxRuntime.jsxs)(Water,{height:i,children:[(0,_jsxRuntime.jsx)(Rays,{width:n,rays:JELLY_RAYS,animated:a}),(0,_jsxRuntime.jsx)(DriftBand,{table:JELLY_SNOW,count:14,travelS:32,direction:"down",width:n,height:i,animated:a,render:snowFlake(1.4,.3)}),JELLIES.map((e,t)=>(0,_jsxRuntime.jsx)(Jelly,{index:t,...o},t))]})});