Deploy Asterism Relay vertical slice

README.md

@@ -1,14 +1,29 @@
 ---
-title: Universe
-emoji: 🐠
-colorFrom: green
-colorTo: green
+title: Asterism Relay
+emoji: 🌌
+colorFrom: indigo
+colorTo: blue
 sdk: gradio
-sdk_version: 6.18.0
-python_version: '3.12'
 app_file: app.py
 pinned: false
-license: apache-2.0
+tags:
+  - build-small-hackathon
+  - thousand-token-wood
+  - custom-ui
+  - gradio-server
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Asterism Relay
+
+An explorable first-person cosmos for the Build Small Hackathon's Thousand Token Wood track.
+
+This first vertical slice proves the core loop:
+
+- custom Three.js frontend served from `gr.Server`
+- HYG-style real star sample for the background field
+- one deterministic procedural body seeded from position
+- backend sector JSON generated ahead of arrival
+- fact layer selected from a curated local astrophysics knowledge base
+- fiction layer authored separately as a vanished-civilization transmission
+
+The production model is intentionally behind a small adapter so the author model can be selected after the planned bake-off.

app.py

@@ -0,0 +1,160 @@
+import json
+import random
+from functools import lru_cache
+from pathlib import Path
+from typing import Any
+
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+
+try:
+    import spaces
+except ImportError:  # Local development outside Hugging Face ZeroGPU.
+    class _Spaces:
+        @staticmethod
+        def GPU(*args: Any, **kwargs: Any):
+            if args and callable(args[0]) and not kwargs:
+                return args[0]
+
+            def decorator(fn):
+                return fn
+
+            return decorator
+
+    spaces = _Spaces()
+
+
+ROOT = Path(__file__).parent
+DATA = ROOT / "data"
+STATIC = ROOT / "static"
+
+app = Server()
+app.mount("/static", StaticFiles(directory=STATIC), name="static")
+app.mount("/data", StaticFiles(directory=DATA), name="data")
+
+
+@lru_cache(maxsize=1)
+def load_facts() -> list[dict[str, Any]]:
+    return json.loads((DATA / "astro_facts.json").read_text(encoding="utf-8"))
+
+
+@lru_cache(maxsize=128)
+def generate_sector_cached(sector_key: str, position_key: str) -> dict[str, Any]:
+    facts = load_facts()
+    rng = random.Random(f"{sector_key}:{position_key}:asterism-relay")
+    concept = rng.choice(facts)
+    serial = rng.randrange(100, 999)
+    fragment_no = rng.randrange(2, 8)
+    hue_shift = rng.random()
+
+    selected_facts = rng.sample(concept["facts"], k=min(3, len(concept["facts"])))
+    explanation = " ".join([concept["one_line"], *selected_facts])
+
+    names = [
+        "Lacuna",
+        "Vesper",
+        "Aster",
+        "Noctil",
+        "Mirrorglass",
+        "Far Choir",
+        "Horizon Loom",
+    ]
+    civilization_terms = [
+        "the Archivists",
+        "the Choir of Measures",
+        "the Lantern Kin",
+        "the Last Cartographers",
+    ]
+
+    return {
+        "sector_key": sector_key,
+        "body": {
+            "id": f"{concept['id']}-{serial}",
+            "name": f"{rng.choice(names)} {serial}",
+            "type": concept["body_type"],
+            "phenomenon": concept["name"],
+            "position": parse_position(position_key),
+        },
+        "fact_layer": {
+            "source": "curated_local_knowledge_base",
+            "concept_id": concept["id"],
+            "title": concept["name"],
+            "explanation": explanation,
+            "facts": selected_facts,
+        },
+        "fiction_layer": {
+            "civilization": rng.choice(civilization_terms),
+            "fragment_id": f"transmission-{fragment_no:02d}",
+            "transmission": build_transmission(concept["id"], rng),
+        },
+        "shader": {
+            "seed": rng.randrange(1_000_000, 9_999_999),
+            "primary": concept["visual_cues"]["primary_color"],
+            "secondary": concept["visual_cues"]["secondary_color"],
+            "emissive": concept["visual_cues"]["emissive"],
+            "beam": concept["visual_cues"]["beam"],
+            "noise_scale": round(1.8 + hue_shift * 3.4, 3),
+            "atmosphere": round(0.25 + rng.random() * 0.5, 3),
+        },
+    }
+
+
+def parse_position(position_key: str) -> dict[str, float]:
+    try:
+        x, y, z = [float(part) for part in position_key.split(",")]
+    except ValueError:
+        x, y, z = 0.0, 20.0, -450.0
+    return {"x": x, "y": y, "z": z}
+
+
+def build_transmission(concept_id: str, rng: random.Random) -> str:
+    fragments = {
+        "pulsar": [
+            "We counted the beacon until the count began answering back.",
+            "Their clock survived the cities; follow the pulse, not the dust.",
+        ],
+        "red_giant": [
+            "The old suns taught us expansion is not escape, only a slower goodbye.",
+            "When the red light filled our windows, every archive learned to whisper.",
+        ],
+        "white_dwarf": [
+            "A small ember can remember a whole star if the dark is patient enough.",
+            "We hid the index in the cooling remnant, where haste cannot follow.",
+        ],
+        "accretion_disk": [
+            "The dark center is silent. The falling light around it confesses everything.",
+            "Do not cross the bright ring. Read it from the edge where time still behaves.",
+        ],
+        "emission_nebula": [
+            "New stars were born in the wound, and we mistook their first light for forgiveness.",
+            "The cloud glows because something young is demanding to be seen.",
+        ],
+    }
+    return rng.choice(fragments.get(concept_id, fragments["pulsar"]))
+
+
+@spaces.GPU(duration=20)
+def author_sector_payload(sector_key: str, position_key: str) -> dict[str, Any]:
+    # The model adapter belongs here. For the slice, physics text is assembled only
+    # from curated facts while the fiction layer remains free to vary by seed.
+    return generate_sector_cached(sector_key, position_key)
+
+
+@app.api(name="generate_sector", concurrency_limit=1)
+def generate_sector(sector_key: str, position_key: str) -> dict[str, Any]:
+    return author_sector_payload(sector_key, position_key)
+
+
+@app.get("/api/sector/{sector_key}")
+async def sector_rest(sector_key: str, position: str = "0,20,-450"):
+    return JSONResponse(generate_sector_cached(sector_key, position))
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    return HTMLResponse((STATIC / "index.html").read_text(encoding="utf-8"))
+
+
+if __name__ == "__main__":
+    app.launch(server_name="0.0.0.0", server_port=7860)

