@buoy-gg/shared-ui 7.0.41 → 7.0.42

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

@@ -1,753 +1 @@
-"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))]
-  });
-});
+"use strict";import{memo as f}from"react";import{Animated as B,Dimensions as _,View as h}from"react-native";import{absoluteFill as A}from"../../../utils/absoluteFill.js";import{Base as j,LinearFade as T,RadialGlow as y,RasterLayer as $,Vignette as X,useLoop as D,usePulse as L}from"../primitives.js";import{scatter as z,withAlpha as w}from"../rng.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";const Y=f(function l({width:n,rays:r,animated:a}){const i=L(9e3,a);const e=i.interpolate({inputRange:[0,1],outputRange:[.6,1]});const t=_.get("window").width;return s(B.View,{style:[A,{opacity:e}],pointerEvents:"none",children:r.map((p,o)=>{const u=t*p.size;return s(h,{style:{position:"absolute",left:n*p.at-u/2,top:-u*.35,width:u,height:u,transform:[{rotate:`${p.tilt}deg`},{scaleX:.2},{scaleY:1.15}]},children:s(y,{size:u,color:"#2C6373",alpha:p.alpha,rings:7,falloff:1.6})},o)})})});export const DriftBand=f(function l({table:n,count:r,travelS:a,direction:i,sway:e=0,width:t,height:p,animated:o,render:u}){const m=D(a*1e3,o);const g=m.interpolate({inputRange:[0,1],outputRange:i==="down"?[0,p]:[0,-p]});const b=m.interpolate({inputRange:[0,.25,.5,.75,1],outputRange:[0,e,0,-e,0]});const S=[];for(let d=0;d<r;d++){const F=n[d*3]*t;const v=n[d*3+1]*p;const x=n[d*3+2];for(let R=0;R<2;R++){S.push(u(F,v+R*p,x,`${d}-${R}`))}}return s(B.View,{style:[{position:"absolute",left:0,top:i==="down"?-p:0,width:t,height:p*2},{transform:[{translateY:g},{translateX:b}]}],pointerEvents:"none",children:s($,{style:{width:t,height:p*2},children:S})})});export const Water=f(function l({height:n,vignette:r=.5,base:a="#030608",wash:i="#102833",washAlpha:e=.5,children:t}){return c(h,{style:[A,{overflow:"hidden"}],pointerEvents:"none",children:[s(j,{color:a}),s(h,{style:{position:"absolute",left:0,right:0,top:0,height:n*.55},children:s(T,{color:i,from:e,to:0,direction:"down",bands:20,flattenBase:a})}),t,s(X,{color:"#010304",alpha:r,spread:.36})]})});const O="#04080F";const U=[[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 H=f(function l({width:n,animated:r}){const a=L(9e3,r);const i=a.interpolate({inputRange:[0,1],outputRange:[.65,1]});const e=_.get("window");const t=e.height*.62;const p=Math.min(Math.min(e.width,e.height)*.42,360);const o=n*.5;const u=-10;return c(B.View,{style:[A,{opacity:i}],pointerEvents:"none",children:[U.map(([m,g,b,S],d)=>s(h,{style:{position:"absolute",left:o-t,top:u-t/2,width:t*2,height:t,transform:[{rotate:`${m}deg`}]},children:s(h,{style:{position:"absolute",left:t,top:0,width:t,height:t,transform:[{scaleY:g}]},children:s(y,{size:t,color:S,alpha:b,rings:8,falloff:1.5})})},d)),s(y,{size:p,color:"#BFD9F5",alpha:.16,rings:24,falloff:1.9,style:{position:"absolute",left:o-p/2,top:u-p/2}}),s(y,{size:72,color:"#E8F2FC",alpha:.3,rings:12,falloff:1.5,style:{position:"absolute",left:o-36,top:u-36}})]})});const C=[{count:22,travelS:30,seed:25075},{count:14,travelS:21,seed:36139},{count:8,travelS:14,seed:50525}];const q=C.map(l=>z(l.seed,l.count*3));function E(l,n,r="#A8D8E0"){return(a,i,e,t)=>s(h,{style:{position:"absolute",left:a-l/2,top:i-l/2,width:l,height:l,borderRadius:l/2,backgroundColor:w(r,n)}},t)}function rt(l,n="#D8E6F8"){return(r,a,i,e)=>{const t=5+i*4;return c(h,{style:{position:"absolute",left:r-t/2,top:a-t/2,width:t,height:t},children:[s(h,{style:{position:"absolute",left:0,top:t/2-.75,width:t,height:1.5,borderRadius:.75,backgroundColor:w(n,l)}}),s(h,{style:{position:"absolute",left:t/2-.75,top:0,width:1.5,height:t,borderRadius:.75,backgroundColor:w(n,l)}})]},e)}}const G=[E(1.3,.26),E(1.9,.38),E(2.6,.5)];export const Abyss=f(function l(n){const{width:r,height:a,animated:i}=n;return c(Water,{height:a,base:O,wash:"#12264A",washAlpha:.55,children:[s(H,{width:r,animated:i}),C.map((e,t)=>s(DriftBand,{table:q[t],count:e.count,travelS:e.travelS,direction:"down",width:r,height:a,animated:i,render:G[t]},t))]})});const I=[{at:.3,tilt:-10,size:.95,alpha:.2},{at:.68,tilt:6,size:.8,alpha:.16}];const k=[{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 P=k.map(l=>z(l.seed,l.count*3));function K(l,n){return(r,a,i,e)=>{const t=l*(.7+i*.6);const p=Math.max(1.2,t*.22);return c(h,{style:{position:"absolute",left:r-t/2,top:a-t/2,width:t,height:t},children:[s(h,{style:{position:"absolute",left:0,top:0,width:t,height:t,borderRadius:t/2,borderWidth:1,borderColor:w("#9FE5F2",n)}}),s(h,{style:{position:"absolute",left:t*.24,top:t*.18,width:p,height:p,borderRadius:p/2,backgroundColor:w("#D8F5FB",n+.18)}})]},e)}}export const Bubbles=f(function l(n){const{width:r,height:a,animated:i}=n;return c(Water,{height:a,children:[s(Y,{width:r,rays:I,animated:i}),k.map((e,t)=>s(DriftBand,{table:P[t],count:e.count,travelS:e.travelS,direction:"up",sway:e.sway,width:r,height:a,animated:i,render:K(e.dia,e.alpha)},t))]})});const Q=[{at:.25,tilt:-12,size:.9,alpha:.18},{at:.62,tilt:5,size:.85,alpha:.15}];const W=[{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 Z=[[-.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 tt=f(function l({index:n,width:r,height:a,animated:i}){const e=W[n];const t=D(e.travelS*1e3,i);const p=L(e.pulseMs,i&&e.pulses);const o=e.w;const u=o*.78;const m=o*2.2;const g=a+m*1.5;const b=1-e.phase;const S=t.interpolate({inputRange:[0,b,Math.min(b+1e-4,.9999),1],outputRange:[-g*e.phase,-g,0,-g*e.phase]});const d=t.interpolate({inputRange:[0,.2,.45,.7,1],outputRange:[0,e.sway,-e.sway*.6,e.sway*.8,0]});const F=p.interpolate({inputRange:[0,1],outputRange:[1,1.07]});const v=p.interpolate({inputRange:[0,1],outputRange:[1,.9]});const x=e.dim?.16:.3;return c(B.View,{style:{position:"absolute",left:r*e.x-o,top:a,width:o*2,height:m,transform:[{translateY:S},{translateX:d}]},pointerEvents:"none",children:[s(y,{size:o*1.8,color:"#7DEBF7",alpha:e.dim?.08:.14,rings:6,falloff:1.8,style:{position:"absolute",left:o-o*.9,top:u/2-o*.9}}),s(B.View,{style:{position:"absolute",left:o/2,top:0,width:o,height:u,transform:[{scaleX:F},{scaleY:v}]},pointerEvents:"none",children:c(h,{style:{position:"absolute",left:0,top:0,width:o,height:u,borderTopLeftRadius:o/2,borderTopRightRadius:o/2,borderBottomLeftRadius:o*.18,borderBottomRightRadius:o*.18,backgroundColor:w("#67E8F9",.09),borderWidth:1,borderColor:w("#8FE9F7",x),overflow:"hidden"},children:[s(y,{size:o*.9,color:"#7DEBF7",alpha:e.dim?.2:.38,rings:6,falloff:1.6,style:{position:"absolute",left:o*.05,top:-o*.12}}),!e.dim&&s(y,{size:o*.5,color:"#D9FBFF",alpha:.28,rings:5,falloff:1.4,style:{position:"absolute",left:o*.25,top:o*.06}})]})}),Z.map(([R,J,M,N],V)=>s(h,{style:{position:"absolute",left:o+R*o,top:u-2,width:M,height:o*J,borderRadius:M,backgroundColor:w("#8FE9F7",e.dim?.12:.2),transform:[{rotate:`${N}deg`}]}},V))]})});const et=z(55203,14*3);export const Jellyfish=f(function l(n){const{width:r,height:a,animated:i}=n;return c(Water,{height:a,children:[s(Y,{width:r,rays:Q,animated:i}),s(DriftBand,{table:et,count:14,travelS:32,direction:"down",width:r,height:a,animated:i,render:E(1.4,.3)}),W.map((e,t)=>s(tt,{index:t,...n},t))]})});