dsh-drawai 0.3.3 → 0.4.0

package/lib/motion/mgstyles/upstream/demos/20-pixel/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html><head><meta charset="utf-8">
+<link rel="stylesheet" href="/assets/fonts/fonts.css">
+<style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block;width:1920px;height:1080px}</style>
+</head><body>
+<canvas id="c" width="1920" height="1080"></canvas>
+<script type="module">
+  await document.fonts.load('12px "Fusion Pixel 12"', '神秘宝箱欢迎来到像素世界！像素冒险');
+  await document.fonts.load('8px "Press Start 2P"', 'SCORE PRESS START x0123456789');
+  if (new URLSearchParams(location.search).get('v5') === '1') {   // reel v5 title 「像素风」 + PIXEL ART
+    await document.fonts.load('12px "Fusion Pixel 12"', '像素风');
+    await document.fonts.load('8px "Press Start 2P"', 'PIXEL ART');
+  }
+  await document.fonts.ready;
+  await import('/demos/20-pixel/film.js');
+  window.__ready = true;
+</script>
+</body></html>

package/lib/motion/mgstyles/upstream/demos/22-hud/cues.json

@@ -0,0 +1,108 @@
+{
+  "fps": 30,
+  "bpm": 120,
+  "anchor": 6.4,
+  "duration": 10.0,
+  "power_on": 0.0,
+  "boot": {
+    "frame": 0.12,
+    "ring_outer": 0.4,
+    "ring_ticks": 0.55,
+    "ring_inner": 0.7,
+    "panel_left": 0.9,
+    "panel_right": 1.15,
+    "hex": 1.2,
+    "globe": 1.4,
+    "log_lines": [
+      0.4,
+      0.9,
+      1.4,
+      1.9
+    ]
+  },
+  "data_live": 2.4,
+  "radar_start": 2.4,
+  "radar_period": 2.0,
+  "radar_theta0_deg": 52,
+  "radar_blips": [
+    {
+      "brg": 118,
+      "r": 0.62
+    },
+    {
+      "brg": 205,
+      "r": 0.41
+    },
+    {
+      "brg": 262,
+      "r": 0.78
+    },
+    {
+      "brg": 331,
+      "r": 0.55
+    }
+  ],
+  "data_rolls": [
+    2.4,
+    2.65,
+    2.9,
+    3.15,
+    3.4,
+    3.65
+  ],
+  "sparkline": 2.9,
+  "signal_detected": 4.4,
+  "globe_turn": [
+    4.4,
+    5.4
+  ],
+  "candidates": [
+    4.9,
+    5.4,
+    5.9
+  ],
+  "brackets_in": 5.9,
+  "snap": 6.2333,
+  "lock": 6.4,
+  "wave_dur": 0.45,
+  "zoom": [
+    6.4,
+    7.7
+  ],
+  "title_en": 6.4,
+  "title_cn": 6.4,
+  "coords": 7.25,
+  "alarm": [
+    6.4,
+    7.4
+  ],
+  "alert_pulses": [
+    6.9,
+    7.4,
+    7.9,
+    8.4
+  ],
+  "outro": 8.4,
+  "end_hold": 8.9,
+  "settle": 6.3333,
+  "ground_track": 3.4,
+  "band_open": 7.1,
+  "resolve": 7.1,
+  "sweep": [
+    2.4,
+    4.6
+  ],
+  "dive": [
+    6.4333,
+    7.1
+  ],
+  "uplink": [
+    9.0,
+    9.4
+  ],
+  "power_off": 9.7667,
+  "bracket_travel": [
+    5.9,
+    6.1667
+  ]
+}

package/lib/motion/mgstyles/upstream/demos/22-hud/index.html