data/astro_facts.json

@@ -0,0 +1,92 @@
+[
+  {
+    "id": "pulsar",
+    "name": "Pulsar",
+    "body_type": "neutron_star",
+    "one_line": "A pulsar is a rapidly rotating neutron star whose magnetic poles sweep beams of radiation across space.",
+    "facts": [
+      "Neutron stars are the collapsed cores left behind by some massive stars after supernova explosions.",
+      "A pulsar's radio, X-ray, or gamma-ray pulses are seen when its beam crosses Earth's line of sight.",
+      "Pulsars can rotate from a few times per second to hundreds of times per second.",
+      "The pulses are extremely regular, which makes some pulsars useful as precise cosmic clocks."
+    ],
+    "visual_cues": {
+      "primary_color": "#8fd7ff",
+      "secondary_color": "#f7fbff",
+      "emissive": 1.6,
+      "beam": true
+    }
+  },
+  {
+    "id": "red_giant",
+    "name": "Red Giant",
+    "body_type": "star",
+    "one_line": "A red giant is an aging star that has expanded after exhausting hydrogen fuel in its core.",
+    "facts": [
+      "As the core contracts, hydrogen fusion continues in a shell around it and the outer layers swell.",
+      "Red giants are cooler at their surfaces than Sun-like main-sequence stars, so they appear orange or red.",
+      "The Sun is expected to become a red giant late in its life cycle.",
+      "Strong stellar winds from red giants can seed nearby space with heavier elements."
+    ],
+    "visual_cues": {
+      "primary_color": "#ff9b5f",
+      "secondary_color": "#ffd0a3",
+      "emissive": 0.9,
+      "beam": false
+    }
+  },
+  {
+    "id": "white_dwarf",
+    "name": "White Dwarf",
+    "body_type": "stellar_remnant",
+    "one_line": "A white dwarf is the dense, hot remnant core of a low- or medium-mass star.",
+    "facts": [
+      "White dwarfs no longer sustain normal fusion in their cores.",
+      "A typical white dwarf packs roughly a Sun-like mass into an Earth-sized volume.",
+      "They slowly cool over enormous spans of time by radiating stored thermal energy.",
+      "In some binary systems, material falling onto a white dwarf can trigger nova outbursts."
+    ],
+    "visual_cues": {
+      "primary_color": "#d7edff",
+      "secondary_color": "#ffffff",
+      "emissive": 1.2,
+      "beam": false
+    }
+  },
+  {
+    "id": "accretion_disk",
+    "name": "Black Hole Accretion Disk",
+    "body_type": "black_hole",
+    "one_line": "An accretion disk is a rotating disk of gas heated as it spirals around a compact object such as a black hole.",
+    "facts": [
+      "Friction and magnetic turbulence in the disk convert orbital energy into heat and radiation.",
+      "The black hole itself emits no light, but nearby infalling matter can glow intensely.",
+      "Relativistic speeds near a black hole can distort the disk's apparent brightness and shape.",
+      "Some accreting black holes launch jets along their rotation axes."
+    ],
+    "visual_cues": {
+      "primary_color": "#ffd166",
+      "secondary_color": "#4cc9f0",
+      "emissive": 1.8,
+      "beam": false
+    }
+  },
+  {
+    "id": "emission_nebula",
+    "name": "Emission Nebula",
+    "body_type": "nebula",
+    "one_line": "An emission nebula is a cloud of gas that glows after ultraviolet light from hot stars ionizes it.",
+    "facts": [
+      "Ionized hydrogen often produces a red glow as electrons recombine with protons.",
+      "Many emission nebulae are active star-forming regions.",
+      "Dust mixed with the gas can absorb, scatter, and reshape the light we see.",
+      "Massive young stars can carve cavities and pillars into surrounding gas clouds."
+    ],
+    "visual_cues": {
+      "primary_color": "#ff4f8b",
+      "secondary_color": "#46e0c4",
+      "emissive": 0.7,
+      "beam": false
+    }
+  }
+]

