@buoy-gg/shared-ui 7.0.26 → 7.0.28

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

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MeteorShower = 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");
+/**
+ * MeteorShower — shooting stars that slam into the walls.
+ *
+ * Each meteor streaks in from off-screen, hits an EDGE of the surface, and
+ * bursts: a flash, an expanding shockwave ring (half-clipped by the wall,
+ * which is what sells the impact), and a handful of sparks ricocheting back
+ * into the room. The whole life cycle — parked invisible, streak, impact,
+ * decay — is keyframed into interpolate stops on ONE plain native loop per
+ * meteor; `Animated.sequence([timing, loop])` silently fails to drive
+ * natively, so nothing here sequences.
+ *
+ * This used to be a standalone "Meteors" preset with its own 40-star sky;
+ * that scene was folded into Deep Field (which supplies the far better sky),
+ * so what remains is just the meteor LAYER — transparent, composed on top of
+ * a host scene by `deepField.tsx`.
+ *
+ * Same contract as ../README.md: keyframes on module-load constants, no
+ * `transformOrigin`.
+ */
+
+/**
+ * `to` is ON a wall — that's the impact point. `sparkArc` is the hemisphere
+ * (in degrees) sparks scatter into, pointed back away from the wall the
+ * meteor just hit. Different periods keep the two impacts from syncing up.
+ */
+const METEORS = [{
+  from: [0.08, -0.06],
+  to: [0.99, 0.36],
+  periodMs: 11000,
+  window: [0.05, 0.15],
+  sparkArc: [110, 250] // right wall → sparks fly left
+}, {
+  from: [0.92, -0.08],
+  to: [0.01, 0.62],
+  periodMs: 15500,
+  window: [0.56, 0.66],
+  sparkArc: [-70, 70] // left wall → sparks fly right
+}];
+const SPARKS_PER_IMPACT = 6;
+const SHOCKWAVE_DIA = 92;
+const Meteor = /*#__PURE__*/(0, _react.memo)(function Meteor({
+  index,
+  width,
+  height,
+  animated
+}) {
+  const m = METEORS[index];
+  const t = (0, _primitives.useLoop)(m.periodMs, animated);
+  const [a, b] = m.window;
+  const x0 = m.from[0] * width;
+  const y0 = m.from[1] * height;
+  const x1 = m.to[0] * width;
+  const y1 = m.to[1] * height;
+  const angleRad = Math.atan2(y1 - y0, x1 - x0);
+  const angle = angleRad * 180 / Math.PI;
+  // The 108x16 box rotates about its center (54, 8) and the bright head sits
+  // at local (96, 8), so the head leads the box's top-left corner by this
+  // much in world space. Translations must anchor the HEAD to the path, or it
+  // crosses the wall long before t=b and the burst lands off the flight line.
+  const headDx = 54 + 42 * Math.cos(angleRad);
+  const headDy = 8 + 42 * Math.sin(angleRad);
+
+  // --- The streak ---------------------------------------------------------
+  const translateX = t.interpolate({
+    inputRange: [0, a, b, 1],
+    outputRange: [x0 - headDx, x0 - headDx, x1 - headDx, x1 - headDx]
+  });
+  const translateY = t.interpolate({
+    inputRange: [0, a, b, 1],
+    outputRange: [y0 - headDy, y0 - headDy, y1 - headDy, y1 - headDy]
+  });
+  const streakOpacity = t.interpolate({
+    inputRange: [0, a, a + (b - a) * 0.15, b - (b - a) * 0.1, b, 1],
+    outputRange: [0, 0, 1, 1, 0, 0]
+  });
+  const trail = [];
+  for (let i = 0; i < 8; i++) {
+    const d = 2.4 - i * 0.24;
+    trail.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: 96 - (i + 1) * 11,
+        top: 8 - d / 2,
+        width: d,
+        height: d,
+        borderRadius: d / 2,
+        backgroundColor: (0, _rng.withAlpha)("#C9D9F0", 0.68 - i * 0.08)
+      }
+    }, i));
+  }
+
+  // --- The impact ---------------------------------------------------------
+  // Everything below reads the SAME loop value; the burst simply lives in the
+  // slice of the timeline right after the streak arrives at the wall.
+  const flashOpacity = t.interpolate({
+    inputRange: [0, b, Math.min(b + 0.012, 0.999), Math.min(b + 0.07, 0.9995), 1],
+    outputRange: [0, 0, 1, 0, 0]
+  });
+  const flashScale = t.interpolate({
+    inputRange: [0, b, Math.min(b + 0.07, 0.999), 1],
+    outputRange: [0.4, 0.4, 1.4, 1.4]
+  });
+  const waveOpacity = t.interpolate({
+    inputRange: [0, b, Math.min(b + 0.02, 0.999), Math.min(b + 0.11, 0.9995), 1],
+    outputRange: [0, 0, 0.85, 0, 0]
+  });
+  const waveScale = t.interpolate({
+    inputRange: [0, b, Math.min(b + 0.11, 0.999), 1],
+    outputRange: [0.12, 0.12, 1, 1]
+  });
+  const sparks = [];
+  for (let i = 0; i < SPARKS_PER_IMPACT; i++) {
+    // Deterministic fan across the arc, alternating reach so the burst reads
+    // as debris rather than a perfect star.
+    const frac = i / (SPARKS_PER_IMPACT - 1);
+    const deg = m.sparkArc[0] + (m.sparkArc[1] - m.sparkArc[0]) * frac;
+    const rad = deg * Math.PI / 180;
+    const dist = 30 + i % 3 * 14;
+    const sx = t.interpolate({
+      inputRange: [0, b, Math.min(b + 0.09, 0.999), 1],
+      outputRange: [0, 0, Math.cos(rad) * dist, Math.cos(rad) * dist]
+    });
+    const sy = t.interpolate({
+      inputRange: [0, b, Math.min(b + 0.09, 0.999), 1],
+      outputRange: [0, 0, Math.sin(rad) * dist, Math.sin(rad) * dist]
+    });
+    const so = t.interpolate({
+      inputRange: [0, b, Math.min(b + 0.02, 0.999), Math.min(b + 0.09, 0.9995), 1],
+      outputRange: [0, 0, 0.9, 0, 0]
+    });
+    const d = 2.2 - i % 3 * 0.4;
+    sparks.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        position: "absolute",
+        left: x1 - d / 2,
+        top: y1 - d / 2,
+        width: d,
+        height: d,
+        borderRadius: d / 2,
+        backgroundColor: (0, _rng.withAlpha)("#E5EEFC", 1),
+        opacity: so,
+        transform: [{
+          translateX: sx
+        }, {
+          translateY: sy
+        }]
+      },
+      pointerEvents: "none"
+    }, i));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: 108,
+        height: 16,
+        opacity: streakOpacity,
+        transform: [{
+          translateX
+        }, {
+          translateY
+        }, {
+          rotate: `${angle}deg`
+        }]
+      },
+      pointerEvents: "none",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: 86,
+          top: -2,
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          backgroundColor: (0, _rng.withAlpha)("#E5EEFC", 0.16)
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: 94.5,
+          top: 6.5,
+          width: 3,
+          height: 3,
+          borderRadius: 1.5,
+          backgroundColor: (0, _rng.withAlpha)("#F5F9FF", 1)
+        }
+      }), trail]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        position: "absolute",
+        left: x1 - 32,
+        top: y1 - 32,
+        width: 64,
+        height: 64,
+        opacity: flashOpacity,
+        transform: [{
+          scale: flashScale
+        }]
+      },
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RadialGlow, {
+        size: 64,
+        color: "#EDF3FC",
+        alpha: 0.6,
+        rings: 6,
+        falloff: 1.6
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: {
+        position: "absolute",
+        left: x1 - SHOCKWAVE_DIA / 2,
+        top: y1 - SHOCKWAVE_DIA / 2,
+        width: SHOCKWAVE_DIA,
+        height: SHOCKWAVE_DIA,
+        borderRadius: SHOCKWAVE_DIA / 2,
+        borderWidth: 1.5,
+        borderColor: (0, _rng.withAlpha)("#BBE5FA", 0.9),
+        opacity: waveOpacity,
+        transform: [{
+          scale: waveScale
+        }]
+      },
+      pointerEvents: "none"
+    }), sparks]
+  });
+});
+
+/**
+ * The transparent meteor layer — just the streaks and their wall impacts,
+ * ready to compose over any host sky (Deep Field is the shipping mount).
+ */
+const MeteorShower = exports.MeteorShower = /*#__PURE__*/(0, _react.memo)(function MeteorShower(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: METEORS.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Meteor, {
+      index: i,
+      ...props
+    }, i))
+  });
+});