@@ -0,0 +1,125 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>22-hud · KESTREL-9 TARGET ACQUIRED</title>
+<link rel="stylesheet" href="/assets/fonts/fonts.css">
+<style>html,body{margin:0;background:#000;overflow:hidden}canvas{display:block;position:absolute;left:0;top:0;width:1920px;height:1080px}</style>
+<script src="/node_modules/d3/dist/d3.min.js"></script>
+<script src="/node_modules/topojson-client/dist/topojson-client.min.js"></script>
+<script type="importmap">{"imports":{"three":"/node_modules/three/build/three.module.js","three/addons/":"/node_modules/three/examples/jsm/"}}</script>
+</head><body>
+<script type="module">
+import * as THREE from 'three';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { createHolo, H0 } from './js/holo.js';
+import { initHUD, drawHUD, linksV5 } from './js/hud.js';
+import { VS, COMP_FS as COMP_FS0, FINAL_FS, TEXT_FS as TEXT_FS0 } from './js/post.js';
+import { prog, E, frameOf, LOCK, clamp, V5 } from './js/util.js';
+import { initTitle, drawTitle, TITLE_FS, magentaInk } from './js/v5.js';
+// v5: magenta alert ink (default path untouched: the shader strings are only rewritten when ?v5=1)
+const INKM = V5 && new URLSearchParams(location.search).get('ink') !== 'amber';
+const COMP_FS = INKM ? magentaInk(COMP_FS0) : COMP_FS0, TEXT_FS = INKM ? magentaInk(TEXT_FS0) : TEXT_FS0;
+
+window.DEMO = { width: 1920, height: 1080, fps: 30, duration: 10, motionBlur: { samples: 1, shutter: 0.5 } };
+const W = 1920, H = 1080, dpr = window.devicePixelRatio || 1;
+const K = await (await fetch('/demos/22-hud/cues.json')).json();
+const topo = await (await fetch('/demos/22-hud/assets/land-50m.json')).json();
+
+// equirectangular land mask for the dotted-land layer
+const mc = document.createElement('canvas'); mc.width = 2048; mc.height = 1024;
+const mx = mc.getContext('2d', { willReadFrequently: true });
+const proj = d3.geoEquirectangular().scale(2048 / (2 * Math.PI)).translate([1024, 512]);
+mx.fillStyle = '#fff'; mx.beginPath(); d3.geoPath(proj, mx)(topojson.feature(topo, topo.objects.land)); mx.fill();
+const landMask = { w: 2048, h: 1024, data: mx.getImageData(0, 0, 2048, 1024).data };
+
+const renderer = new THREE.WebGLRenderer({ antialias: false, preserveDrawingBuffer: true, powerPreference: 'high-performance' });
+renderer.setPixelRatio(dpr); renderer.setSize(W, H, false);
+renderer.outputColorSpace = THREE.LinearSRGBColorSpace; renderer.toneMapping = THREE.NoToneMapping;
+document.body.appendChild(renderer.domElement);
+
+const holo = createHolo(topo, landMask);
+const holoRT = new THREE.WebGLRenderTarget(W * dpr, H * dpr, { type: THREE.HalfFloatType, samples: 4 });
+
+const hud = document.createElement('canvas'); hud.width = W * dpr; hud.height = H * dpr;
+const txt = document.createElement('canvas'); txt.width = W * dpr; txt.height = H * dpr;
+initHUD(hud, K, dpr, txt);
+const txtTex = new THREE.CanvasTexture(txt); txtTex.colorSpace = THREE.NoColorSpace;
+txtTex.generateMipmaps = false; txtTex.minFilter = THREE.LinearFilter; txtTex.magFilter = THREE.LinearFilter;
+const hudTex = new THREE.CanvasTexture(hud); hudTex.colorSpace = THREE.NoColorSpace;
+hudTex.generateMipmaps = false; hudTex.minFilter = THREE.LinearFilter; hudTex.magFilter = THREE.LinearFilter;
+
+const comp = new THREE.ShaderMaterial({ vertexShader: VS, fragmentShader: COMP_FS, depthTest: false, depthWrite: false, uniforms: {
+  tHolo: { value: holoRT.texture }, tHud: { value: hudTex }, uRes: { value: new THREE.Vector2(W * dpr, H * dpr) },
+  uT: { value: 0 }, uWave: { value: -1 }, uHex: { value: 0 }, uFlash: { value: 0 }, uZoom: { value: 0 }, uScope: { value: 322 }, uGain: { value: 1 }, uHexS: { value: 1 }, uDive: { value: 0 },
+  uTgt: { value: new THREE.Vector2(960, 540) } } });
+const fin = new THREE.ShaderMaterial({ vertexShader: VS, fragmentShader: FINAL_FS, depthTest: false, depthWrite: false, uniforms: {
+  tDiffuse: { value: null }, uRes: { value: new THREE.Vector2(W * dpr, H * dpr) }, uT: { value: 0 }, uOpen: { value: 1 },
+  uGlitch: { value: 0 }, uFlash: { value: 0 }, uCA: { value: 0.0007 }, uFrame: { value: 0 }, uRoll: { value: 0.23 }, uClose: { value: 0 } } });
+
+const composer = new EffectComposer(renderer);
+composer.setPixelRatio(dpr); composer.setSize(W, H);
+const compPass = new ShaderPass(comp); const bloom = new UnrealBloomPass(new THREE.Vector2(W * dpr, H * dpr), 0.75, 0.45, 0.32);
+const finPass = new ShaderPass(fin);
+const tmat = new THREE.ShaderMaterial({ vertexShader: VS, fragmentShader: TEXT_FS, depthTest: false, depthWrite: false, uniforms: {
+  tDiffuse: { value: null }, tTxt: { value: txtTex }, uRes: { value: new THREE.Vector2(W * dpr, H * dpr) }, uWave: { value: -1 },
+  uTgt: { value: new THREE.Vector2(960, 540) } } });
+const txtPass = new ShaderPass(tmat);
+composer.addPass(compPass); composer.addPass(bloom); composer.addPass(txtPass);
+// v5: style-name title on its own post-bloom layer (not re-inked), under the final CRT pass
+let ttlTex = null;
+if (V5) {
+  const ttl = document.createElement('canvas'); ttl.width = W * dpr; ttl.height = H * dpr; initTitle(ttl, dpr);
+  ttlTex = new THREE.CanvasTexture(ttl); ttlTex.colorSpace = THREE.NoColorSpace; ttlTex.generateMipmaps = false; ttlTex.minFilter = THREE.LinearFilter; ttlTex.magFilter = THREE.LinearFilter;
+  composer.addPass(new ShaderPass(new THREE.ShaderMaterial({ vertexShader: VS, fragmentShader: TITLE_FS, depthTest: false, depthWrite: false, uniforms: { tDiffuse: { value: null }, tTtl: { value: ttlTex } } })));
+}
+composer.addPass(finPass);
+
+// glitch events (frame-quantised): power-on, signal, lock + a few restrained micro-glitches
+const GL = [[0.0, 0.2, 1.0], [K.signal_detected, 0.14, 0.8], [LOCK + 1 / 30, 0.1, 0.45], [K.resolve, 0.067, 0.3], [2.93, 0.067, 0.35], [5.43, 0.067, 0.3], [8.13, 0.067, 0.3], [9.3, 0.034, 0.25]];
+const glitch = (t) => { let g = 0; for (const [t0, d, a] of GL) if (t >= t0 && t < t0 + d) g = Math.max(g, a * (1 - 0.5 * (t - t0) / d)); return g; };
+
+// hard-event frames are rendered with a closed shutter (all sub-samples at the frame centre): the impact frame must be one crisp state
+const HARD = new Set([frameOf(LOCK), frameOf(K.resolve), frameOf(K.signal_detected), frameOf(K.boot.ring_outer)]);
+// type + post-bloom vector layer: drawn ONCE per frame at the frame centre (no motion-blur double exposure of rolling digits)
+let lastTF = -1;
+window.renderAt = async (t) => {
+  { const fr = Math.round(t * 30); if (HARD.has(fr)) t = fr / 30; }
+  { const fq = frameOf(t); if (fq !== lastTF) { const tc = fq / 30; drawHUD(tc, holo.update(tc), 'txt'); txtTex.needsUpdate = true; if (V5) { drawTitle(tc); ttlTex.needsUpdate = true; } lastTF = fq; } }
+  const S = holo.update(t);
+  renderer.setRenderTarget(holoRT); renderer.setClearColor(0x000000, 1); renderer.clear(); renderer.render(holo.scene, holo.camera);
+  renderer.setRenderTarget(null);
+  const HS = drawHUD(t, S, 'geo'); hudTex.needsUpdate = true;
+  const f = frameOf(t), fl = frameOf(LOCK);
+  const u = comp.uniforms, v0 = fin.uniforms;
+  u.uT.value = t; u.uZoom.value = S.zoom;
+  u.uWave.value = t >= LOCK ? E.outC(prog(t, LOCK, K.wave_dur)) * 1350 : -1;
+  u.uHex.value = t >= K.boot.hex ? E.outC(prog(t, K.boot.hex, 1.2)) * 1500 : 0;
+  u.uFlash.value = 0; v0.uFlash.value = f === fl ? 1.0 : f === fl + 1 ? 0.3 : f === frameOf(K.resolve) ? 0.45 : f === frameOf(K.signal_detected) ? 0.3 : 0;
+  // focus pull: hologram drops to 45 % while the brackets converge, returns on the impact
+  u.uGain.value = t < LOCK ? 1 - 0.55 * E.inOutC(prog(t, 6.10, 0.26)) : 1 + 0.55 * E.inOutC(prog(t, LOCK + 0.07, 0.3)) * (1 - E.inOutC(prog(t, 7.15, 0.55)));  // dive: the coast rushing past is the brightest layer
+  u.uHexS.value = 1 + 0.1 * HS.dive; u.uDive.value = HS.dive;
+  u.uTgt.value.set(S.target.x, H - S.target.y);
+  tmat.uniforms.uWave.value = u.uWave.value; tmat.uniforms.uTgt.value.copy(u.uTgt.value);
+  u.uScope.value = HS.scopeR;
+  const v = fin.uniforms;
+  v.uT.value = t; v.uFrame.value = f; v.uOpen.value = E.outC(prog(t, 0.0, 0.3)); v.uGlitch.value = glitch(t);
+  v.uCA.value = 0.0007 + (t >= LOCK + 1 / 30 ? 0.003 * Math.exp(-(t - LOCK - 1 / 30) * 7) : 0) + (t < 0.2 ? 0.002 * (1 - t / 0.2) : 0);
+  bloom.radius = 0.45 - (t >= LOCK ? 0.2 * Math.exp(-(t - LOCK) * 4) : 0); v.uClose.value = prog(t, 9.7667, 0.2);
+  bloom.strength = 0.75 + (t >= LOCK + 1 / 30 ? 0.18 * Math.exp(-(t - LOCK - 1 / 30) * 8) : 0) + (f === frameOf(K.boot.ring_outer) ? 0.9 : 0);
+  composer.render();
+  renderer.getContext().finish();
+};
+
+await document.fonts.load('500 20px "JetBrains Mono"'); await document.fonts.load('600 20px "JetBrains Mono"'); await document.fonts.load('400 20px "JetBrains Mono"');
+await document.fonts.load('600 14px Rajdhani'); await document.fonts.load('700 14px Rajdhani');
+await document.fonts.load('600 60px "Chakra Petch"');
+for (const w of [400, 500, 700, 900]) await document.fonts.load(`${w} 40px "HarmonyOS Sans SC"`, '目标锁定隼眼轨道光学系统自检导航遥测雷达扫描信号分析候选频谱数据链警报坐标');
+if (V5) { await document.fonts.load('900 168px "HarmonyOS Sans SC"', '赛博朋克'); await document.fonts.load('700 206px "Chakra Petch"', 'HUD');
+  await document.fonts.load('500 28px "HarmonyOS Sans SC"', '信号锁定 · ALERT 03'); await document.fonts.load('700 28px Rajdhani', 'SIGNAL LOCKED'); }
+await document.fonts.ready;
+// v5 link elements: pure function of t (re-derives the hologram projection; renderAt re-runs holo.update itself)
+if (V5) window.linkAt = (t) => { const fr = Math.round(t * 30); if (HARD.has(fr)) t = fr / 30; return linksV5(t, holo.update(t)); };
+await window.renderAt(0);
+window.__ready = true;
+</script>
+</body></html>

package/lib/motion/mgstyles/upstream/demos/22-hud/js/holo.js

@@ -0,0 +1,275 @@
+// Three.js holographic wireframe Earth (Natural Earth 50m coastlines), pure function of t
+import * as THREE from 'three';
+import { DEG, TARGET, CND, LOCK, E, prog, clamp, lerp, hermite, hash } from './util.js';
+
+const ll = (lat, lon, r = 1) => {
+  const a = lat * DEG, b = lon * DEG;
+  return new THREE.Vector3(Math.cos(a) * Math.sin(b) * r, Math.sin(a) * r, Math.cos(a) * Math.cos(b) * r);
+};
+
+const VS = `
+attribute float aU; attribute float aS;
+uniform vec3 uCam;
+varying float vU; varying float vS; varying float vFace; varying vec3 vW; varying float vLat;
+void main(){
+  vLat = position.y;
+  vec4 wp = modelMatrix * vec4(position,1.0);
+  vec3 n = normalize(wp.xyz);
+  vFace = dot(n, normalize(uCam - wp.xyz));
+  vW = wp.xyz; vU = aU; vS = aS;
+  gl_Position = projectionMatrix * viewMatrix * wp;
+}`;
+const FS = `
+uniform float uGrow, uSpread, uAlpha, uBack, uHead, uScanY, uFaceMode, uDash, uTime;
+uniform vec3 uColor; uniform vec3 uTgt; uniform float uPulse, uPulseAmp, uFocus, uLimb;
+varying float vU; varying float vS; varying float vFace; varying vec3 vW; varying float vLat;
+void main(){
+  float g = uGrow * (1.0 + uSpread) - vS * uSpread;
+  if (vU > g) discard;
+  if (uDash > 0.0 && fract(vU * uDash - uTime * 0.15) > 0.55) discard;
+  float head = smoothstep(g - 0.035, g, vU) * uHead * (1.0 - step(0.9999, uGrow));
+  float f0 = vFace > 0.0 ? mix(0.5, 1.0, smoothstep(0.0, 0.45, vFace)) : uBack;
+  float f1 = vFace > 0.0 ? mix(0.16, 1.0, smoothstep(0.15, 0.5, vFace)) * mix(1.0, 0.6, smoothstep(0.83, 0.88, vLat)) : uBack * 0.6;
+  float face = uFaceMode > 0.5 ? mix(f0, f1, uLimb) : 1.0;
+  float scan = exp(-pow((vW.y - uScanY) / 0.045, 2.0));
+  float ang = acos(clamp(dot(normalize(vW), uTgt), -1.0, 1.0));
+  float pulse = uPulseAmp * exp(-pow((ang - uPulse) / 0.006, 2.0));
+  float focus = mix(1.0, 0.35 + 1.1 * exp(-ang * ang / 0.012), uFocus);
+  float a = uAlpha * face * focus;
+  vec3 c = uColor * a + vec3(0.75, 1.0, 1.0) * (head * 0.9 + (scan * 0.55 + pulse) * face);
+  gl_FragColor = vec4(c, 1.0);
+}`;
+const PVS = `
+attribute float aS;
+uniform vec3 uCam; uniform float uSize;
+varying float vFace; varying float vS; varying vec3 vW; varying float vLat;
+void main(){
+  vLat = position.y;
+  vec4 wp = modelMatrix * vec4(position,1.0);
+  vFace = dot(normalize(wp.xyz), normalize(uCam - wp.xyz)); vS = aS; vW = wp.xyz;
+  vec4 mv = viewMatrix * wp;
+  gl_PointSize = uSize * clamp(2.2 / -mv.z, 0.6, 2.4);
+  gl_Position = projectionMatrix * mv;
+}`;
+const PFS = `
+uniform float uGrow, uAlpha; uniform vec3 uColor; uniform vec3 uTgt; uniform float uFocus, uScanY, uLimb;
+varying float vFace; varying float vS; varying vec3 vW; varying float vLat;
+void main(){
+  if (vS > uGrow) discard;
+  vec2 d = gl_PointCoord - 0.5; float r = length(d);
+  float m = smoothstep(0.5, 0.2, r);
+  float face = vFace > 0.0 ? smoothstep(0.0, 0.35, vFace) * mix(1.0, smoothstep(0.15, 0.5, vFace) * mix(1.0, 0.6, smoothstep(0.83, 0.88, vLat)), uLimb) : 0.0;
+  float ang = acos(clamp(dot(normalize(vW), uTgt), -1.0, 1.0));
+  float focus = mix(1.0, 0.3 + 1.2 * exp(-ang * ang / 0.01), uFocus);
+  float scan = exp(-pow((vW.y - uScanY) / 0.045, 2.0));
+  gl_FragColor = vec4(uColor * m * face * uAlpha * focus + vec3(0.6,1.0,1.0) * scan * m * face * 0.5, 1.0);
+}`;
+
+function lineMat(o) {
+  return new THREE.ShaderMaterial({
+    vertexShader: VS, fragmentShader: FS, transparent: true, depthTest: false, depthWrite: false,
+    blending: THREE.AdditiveBlending,
+    uniforms: {
+      uCam: { value: new THREE.Vector3() }, uGrow: { value: 0 }, uSpread: { value: o.spread ?? 0.6 },
+      uAlpha: { value: o.alpha ?? 1 }, uBack: { value: o.back ?? 0.12 }, uHead: { value: o.head ?? 1 },
+      uScanY: { value: 9 }, uFaceMode: { value: o.face ?? 1 }, uDash: { value: o.dash ?? 0 }, uTime: { value: 0 },
+      uColor: { value: new THREE.Color(...(o.color || [0, 0.9, 1])) }, uTgt: { value: new THREE.Vector3(0, 0, 1) },
+      uPulse: { value: 0 }, uPulseAmp: { value: 0 }, uFocus: { value: 0 }, uLimb: { value: 1 },
+    },
+  });
+}
+// polylines -> LineSegments with per-vertex aU (0..1 along line) and per-line aS (start offset)
+function buildLines(lines, mat, seed = 1) {
+  const pos = [], U = [], S = [];
+  lines.forEach((pts, li) => {
+    let L = 0; const cum = [0];
+    for (let i = 1; i < pts.length; i++) { L += pts[i].distanceTo(pts[i - 1]); cum.push(L); }
+    if (L <= 0) return;
+    const s = hash(seed, li);
+    for (let i = 1; i < pts.length; i++) {
+      const a = pts[i - 1], b = pts[i];
+      pos.push(a.x, a.y, a.z, b.x, b.y, b.z); U.push(cum[i - 1] / L, cum[i] / L); S.push(s, s);
+    }
+  });
+  const g = new THREE.BufferGeometry();
+  g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+  g.setAttribute('aU', new THREE.Float32BufferAttribute(U, 1));
+  g.setAttribute('aS', new THREE.Float32BufferAttribute(S, 1));
+  const m = new THREE.LineSegments(g, mat); m.frustumCulled = false; return m;
+}
+
+// post-dive map intelligence: cities (static) + sea tracks (moving, deg/s)
+const CITIES = [['YTY', '扬州', 32.39, 119.41], ['YNZ', '盐城', 33.35, 120.16], ['JHA', '金华', 29.08, 119.65], ['HYN', '台州', 28.66, 121.42], ['WNZ', '温州', 28.00, 120.70]];
+export const H0 = 6.35;
+const TRACKS = [['TRK 11', 33.05, 123.25, -0.040, -0.050], ['TRK 12', 32.25, 122.55, 0.030, 0.055], ['TRK 14', 28.95, 122.75, 0.045, -0.030]];
+export function createHolo(topo, landMask) {
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(30, 16 / 9, 0.005, 100);
+  const tilt = new THREE.Group(); const spin = new THREE.Group();
+  tilt.rotation.order = 'XYZ'; tilt.add(spin); scene.add(tilt);
+  const mats = [];
+  const reg = (m) => (mats.push(m), m);
+
+  // coastlines
+  const land = topojson.feature(topo, topo.objects.land);
+  const rings = [];
+  for (const f of land.features) {
+    const polys = f.geometry.type === 'Polygon' ? [f.geometry.coordinates] : f.geometry.coordinates;
+    for (const poly of polys) for (const ring of poly) {
+      if (ring.length < 4) continue;
+      rings.push(ring.map(([lon, lat]) => ll(lat, lon, 1.0015)));
+    }
+  }
+  const coastMat = reg(lineMat({ alpha: 0.9, back: 0.09, spread: 0.55 }));
+  spin.add(buildLines(rings, coastMat, 3));
+
+  // graticule 10°
+  const grat = [];
+  for (let lat = -80; lat <= 80; lat += 10) { const p = []; for (let lon = -180; lon <= 180; lon += 2) p.push(ll(lat, lon)); grat.push(p); }
+  for (let lon = -180; lon < 180; lon += 10) { const p = []; for (let lat = -90; lat <= 90; lat += 2) p.push(ll(lat, lon)); grat.push(p); }
+  const gratMat = reg(lineMat({ color: [0, 0.495, 1], alpha: 0.2, back: 0.05, spread: 0.2, head: 0.4 }));
+  spin.add(buildLines(grat, gratMat, 5));
+  // fine 1° grid around target (fades in with zoom)
+  const fine = [];
+  for (let lat = 22; lat <= 41; lat += 1) { const p = []; for (let lon = 110; lon <= 133; lon += 0.5) p.push(ll(lat, lon, 1.0005)); fine.push(p); }
+  for (let lon = 110; lon <= 133; lon += 1) { const p = []; for (let lat = 22; lat <= 41; lat += 0.5) p.push(ll(lat, lon, 1.0005)); fine.push(p); }
+  const fineMat = reg(lineMat({ color: [0, 0.495, 1], alpha: 0.0, back: 0.0, spread: 0.3, head: 0.6 }));
+  spin.add(buildLines(fine, fineMat, 9));
+
+  // dotted land (fibonacci) + dense patch near target
+  const inLand = (lat, lon) => {
+    const x = Math.floor((lon + 180) / 360 * landMask.w) % landMask.w, y = Math.floor((90 - lat) / 180 * landMask.h);
+    return landMask.data[(y * landMask.w + x) * 4 + 3] > 128;
+  };
+  const mkPoints = (arr, size, alpha) => {
+    const pos = [], S = [];
+    arr.forEach(([lat, lon], i) => { const v = ll(lat, lon, 1.001); pos.push(v.x, v.y, v.z); S.push(hash(11, i)); });
+    const g = new THREE.BufferGeometry();
+    g.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
+    g.setAttribute('aS', new THREE.Float32BufferAttribute(S, 1));
+    const m = new THREE.ShaderMaterial({ vertexShader: PVS, fragmentShader: PFS, transparent: true, depthTest: false,
+      depthWrite: false, blending: THREE.AdditiveBlending,
+      uniforms: { uCam: { value: new THREE.Vector3() }, uSize: { value: size }, uGrow: { value: 0 }, uAlpha: { value: alpha },
+        uColor: { value: new THREE.Color(0, 0.4125, 0.9) }, uTgt: { value: new THREE.Vector3(0, 0, 1) }, uFocus: { value: 0 }, uScanY: { value: 9 }, uLimb: { value: 1 } } });
+    const p = new THREE.Points(g, m); p.frustumCulled = false; spin.add(p); return m;
+  };
+  const fib = []; const N = 16000, ga = Math.PI * (3 - Math.sqrt(5));
+  for (let i = 0; i < N; i++) {
+    const y = 1 - (i + 0.5) / N * 2, lat = Math.asin(y) / DEG, lon = ((i * ga / DEG) % 360) - 180;
+    if (inLand(lat, lon)) fib.push([lat, lon]);
+  }
+  const dotsMat = reg(mkPoints(fib, 2.0, 0.26));
+  const dense = [];
+  for (let lat = 18; lat <= 44; lat += 0.13) for (let lon = 104; lon <= 138; lon += 0.13 / Math.cos(lat * DEG)) if (inLand(lat, lon)) dense.push([lat, lon]);
+  const denseMat = reg(mkPoints(dense, 1.35, 0.0));
+
+  // atmosphere fresnel shell
+  const shellMat = new THREE.ShaderMaterial({ transparent: true, depthWrite: false, depthTest: false, blending: THREE.AdditiveBlending,
+    uniforms: { uCam: { value: new THREE.Vector3() }, uA: { value: 0 } },
+    vertexShader: `uniform vec3 uCam; varying float vF; void main(){ vec4 wp = modelMatrix*vec4(position,1.0);
+      vF = dot(normalize(wp.xyz), normalize(uCam-wp.xyz)); gl_Position = projectionMatrix*viewMatrix*wp; }`,
+    fragmentShader: `uniform float uA; varying float vF; void main(){ float f = pow(1.0-clamp(vF,0.0,1.0), 3.5);
+      gl_FragColor = vec4(vec3(0.0,0.55,0.7)*(f*0.38+0.012)*uA, 1.0); }` });
+  const shell = new THREE.Mesh(new THREE.SphereGeometry(1.0, 96, 64), shellMat); scene.add(shell);
+
+  // orbit rings (scene space, not spinning with globe)
+  const orbit = (r, rx, rz) => { const p = []; for (let a = 0; a <= 360; a += 1) p.push(new THREE.Vector3(Math.cos(a * DEG) * r, 0, Math.sin(a * DEG) * r)); 
+    const m = reg(lineMat({ alpha: 0.5, face: 0, spread: 0, head: 0.8, dash: 90 })); const o = buildLines([p], m, 21);
+    o.rotation.set(rx, 0, rz); scene.add(o); return { m, o, r }; };
+  const orbits = [orbit(1.32, 1.25, 0.32), orbit(1.5, 1.42, -0.5)];
+
+  // target beam + surface rings (in spin space)
+  const T = ll(TARGET.lat, TARGET.lon, 1.0);
+  const beamMat = reg(lineMat({ alpha: 1.0, face: 0, spread: 0, head: 0 }));
+  const beam = buildLines([[T.clone().multiplyScalar(1.0), T.clone().multiplyScalar(1.07)]], beamMat, 31); spin.add(beam);
+  const circ = (rad) => { const n = T.clone().normalize(); const u = new THREE.Vector3(0, 1, 0).cross(n).normalize(); const v = n.clone().cross(u);
+    const p = []; for (let a = 0; a <= 360; a += 3) p.push(T.clone().multiplyScalar(1.002).addScaledVector(u, Math.cos(a * DEG) * rad).addScaledVector(v, Math.sin(a * DEG) * rad)); return p; };
+  const tRingMat = reg(lineMat({ alpha: 0.0, face: 0, spread: 0, head: 0 }));
+  spin.add(buildLines([circ(0.012), circ(0.024), circ(0.045)], tRingMat, 41));
+
+  const GA = ll(-9, 28, 1), GB = T.clone().normalize(), GN = GA.clone().cross(GB).normalize();
+  const GU = GA.clone().normalize(), GV = GN.clone().cross(GU).normalize();   // circle: cos(a)·GU + sin(a)·GV, a grows toward the target
+  const aT = Math.atan2(GB.dot(GV), GB.dot(GU));
+  const gc = (a, r = 1) => GU.clone().multiplyScalar(Math.cos(a) * r).addScaledVector(GV, Math.sin(a) * r);
+  const allLineMats = mats.filter((m) => m.uniforms.uTgt && m.uniforms.uPulse);
+  const tmp = new THREE.Vector3();
+
+  function update(t) {
+    // --- globe orientation: auto drift → hermite turn onto target (4.4–5.4)
+    const L = TARGET.lon, t0 = 4.4;
+    let lonC;
+    if (t < t0) lonC = L - 70 + 8 * (t - t0);
+    else if (t < 5.4) lonC = L - 70 + hermite((t - t0) / 1.0, 0, 70, 8, 0);
+    else lonC = L;
+    const tiltV = t < t0 ? 0.36 : lerp(0.36, TARGET.lat * DEG, E.inOutC(prog(t, t0, 1.0)));
+    spin.rotation.y = -lonC * DEG; tilt.rotation.x = tiltV;
+    tilt.updateMatrixWorld(true);
+    const Tw = T.clone().applyMatrix4(spin.matrixWorld);
+
+    // --- camera: orbit framing → dive at lock
+    const z = E.outC(prog(t, LOCK, 1.45));           // dive progress
+    const zs = E.inOutC(prog(t, LOCK, 1.9));          // pitch
+    const h = Math.exp(lerp(Math.log(H0), Math.log(0.3), z)) + 0.02 * Math.sin(t * 0.7) * z;
+    const pitch = lerp(0, 38, zs) * DEG;
+    const drift = 0.7 * Math.sin(t * 0.9) * DEG * z;
+    const dir = new THREE.Vector3(Math.sin(drift), -Math.sin(pitch), Math.cos(pitch)).normalize();
+    const look = Tw.clone().multiplyScalar(lerp(0, 1, E.inOutC(prog(t, LOCK, 0.9))));
+    // before lock look at origin (globe centred); after, look at the target point (which sits on the z axis)
+    camera.position.copy(Tw.clone().normalize().multiplyScalar(1).addScaledVector(dir, h));
+    if (t < LOCK) camera.position.set(0, 0, H0 + 1);
+    camera.lookAt(t < LOCK ? new THREE.Vector3(0, 0, 0) : look);
+    camera.updateMatrixWorld(true); camera.updateProjectionMatrix();
+
+    const cam = camera.position;
+    for (const m of mats) { if (m.uniforms.uCam) m.uniforms.uCam.value.copy(cam); if (m.uniforms.uTime) m.uniforms.uTime.value = t; }
+    shellMat.uniforms.uCam.value.copy(cam);
+
+    // --- build-on
+    const grow = E.inOutC(prog(t, 1.35, 1.25));
+    coastMat.uniforms.uGrow.value = grow;
+    gratMat.uniforms.uGrow.value = E.outC(prog(t, 1.2, 1.0));
+    dotsMat.uniforms.uGrow.value = E.outC(prog(t, 2.0, 1.2));
+    shellMat.uniforms.uA.value = E.outC(prog(t, 1.2, 1.0)) * (1 - z);
+    orbits.forEach((o, i) => { o.m.uniforms.uGrow.value = E.outC(prog(t, 1.9 + i * 0.25, 0.8)); o.m.uniforms.uAlpha.value = 0.55 * (1 - z);
+      o.o.rotation.y = t * (0.18 + i * 0.07); });
+    // focus / zoom detail
+    fineMat.uniforms.uGrow.value = E.outC(prog(t, LOCK + 0.25, 0.9)); fineMat.uniforms.uAlpha.value = 0.46 * z;
+    denseMat.uniforms.uGrow.value = E.outC(prog(t, LOCK + 0.15, 1.0)); denseMat.uniforms.uAlpha.value = 0.62 * z;
+    dotsMat.uniforms.uAlpha.value = 0.26 * (1 - 0.8 * z);
+    gratMat.uniforms.uAlpha.value = 0.2 * (1 - 0.4 * z);
+    const focus = 0.85 * z;
+    for (const m of mats) if (m.uniforms.uLimb) m.uniforms.uLimb.value = 1 - z;
+    // scan band sweeps: every 2 s pre-lock
+    const sp = ((t - 1.4) % 2.0) / 2.0;
+    const scanY = t > 1.4 && t < LOCK ? lerp(1.25, -1.25, E.inOutC(sp)) : 9;
+    // surface pulse from target after lock (angular radius)
+    const pt = t - LOCK;
+    const pulse = pt > 0 ? (pt % 1.0) * 0.12 : 0, pAmp = pt > 0.25 ? 0.7 * (1 - (pt % 1.0)) : 0;
+    const tn = Tw.clone().normalize();
+    for (const m of allLineMats) { m.uniforms.uScanY.value = scanY; m.uniforms.uTgt.value.copy(tn); m.uniforms.uPulse.value = pulse;
+      m.uniforms.uPulseAmp.value = pAmp; m.uniforms.uFocus.value = focus; }
+    for (const m of [dotsMat, denseMat]) { m.uniforms.uTgt.value.copy(tn); m.uniforms.uFocus.value = focus; m.uniforms.uScanY.value = scanY; }
+    beamMat.uniforms.uGrow.value = E.outE(prog(t, LOCK, 0.35)); beamMat.uniforms.uAlpha.value = 1.0;
+    tRingMat.uniforms.uGrow.value = E.outC(prog(t, LOCK, 0.5)); tRingMat.uniforms.uAlpha.value = 0.9;
+
+    // --- projections for the 2D HUD
+    const proj = (v) => { tmp.copy(v).project(camera); return { x: (tmp.x + 1) * 960, y: (1 - tmp.y) * 540, z: tmp.z }; };
+    const faceOf = (v) => v.clone().normalize().dot(cam.clone().sub(v).normalize());
+    const out = { target: { ...proj(Tw), face: faceOf(Tw) }, cnd: [] , zoom: z, globeR: 0, lonC, tiltDeg: tiltV / DEG, h };
+    for (const c of CND) { const w = ll(c.lat, c.lon, 1).applyMatrix4(spin.matrixWorld); out.cnd.push({ ...proj(w), face: faceOf(w) }); }
+    // satellite: angular distance to target (rad) closes 1.35 -> 0.26 (1648 km) over 3.2..6.4 s
+    const sa = aT - lerp(1.35, 0.26, E.outC(prog(t, 3.2, 3.2)));
+    const trk = [];
+    for (let i = 0; i <= 120; i++) { const a = sa - 1.7 + i * (2.6 / 120), w = gc(a, 1.002).applyMatrix4(spin.matrixWorld); trk.push({ ...proj(w), face: faceOf(w), a: a - sa }); }
+    const satW = gc(sa, 1.08).applyMatrix4(spin.matrixWorld), nadW = gc(sa, 1.0).applyMatrix4(spin.matrixWorld);
+    const fp = []; for (let i = 0; i <= 32; i++) { const q = i / 32 * Math.PI * 2, rr = 0.075;
+      const v = gc(sa + Math.cos(q) * rr, 1).addScaledVector(GN, Math.sin(q) * rr).normalize().multiplyScalar(1.002).applyMatrix4(spin.matrixWorld); fp.push({ ...proj(v), face: faceOf(v) }); }
+    out.sat = { ...proj(satW), face: faceOf(nadW), nad: proj(nadW), trk, fp, dist: sa - aT };
+    out.cities = CITIES.map((c) => { const w = ll(c[2], c[3], 1).applyMatrix4(spin.matrixWorld); return { id: c[0], cn: c[1], ...proj(w), face: faceOf(w) }; });
+    const tt = t - 7.0;
+    out.tracks = TRACKS.map((c) => { const w = ll(c[1] + c[3] * tt, c[2] + c[4] * tt, 1).applyMatrix4(spin.matrixWorld), w2 = ll(c[1] + c[3] * (tt - 1.5), c[2] + c[4] * (tt - 1.5), 1).applyMatrix4(spin.matrixWorld);
+      const p2 = proj(w2); return { id: c[0], ...proj(w), bx: p2.x, by: p2.y, face: faceOf(w), kn: Math.round(Math.hypot(c[3], c[4]) * 260) }; });
+    return out;
+  }
+  return { scene, camera, update };
+}