data/hyg_sample.csv

@@ -0,0 +1,17 @@
+id,proper,ra,dec,dist,mag,spect
+1,Sirius,6.7525,-16.7161,2.637,-1.46,A1V
+2,Canopus,6.3992,-52.6957,94.786,-0.74,A9II
+3,Alpha Centauri,14.6601,-60.8339,1.338,-0.27,G2V
+4,Arcturus,14.2610,19.1825,11.257,-0.05,K1.5III
+5,Vega,18.6156,38.7837,7.678,0.03,A0V
+6,Capella,5.2782,45.9980,12.927,0.08,G5III
+7,Rigel,5.2423,-8.2016,264.550,0.13,B8Ia
+8,Procyon,7.6550,5.2250,3.514,0.34,F5IV
+9,Betelgeuse,5.9195,7.4071,197.628,0.45,M2Iab
+10,Altair,19.8464,8.8683,5.129,0.76,A7V
+11,Aldebaran,4.5987,16.5093,20.433,0.87,K5III
+12,Spica,13.4199,-11.1613,76.923,0.98,B1III
+13,Antares,16.4901,-26.4320,169.492,1.06,M1.5Iab
+14,Pollux,7.7553,28.0262,10.358,1.14,K0III
+15,Fomalhaut,22.9608,-29.6222,7.704,1.16,A3V
+16,Deneb,20.6905,45.2803,802.568,1.25,A2Ia

requirements.txt

@@ -0,0 +1,3 @@
+gradio>=6.0.0
+fastapi>=0.115.0
+uvicorn>=0.32.0

static/app.js

