@buoy-gg/shared-ui 7.0.40 → 7.0.42

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

@@ -1,397 +1 @@
-"use strict";
-
-/**
- * MeteorShower — shooting stars that slam into the walls.
- *
- * Each meteor streaks in from off-screen, hits an EDGE of the surface, and
- * blows out like a firework: a flash, then a fan of streak RAYS that shoot
- * back into the room — each ray grows out of the impact point while its tail
- * chases the head, so it reads as a burning trail rather than a ring — with
- * ember dots at the tips that decelerate, droop under gravity and gutter out.
- * 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.
- *
- * Each meteor also rolls WHAT IT'S MADE OF once per mount — a weighted draw
- * over the real emission-line palette (sodium orange-yellow, iron yellow,
- * magnesium blue-green, calcium violet, shocked atmospheric N₂/O₂ red,
- * ionized-air blue-white) — and that mineral tints streak, trail, flash,
- * rays and embers as one. See `MINERALS`.
- *
- * The ray trick, since there is no `transformOrigin`: a bar of full length
- * `dist` is CENTERED on the impact point, rotated to its heading, then driven
- * with `[{rotate}, {translateX}, {scaleX}]`. Rotate is outermost, so the
- * translate runs along the ray's own axis; scaleX squashes about the bar's
- * center, and translating by the midpoint of (head, tail) while scaling by
- * (head − tail) puts the visible segment exactly between the two — a line
- * growing out of the burst with both endpoints scripted.
- *
- * 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`.
- */
-
-import { memo, useState } from "react";
-import { Animated, View } from "react-native";
-import { absoluteFill } from "../../../utils/absoluteFill.js";
-import { RadialGlow, useLoop } from "../primitives.js";
-import { mulberry32, withAlpha } from "../rng.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * `to` is ON a wall — that's the impact point. `sparkArc` is the hemisphere
- * (in degrees) the firework rays fan 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 RAYS_PER_IMPACT = 6;
-
-/**
- * Real meteor color comes from what's burning. The dominant visible emission
- * lines are sodium (orange-yellow), iron (yellow) and magnesium (blue-green);
- * calcium-rich rock flares violet, and the shocked ATMOSPHERE itself — the
- * excited nitrogen/oxygen sheath around the meteoroid — glows red. Faint fast
- * meteors mostly show the blue-white of ionized air. The weights lean the
- * same way the sky does: yellows and oranges common, teal frequent, red
- * occasional, violet the rare treat.
- */
-
-const MINERALS = [{
-  name: "sodium",
-  weight: 26,
-  head: "#FFF3DC",
-  glow: "#FFDCA8",
-  trail: "#FFCB85",
-  rays: ["#FFE8C2", "#FFCB85", "#F0B45E"]
-}, {
-  name: "iron",
-  weight: 24,
-  head: "#FFF9E3",
-  glow: "#FFEDAE",
-  trail: "#F2DC8A",
-  rays: ["#FBF0C0", "#F2DC8A", "#E3C868"]
-}, {
-  name: "magnesium",
-  weight: 20,
-  head: "#EAFFF9",
-  glow: "#ACF0DE",
-  trail: "#82E3CA",
-  rays: ["#D3FAEF", "#82E3CA", "#5FD6BC"]
-}, {
-  // Not a mineral at all — ionized air, the old blue-white default.
-  name: "ionized-air",
-  weight: 14,
-  head: "#F5F9FF",
-  glow: "#E5EEFC",
-  trail: "#C9D9F0",
-  rays: ["#F5F9FF", "#DCE9FF", "#BBE5FA"]
-}, {
-  // Also atmospheric: nitrogen/oxygen shocked red-hot in the sheath.
-  name: "nitrogen-oxygen",
-  weight: 10,
-  head: "#FFEAE5",
-  glow: "#FFB4A6",
-  trail: "#FF917E",
-  rays: ["#FFCFC6", "#FF917E", "#F27461"]
-}, {
-  name: "calcium",
-  weight: 6,
-  head: "#F6EEFF",
-  glow: "#DCC2FF",
-  trail: "#C29BF7",
-  rays: ["#EADCFF", "#C29BF7", "#AB7EEC"]
-}];
-const MINERAL_WEIGHT = MINERALS.reduce((sum, m) => sum + m.weight, 0);
-
-/**
- * Weighted draw — `Math.random` ON PURPOSE, unlike the seeded burst geometry:
- * each meteor rolls its make-up once per mount, so every session's sky burns
- * a different mix while the animation itself stays deterministic.
- */
-function pickMineral() {
-  let r = Math.random() * MINERAL_WEIGHT;
-  for (const m of MINERALS) {
-    r -= m.weight;
-    if (r <= 0) return m;
-  }
-  return MINERALS[0];
-}
-/**
- * The firework: a deterministic fan of rays per impact, seeded so both
- * platforms (and every reload) burst identically. Angles are stratified
- * across the arc with jitter, so the fan covers it without reading as a
- * perfect star; reach, thickness and stagger vary per ray so it reads as
- * debris blowing out, not a rigid spoke wheel.
- */
-function buildBurst(index) {
-  const m = METEORS[index];
-  const rnd = mulberry32((0xb1a57 ^ index) >>> 0);
-  const [a0, a1] = m.sparkArc;
-  const rays = [];
-  for (let i = 0; i < RAYS_PER_IMPACT; i++) {
-    const frac = (i + 0.5) / RAYS_PER_IMPACT;
-    const jitter = (rnd() - 0.5) * 0.7 / RAYS_PER_IMPACT;
-    const deg = a0 + (a1 - a0) * (frac + jitter);
-    // Small on purpose — a game-sprite pop, not a fireworks display: rays
-    // reach 10–22px, a hair over 1px thick, and the whole thing is over in a
-    // few frames.
-    rays.push({
-      rad: deg * Math.PI / 180,
-      dist: 10 + rnd() * 12,
-      thick: 1 + rnd() * 0.5,
-      delay: rnd() * 0.008,
-      grow: 0.03 + rnd() * 0.015,
-      ember: rnd() > 0.5,
-      emberDrop: 2 + rnd() * 3,
-      emberDrift: 1 + rnd() * 3,
-      emberDia: 1.2 + rnd() * 0.6
-    });
-  }
-  return rays;
-}
-const BURSTS = METEORS.map((_, i) => buildBurst(i));
-const Meteor = /*#__PURE__*/memo(function Meteor({
-  index,
-  width,
-  height,
-  animated
-}) {
-  const m = METEORS[index];
-  // What this meteor is made of — rolled once per mount, held for its life.
-  const [mineral] = useState(pickMineral);
-  const t = 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__*/_jsx(View, {
-      style: {
-        position: "absolute",
-        left: 96 - (i + 1) * 11,
-        top: 8 - d / 2,
-        width: d,
-        height: d,
-        borderRadius: d / 2,
-        backgroundColor: withAlpha(mineral.trail, 0.68 - i * 0.08)
-      }
-    }, i));
-  }
-
-  // --- The impact: firework blow-out --------------------------------------
-  // 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.05, 0.999), 1],
-    outputRange: [0.5, 0.5, 1.05, 1.05]
-  });
-  const rays = [];
-  const embers = [];
-  const burst = BURSTS[index];
-  for (let i = 0; i < burst.length; i++) {
-    const r = burst[i];
-    // The ray's timeline: head races out over `grow`, the tail leaves the
-    // impact point once the head is under way and catches it shortly after —
-    // the segment between them is the burning trail.
-    const t0 = b + r.delay;
-    const k1 = t0 + r.grow * 0.5; // head at 75%, tail just leaving
-    const k2 = t0 + r.grow; // head at full reach, tail halfway
-    const k3 = k2 + 0.035; // tail catches the head — ray gone
-    // Segment endpoints head/tail (fractions of dist):
-    //   t0 → 0/0,  k1 → 0.75/0.1,  k2 → 1/0.5,  k3 → 1/1
-    // scaleX = head − tail, translateX = dist · (head + tail)/2.
-    const len = t.interpolate({
-      inputRange: [0, t0, k1, k2, k3, 1],
-      outputRange: [0, 0, 0.65, 0.5, 0, 0]
-    });
-    const mid = t.interpolate({
-      inputRange: [0, t0, k1, k2, k3, 1],
-      outputRange: [0, 0, r.dist * 0.425, r.dist * 0.75, r.dist, r.dist]
-    });
-    const rayOpacity = t.interpolate({
-      inputRange: [0, t0, t0 + 0.006, k2, k3, 1],
-      outputRange: [0, 0, 0.85, 0.7, 0, 0]
-    });
-    rays.push(/*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        position: "absolute",
-        left: x1 - r.dist / 2,
-        top: y1 - r.thick / 2,
-        width: r.dist,
-        height: r.thick,
-        borderRadius: r.thick / 2,
-        backgroundColor: withAlpha(mineral.rays[i % mineral.rays.length], 0.8),
-        opacity: rayOpacity,
-        // Rotate is OUTERMOST, so the translate runs along the ray's own
-        // axis — see the header note on faking a transform origin.
-        transform: [{
-          rotate: `${r.rad * 180 / Math.PI}deg`
-        }, {
-          translateX: mid
-        }, {
-          scaleX: len
-        }]
-      },
-      pointerEvents: "none"
-    }, `ray-${i}`));
-    if (!r.ember) continue;
-    // The ember rides the ray's head, then keeps coasting a touch further
-    // while gravity drags it DOWN in world space, guttering out last.
-    const e3 = k3 + 0.04;
-    const cos = Math.cos(r.rad);
-    const sin = Math.sin(r.rad);
-    const ex = t.interpolate({
-      inputRange: [0, t0, k1, k2, e3, 1],
-      outputRange: [0, 0, cos * r.dist * 0.75, cos * r.dist, cos * (r.dist + r.emberDrift), cos * (r.dist + r.emberDrift)]
-    });
-    const ey = t.interpolate({
-      inputRange: [0, t0, k1, k2, e3, 1],
-      outputRange: [0, 0, sin * r.dist * 0.75, sin * r.dist, sin * (r.dist + r.emberDrift) + r.emberDrop, sin * (r.dist + r.emberDrift) + r.emberDrop]
-    });
-    const eo = t.interpolate({
-      inputRange: [0, t0, k1, k2, e3, 1],
-      outputRange: [0, 0, 0.8, 0.65, 0, 0]
-    });
-    embers.push(/*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        position: "absolute",
-        left: x1 - r.emberDia / 2,
-        top: y1 - r.emberDia / 2,
-        width: r.emberDia,
-        height: r.emberDia,
-        borderRadius: r.emberDia / 2,
-        backgroundColor: withAlpha(mineral.head, 1),
-        opacity: eo,
-        transform: [{
-          translateX: ex
-        }, {
-          translateY: ey
-        }]
-      },
-      pointerEvents: "none"
-    }, `ember-${i}`));
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: absoluteFill,
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsxs(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__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: 86,
-          top: -2,
-          width: 20,
-          height: 20,
-          borderRadius: 10,
-          backgroundColor: withAlpha(mineral.glow, 0.16)
-        }
-      }), /*#__PURE__*/_jsx(View, {
-        style: {
-          position: "absolute",
-          left: 94.5,
-          top: 6.5,
-          width: 3,
-          height: 3,
-          borderRadius: 1.5,
-          backgroundColor: withAlpha(mineral.head, 1)
-        }
-      }), trail]
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        position: "absolute",
-        left: x1 - 18,
-        top: y1 - 18,
-        width: 36,
-        height: 36,
-        opacity: flashOpacity,
-        transform: [{
-          scale: flashScale
-        }]
-      },
-      pointerEvents: "none",
-      children: /*#__PURE__*/_jsx(RadialGlow, {
-        size: 36,
-        color: mineral.glow,
-        alpha: 0.45,
-        rings: 5,
-        falloff: 1.6
-      })
-    }), rays, embers]
-  });
-});
-
-/**
- * The transparent meteor layer — just the streaks and their wall impacts,
- * ready to compose over any host sky (Deep Field is the shipping mount).
- */
-export const MeteorShower = /*#__PURE__*/memo(function MeteorShower(props) {
-  return /*#__PURE__*/_jsx(View, {
-    style: absoluteFill,
-    pointerEvents: "none",
-    children: METEORS.map((_, i) => /*#__PURE__*/_jsx(Meteor, {
-      index: i,
-      ...props
-    }, i))
-  });
-});
+"use strict";import{memo as O,useState as Q}from"react";import{Animated as D,View as f}from"react-native";import{absoluteFill as T}from"../../../utils/absoluteFill.js";import{RadialGlow as Z,useLoop as tt}from"../primitives.js";import{mulberry32 as et,withAlpha as b}from"../rng.js";import{jsx as p,jsxs as X}from"react/jsx-runtime";const M=[{from:[.08,-.06],to:[.99,.36],periodMs:11e3,window:[.05,.15],sparkArc:[110,250]},{from:[.92,-.08],to:[.01,.62],periodMs:15500,window:[.56,.66],sparkArc:[-70,70]}];const I=6;const _=[{name:"sodium",weight:26,head:"#FFF3DC",glow:"#FFDCA8",trail:"#FFCB85",rays:["#FFE8C2","#FFCB85","#F0B45E"]},{name:"iron",weight:24,head:"#FFF9E3",glow:"#FFEDAE",trail:"#F2DC8A",rays:["#FBF0C0","#F2DC8A","#E3C868"]},{name:"magnesium",weight:20,head:"#EAFFF9",glow:"#ACF0DE",trail:"#82E3CA",rays:["#D3FAEF","#82E3CA","#5FD6BC"]},{name:"ionized-air",weight:14,head:"#F5F9FF",glow:"#E5EEFC",trail:"#C9D9F0",rays:["#F5F9FF","#DCE9FF","#BBE5FA"]},{name:"nitrogen-oxygen",weight:10,head:"#FFEAE5",glow:"#FFB4A6",trail:"#FF917E",rays:["#FFCFC6","#FF917E","#F27461"]},{name:"calcium",weight:6,head:"#F6EEFF",glow:"#DCC2FF",trail:"#C29BF7",rays:["#EADCFF","#C29BF7","#AB7EEC"]}];const ot=_.reduce((s,o)=>s+o.weight,0);function nt(){let s=Math.random()*ot;for(const o of _){s-=o.weight;if(s<=0)return o}return _[0]}function rt(s){const o=M[s];const n=et((727639^s)>>>0);const[u,A]=o.sparkArc;const l=[];for(let i=0;i<I;i++){const r=(i+.5)/I;const d=(n()-.5)*.7/I;const e=u+(A-u)*(r+d);l.push({rad:e*Math.PI/180,dist:10+n()*12,thick:1+n()*.5,delay:n()*.008,grow:.03+n()*.015,ember:n()>.5,emberDrop:2+n()*3,emberDrift:1+n()*3,emberDia:1.2+n()*.6})}return l}const at=M.map((s,o)=>rt(o));const it=O(function s({index:o,width:n,height:u,animated:A}){const l=M[o];const[i]=Q(nt);const r=tt(l.periodMs,A);const[d,e]=l.window;const k=l.from[0]*n;const B=l.from[1]*u;const g=l.to[0]*n;const m=l.to[1]*u;const x=Math.atan2(m-B,g-k);const $=x*180/Math.PI;const w=54+42*Math.cos(x);const E=8+42*Math.sin(x);const L=r.interpolate({inputRange:[0,d,e,1],outputRange:[k-w,k-w,g-w,g-w]});const Y=r.interpolate({inputRange:[0,d,e,1],outputRange:[B-E,B-E,m-E,m-E]});const z=r.interpolate({inputRange:[0,d,d+(e-d)*.15,e-(e-d)*.1,e,1],outputRange:[0,0,1,1,0,0]});const v=[];for(let a=0;a<8;a++){const t=2.4-a*.24;v.push(p(f,{style:{position:"absolute",left:96-(a+1)*11,top:8-t/2,width:t,height:t,borderRadius:t/2,backgroundColor:b(i.trail,.68-a*.08)}},a))}const G=r.interpolate({inputRange:[0,e,Math.min(e+.012,.999),Math.min(e+.07,.9995),1],outputRange:[0,0,1,0,0]});const N=r.interpolate({inputRange:[0,e,Math.min(e+.05,.999),1],outputRange:[.5,.5,1.05,1.05]});const j=[];const P=[];const V=at[o];for(let a=0;a<V.length;a++){const t=V[a];const c=e+t.delay;const F=c+t.grow*.5;const h=c+t.grow;const y=h+.035;const H=r.interpolate({inputRange:[0,c,F,h,y,1],outputRange:[0,0,.65,.5,0,0]});const U=r.interpolate({inputRange:[0,c,F,h,y,1],outputRange:[0,0,t.dist*.425,t.dist*.75,t.dist,t.dist]});const W=r.interpolate({inputRange:[0,c,c+.006,h,y,1],outputRange:[0,0,.85,.7,0,0]});j.push(p(D.View,{style:{position:"absolute",left:g-t.dist/2,top:m-t.thick/2,width:t.dist,height:t.thick,borderRadius:t.thick/2,backgroundColor:b(i.rays[a%i.rays.length],.8),opacity:W,transform:[{rotate:`${t.rad*180/Math.PI}deg`},{translateX:U},{scaleX:H}]},pointerEvents:"none"},`ray-${a}`));if(!t.ember)continue;const S=y+.04;const R=Math.cos(t.rad);const C=Math.sin(t.rad);const q=r.interpolate({inputRange:[0,c,F,h,S,1],outputRange:[0,0,R*t.dist*.75,R*t.dist,R*(t.dist+t.emberDrift),R*(t.dist+t.emberDrift)]});const J=r.interpolate({inputRange:[0,c,F,h,S,1],outputRange:[0,0,C*t.dist*.75,C*t.dist,C*(t.dist+t.emberDrift)+t.emberDrop,C*(t.dist+t.emberDrift)+t.emberDrop]});const K=r.interpolate({inputRange:[0,c,F,h,S,1],outputRange:[0,0,.8,.65,0,0]});P.push(p(D.View,{style:{position:"absolute",left:g-t.emberDia/2,top:m-t.emberDia/2,width:t.emberDia,height:t.emberDia,borderRadius:t.emberDia/2,backgroundColor:b(i.head,1),opacity:K,transform:[{translateX:q},{translateY:J}]},pointerEvents:"none"},`ember-${a}`))}return X(f,{style:T,pointerEvents:"none",children:[X(D.View,{style:{position:"absolute",left:0,top:0,width:108,height:16,opacity:z,transform:[{translateX:L},{translateY:Y},{rotate:`${$}deg`}]},pointerEvents:"none",children:[p(f,{style:{position:"absolute",left:86,top:-2,width:20,height:20,borderRadius:10,backgroundColor:b(i.glow,.16)}}),p(f,{style:{position:"absolute",left:94.5,top:6.5,width:3,height:3,borderRadius:1.5,backgroundColor:b(i.head,1)}}),v]}),p(D.View,{style:{position:"absolute",left:g-18,top:m-18,width:36,height:36,opacity:G,transform:[{scale:N}]},pointerEvents:"none",children:p(Z,{size:36,color:i.glow,alpha:.45,rings:5,falloff:1.6})}),j,P]})});export const MeteorShower=O(function s(o){return p(f,{style:T,pointerEvents:"none",children:M.map((n,u)=>p(it,{index:u,...o},u))})});