@@ -0,0 +1,392 @@
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.165.0/build/three.module.js";
+
+const canvas = document.querySelector("#universe");
+const hud = {
+  sector: document.querySelector("#sector"),
+  status: document.querySelector("#status"),
+  name: document.querySelector("#body-name"),
+  phenomenon: document.querySelector("#phenomenon"),
+  science: document.querySelector("#science"),
+  transmission: document.querySelector("#transmission"),
+};
+const engage = document.querySelector("#engage");
+
+const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, powerPreference: "high-performance" });
+renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+renderer.setSize(window.innerWidth, window.innerHeight);
+renderer.outputColorSpace = THREE.SRGBColorSpace;
+
+const scene = new THREE.Scene();
+scene.fog = new THREE.FogExp2(0x020408, 0.00035);
+
+const camera = new THREE.PerspectiveCamera(72, window.innerWidth / window.innerHeight, 0.1, 6000);
+camera.position.set(0, 12, 90);
+
+const clock = new THREE.Clock();
+const keys = new Set();
+const velocity = new THREE.Vector3();
+const direction = new THREE.Vector3();
+const yaw = new THREE.Object3D();
+const pitch = new THREE.Object3D();
+yaw.add(pitch);
+pitch.add(camera);
+scene.add(yaw);
+yaw.position.copy(camera.position);
+camera.position.set(0, 0, 0);
+
+let sectorPayload = null;
+let payloadRequested = false;
+let nearBodyShown = false;
+
+const targetPosition = new THREE.Vector3(0, 20, -450);
+const sectorKey = "0:0:-1";
+const positionKey = `${targetPosition.x},${targetPosition.y},${targetPosition.z}`;
+
+scene.add(new THREE.AmbientLight(0x8fb6ff, 0.28));
+const keyLight = new THREE.PointLight(0xb7f4ff, 850, 1200);
+keyLight.position.set(90, 120, 150);
+scene.add(keyLight);
+
+const bodyGroup = new THREE.Group();
+bodyGroup.position.copy(targetPosition);
+scene.add(bodyGroup);
+
+const starMaterial = new THREE.PointsMaterial({
+  size: 2.4,
+  sizeAttenuation: true,
+  transparent: true,
+  opacity: 0.92,
+  vertexColors: true,
+  depthWrite: false,
+});
+
+createFallbackStarfield();
+loadHygStars();
+createBody({
+  primary: "#8fd7ff",
+  secondary: "#f7fbff",
+  emissive: 1.3,
+  beam: true,
+  seed: 240519,
+  noise_scale: 2.7,
+  atmosphere: 0.45,
+});
+createNebulae();
+requestSectorAhead();
+
+engage.addEventListener("click", () => {
+  canvas.requestPointerLock?.();
+  hud.status.textContent = "FLIGHT ONLINE";
+  engage.classList.add("hidden");
+});
+
+document.addEventListener("pointerlockchange", () => {
+  if (document.pointerLockElement !== canvas) engage.classList.remove("hidden");
+});
+
+document.addEventListener("mousemove", (event) => {
+  if (document.pointerLockElement !== canvas) return;
+  yaw.rotation.y -= event.movementX * 0.0022;
+  pitch.rotation.x -= event.movementY * 0.0022;
+  pitch.rotation.x = THREE.MathUtils.clamp(pitch.rotation.x, -1.4, 1.4);
+});
+
+document.addEventListener("keydown", (event) => keys.add(event.code));
+document.addEventListener("keyup", (event) => keys.delete(event.code));
+window.addEventListener("resize", onResize);
+
+animate();
+
+async function requestSectorAhead() {
+  if (payloadRequested) return;
+  payloadRequested = true;
+  hud.status.textContent = "AUTHORING SECTOR";
+
+  try {
+    const response = await fetch(`/api/sector/${encodeURIComponent(sectorKey)}?position=${encodeURIComponent(positionKey)}`);
+    if (!response.ok) throw new Error(`Sector request failed: ${response.status}`);
+    sectorPayload = await response.json();
+  } catch (error) {
+    hud.status.textContent = "CACHE ERROR";
+    hud.science.textContent = "The sector author did not respond. Reload the page and try again.";
+    return;
+  }
+
+  applySectorPayload(sectorPayload);
+  hud.status.textContent = "CACHE READY";
+}
+
+function applySectorPayload(payload) {
+  hud.sector.textContent = `SECTOR ${payload.sector_key}`;
+  hud.name.textContent = payload.body.name;
+  hud.phenomenon.textContent = payload.fact_layer.title;
+  hud.science.textContent = "";
+  hud.transmission.textContent = "";
+  createBody(payload.shader);
+}
+
+function revealPayload() {
+  if (!sectorPayload || nearBodyShown) return;
+  nearBodyShown = true;
+  hud.science.textContent = sectorPayload.fact_layer.explanation;
+  hud.transmission.textContent = `“${sectorPayload.fiction_layer.transmission}”`;
+  hud.status.textContent = "TRANSMISSION LOCK";
+}
+
+function createBody(shader) {
+  bodyGroup.clear();
+  const rng = seeded(shader.seed);
+  const geometry = new THREE.SphereGeometry(34, 96, 64);
+  const uniforms = {
+    time: { value: 0 },
+    primary: { value: new THREE.Color(shader.primary) },
+    secondary: { value: new THREE.Color(shader.secondary) },
+    noiseScale: { value: shader.noise_scale },
+    emissive: { value: shader.emissive },
+  };
+  const material = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: `
+      varying vec3 vNormal;
+      varying vec3 vPosition;
+      void main() {
+        vNormal = normalize(normalMatrix * normal);
+        vPosition = position;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform float time;
+      uniform vec3 primary;
+      uniform vec3 secondary;
+      uniform float noiseScale;
+      uniform float emissive;
+      varying vec3 vNormal;
+      varying vec3 vPosition;
+
+      float hash(vec3 p) {
+        return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);
+      }
+
+      float noise(vec3 p) {
+        vec3 i = floor(p);
+        vec3 f = fract(p);
+        f = f * f * (3.0 - 2.0 * f);
+        float n = mix(
+          mix(mix(hash(i), hash(i + vec3(1,0,0)), f.x), mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),
+          mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x), mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),
+          f.z
+        );
+        return n;
+      }
+
+      void main() {
+        vec3 p = normalize(vPosition) * noiseScale + vec3(time * 0.06, 0.0, time * 0.03);
+        float bands = smoothstep(0.25, 0.9, noise(p) + 0.25 * sin(p.y * 7.0 + time));
+        float fresnel = pow(1.0 - max(dot(vNormal, vec3(0.0, 0.0, 1.0)), 0.0), 2.5);
+        vec3 color = mix(primary, secondary, bands) * (0.75 + emissive * 0.3) + fresnel * secondary;
+        gl_FragColor = vec4(color, 1.0);
+      }
+    `,
+  });
+  const sphere = new THREE.Mesh(geometry, material);
+  sphere.userData.uniforms = uniforms;
+  bodyGroup.add(sphere);
+
+  const atmosphere = new THREE.Mesh(
+    new THREE.SphereGeometry(38 + shader.atmosphere * 12, 64, 48),
+    new THREE.MeshBasicMaterial({
+      color: new THREE.Color(shader.secondary),
+      transparent: true,
+      opacity: 0.16 + shader.atmosphere * 0.12,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    }),
+  );
+  bodyGroup.add(atmosphere);
+
+  if (shader.beam) {
+    const beamMat = new THREE.MeshBasicMaterial({
+      color: new THREE.Color(shader.primary),
+      transparent: true,
+      opacity: 0.34,
+      blending: THREE.AdditiveBlending,
+      depthWrite: false,
+    });
+    const beamGeo = new THREE.CylinderGeometry(2.2, 10, 360, 32, 1, true);
+    const beamA = new THREE.Mesh(beamGeo, beamMat);
+    beamA.rotation.z = Math.PI / 2;
+    const beamB = beamA.clone();
+    beamB.rotation.z = -Math.PI / 2;
+    bodyGroup.add(beamA, beamB);
+  }
+
+  bodyGroup.rotation.set(rng() * Math.PI, rng() * Math.PI, 0);
+}
+
+function createFallbackStarfield() {
+  const positions = [];
+  const colors = [];
+  const rng = seeded(1107);
+  for (let i = 0; i < 1600; i++) {
+    const radius = 1500 + rng() * 3800;
+    const theta = rng() * Math.PI * 2;
+    const phi = Math.acos(rng() * 2 - 1);
+    positions.push(
+      radius * Math.sin(phi) * Math.cos(theta),
+      radius * Math.cos(phi),
+      radius * Math.sin(phi) * Math.sin(theta),
+    );
+    const c = new THREE.Color().setHSL(0.56 + rng() * 0.12, 0.45, 0.72 + rng() * 0.22);
+    colors.push(c.r, c.g, c.b);
+  }
+  setStarfield(positions, colors);
+}
+
+async function loadHygStars() {
+  const response = await fetch("/data/hyg_sample.csv").catch(() => null);
+  if (!response?.ok) return;
+  const text = await response.text();
+  const rows = text.trim().split(/\r?\n/).slice(1);
+  const positions = [];
+  const colors = [];
+
+  for (const row of rows) {
+    const [id, proper, ra, dec, dist, mag, spect] = row.split(",");
+    const pos = raDecToVector(Number(ra), Number(dec), Math.min(5200, Number(dist) * 18 + 900));
+    positions.push(pos.x, pos.y, pos.z);
+    const color = spectralColor(spect, Number(mag));
+    colors.push(color.r, color.g, color.b);
+  }
+
+  if (positions.length) setStarfield(positions, colors, 9.0);
+}
+
+function setStarfield(positions, colors, size = 2.4) {
+  const geometry = new THREE.BufferGeometry();
+  geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
+  starMaterial.size = size;
+  const points = new THREE.Points(geometry, starMaterial);
+  const old = scene.getObjectByName("starfield");
+  if (old) scene.remove(old);
+  points.name = "starfield";
+  scene.add(points);
+}
+
+function createNebulae() {
+  const texture = makeNebulaTexture();
+  const material = new THREE.SpriteMaterial({
+    map: texture,
+    color: 0x78ffe0,
+    transparent: true,
+    opacity: 0.22,
+    blending: THREE.AdditiveBlending,
+    depthWrite: false,
+  });
+  const positions = [
+    [-420, 150, -900, 520],
+    [560, -120, -1250, 720],
+    [-100, 420, -1700, 900],
+  ];
+  for (const [x, y, z, scale] of positions) {
+    const sprite = new THREE.Sprite(material.clone());
+    sprite.position.set(x, y, z);
+    sprite.scale.set(scale, scale * 0.58, 1);
+    scene.add(sprite);
+  }
+}
+
+function makeNebulaTexture() {
+  const nebulaCanvas = document.createElement("canvas");
+  nebulaCanvas.width = 256;
+  nebulaCanvas.height = 256;
+  const ctx = nebulaCanvas.getContext("2d");
+  const gradient = ctx.createRadialGradient(128, 128, 12, 128, 128, 128);
+  gradient.addColorStop(0, "rgba(255, 255, 255, 0.55)");
+  gradient.addColorStop(0.35, "rgba(98, 240, 212, 0.22)");
+  gradient.addColorStop(0.7, "rgba(255, 79, 139, 0.13)");
+  gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, 256, 256);
+  return new THREE.CanvasTexture(nebulaCanvas);
+}
+
+function animate() {
+  const dt = Math.min(clock.getDelta(), 0.05);
+  updateFlight(dt);
+
+  const t = clock.elapsedTime;
+  bodyGroup.rotation.y += dt * 0.22;
+  for (const child of bodyGroup.children) {
+    if (child.userData.uniforms) child.userData.uniforms.time.value = t;
+  }
+
+  const dist = yaw.position.distanceTo(targetPosition);
+  if (dist < 650) requestSectorAhead();
+  if (dist < 175) revealPayload();
+  if (!nearBodyShown && sectorPayload) hud.status.textContent = `${Math.round(dist)} KM`;
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+}
+
+function updateFlight(dt) {
+  direction.set(0, 0, 0);
+  if (keys.has("KeyW") || keys.has("ArrowUp")) direction.z -= 1;
+  if (keys.has("KeyS") || keys.has("ArrowDown")) direction.z += 1;
+  if (keys.has("KeyA") || keys.has("ArrowLeft")) direction.x -= 1;
+  if (keys.has("KeyD") || keys.has("ArrowRight")) direction.x += 1;
+  if (keys.has("Space")) direction.y += 1;
+  if (keys.has("ShiftLeft") || keys.has("ShiftRight")) direction.y -= 1;
+  direction.normalize();
+
+  const speed = keys.has("ControlLeft") || keys.has("ControlRight") ? 260 : 145;
+  velocity.lerp(direction.multiplyScalar(speed), 0.12);
+  yaw.translateX(velocity.x * dt);
+  yaw.translateY(velocity.y * dt);
+  yaw.translateZ(velocity.z * dt);
+}
+
+function raDecToVector(raHours, decDeg, radius) {
+  const ra = (raHours / 24) * Math.PI * 2;
+  const dec = THREE.MathUtils.degToRad(decDeg);
+  return new THREE.Vector3(
+    radius * Math.cos(dec) * Math.cos(ra),
+    radius * Math.sin(dec),
+    radius * Math.cos(dec) * Math.sin(ra),
+  );
+}
+
+function spectralColor(spect = "G", mag = 1) {
+  const letter = spect.trim()[0]?.toUpperCase();
+  const palette = {
+    O: 0x9bbcff,
+    B: 0xaabfff,
+    A: 0xd8e7ff,
+    F: 0xfff4df,
+    G: 0xffe7b5,
+    K: 0xffbd6f,
+    M: 0xff8866,
+  };
+  const color = new THREE.Color(palette[letter] || 0xffffff);
+  const boost = THREE.MathUtils.clamp(1.4 - (mag + 1.5) * 0.12, 0.45, 1.4);
+  return color.multiplyScalar(boost);
+}
+
+function seeded(seed) {
+  let state = Number(seed) >>> 0;
+  return () => {
+    state += 0x6d2b79f5;
+    let t = state;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function onResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}

static/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Asterism Relay</title>
+    <link rel="stylesheet" href="/static/styles.css" />
+  </head>
+  <body>
+    <main id="app">
+      <canvas id="universe"></canvas>
+      <section id="hud" aria-live="polite">
+        <div class="system-line">
+          <span id="sector">SECTOR 0:0:-1</span>
+          <span id="status">WARMING CACHE</span>
+        </div>
+        <h1 id="body-name">Asterism Relay</h1>
+        <p id="phenomenon">Acquiring nearby phenomenon</p>
+        <p id="science"></p>
+        <p id="transmission"></p>
+      </section>
+      <button id="engage" type="button" aria-label="Engage flight">ENGAGE</button>
+      <div id="reticle" aria-hidden="true"></div>
+    </main>
+    <script type="module" src="/static/app.js?v=2"></script>
+  </body>
+</html>

static/styles.css

@@ -0,0 +1,127 @@
+:root {
+  color-scheme: dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  background: #020408;
+  color: #f8fbff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+#universe {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: #020408;
+}
+
+#hud {
+  position: fixed;
+  left: clamp(16px, 3vw, 40px);
+  bottom: clamp(18px, 5vh, 52px);
+  width: min(620px, calc(100vw - 32px));
+  padding: 0;
+  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.78);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.system-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  align-items: center;
+  margin-bottom: 10px;
+  font-size: 11px;
+  letter-spacing: 0;
+  color: #89e9ff;
+}
+
+#body-name {
+  margin: 0 0 8px;
+  font-size: clamp(34px, 6vw, 74px);
+  line-height: 0.92;
+  letter-spacing: 0;
+  font-weight: 760;
+}
+
+#phenomenon {
+  margin: 0 0 14px;
+  color: #fff0b8;
+  font-size: clamp(15px, 2vw, 20px);
+}
+
+#science,
+#transmission {
+  max-width: 58ch;
+  margin: 0 0 12px;
+  font-size: clamp(14px, 1.6vw, 17px);
+  line-height: 1.45;
+}
+
+#transmission {
+  color: #c5ffed;
+  font-style: italic;
+}
+
+#engage {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 132px;
+  min-height: 44px;
+  border: 1px solid rgba(137, 233, 255, 0.6);
+  border-radius: 4px;
+  background: rgba(2, 10, 18, 0.72);
+  color: #f8fbff;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0;
+  cursor: pointer;
+  backdrop-filter: blur(10px);
+  z-index: 4;
+}
+
+#engage.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+#reticle {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  border-top: 1px solid rgba(248, 251, 255, 0.72);
+  border-left: 1px solid rgba(248, 251, 255, 0.72);
+  transform: translate(-50%, -50%) rotate(45deg);
+  pointer-events: none;
+  z-index: 3;
+}
+
+@media (max-width: 640px) {
+  #hud {
+    bottom: 16px;
+  }
+
+  #science,
+  #transmission {
+    max-width: 100%;
+  }
+}