rubylens 0.1.0 → 0.2.0

data/assets/runtime/report.js

@@ -4,6 +4,7 @@
     const showcaseDetails = showcaseMode && model.details === true;
     const interactiveMode = !showcaseMode;
     const canvas = document.getElementById("cosmos");
+    const travelCanvas = showcaseMode ? document.getElementById("travel-cosmos") : canvas;
     const showcaseStage = document.getElementById("showcase-stage");
     const showcaseStatus = document.getElementById("showcase-status");
     const showcaseAnnotation = document.getElementById("cinema-annotation");
@@ -16,6 +17,7 @@
     const searchInput = document.getElementById("explorer-search");
     const searchStatus = document.getElementById("search-status");
     const searchResults = document.getElementById("search-results");
+    const uiToggle = document.getElementById("ui-toggle");
     const helpOverlay = document.getElementById("shortcuts-help");
     const helpClose = document.getElementById("help-close");
     let helpReturnFocus = null;
@@ -31,27 +33,15 @@
       tests: { ancestorDepth: .18, definitionSites: .25, reopenings: .18, descendants: .42, references: .85, members: .55 },
       dependencies: { ancestorDepth: .12, definitionSites: .35, reopenings: .2, descendants: .32, references: .48, members: .4 },
     };
-    let width = 0, height = 0, dpr = 1, sceneRight = 0, sceneBottom = 0, sceneCenterX = 0, sceneCenterY = 0, yaw = -.36, pitch = .34, zoom = 1, panX = 0, panY = 0, dragging = false, gesture = null, pinchState = null, animationFrame = 0, hoverFrame = 0, pendingHover = null, selectedPoint = null, selectionLocked = false, focusedCategory = null, expandedSystemIndex = null, expandedPackageIndex = null, activeFactButton = null, navigationMode = "orbit", cameraFlight = null, showcaseStartedAt = null, showcaseRenderer = null, showcaseAnnotationSlot = -1, activeShowcaseAnnotation = null;
+    let width = 0, height = 0, dpr = 1, sceneRight = 0, sceneBottom = 0, sceneCenterX = 0, sceneCenterY = 0, yaw = -.36, pitch = .34, zoom = 1, panX = 0, panY = 0, dragging = false, gesture = null, pinchState = null, animationFrame = 0, hoverFrame = 0, pendingHover = null, selectedPoint = null, selectionLocked = false, focusedCategory = null, expandedSystemIndex = null, expandedPackageIndex = null, activeFactButton = null, navigationMode = "orbit", cameraFlight = null, showcaseStartedAt = null, showcaseRenderer = null, showcaseAnnotationSlot = -1, activeShowcaseAnnotation = null, clipMode = false, dependencySpinElapsed = 0;
     const MIN_ZOOM = .35, MAX_ZOOM = 40, ZOOM_STEP = 1.7, DEPENDENCY_EXPANSION = 2.35;
     const CORE_SCALE_BASELINE = 3_000;
-    const DEPENDENCY_CLOUD_THREASHOLD = 18;
+    const DEPENDENCY_CLOUD_THRESHOLD = 18;
+    const DEPENDENCY_HALO_SPACING_SCALE = 1.15;
     const DEPENDENCY_STAR_ALPHA_SCALE = .85;
     const MORPHOLOGY_FAMILY = Object.freeze({ elliptical: 0, lenticular: 1, spiral: 2, barredSpiral: 3, irregular: 4 });
     const MORPHOLOGY_FAMILY_LABELS = Object.freeze(["Elliptical galaxy", "Lenticular galaxy", "Spiral galaxy", "Barred spiral galaxy", "Irregular galaxy"]);
-    const LEGACY_MORPHOLOGY = Object.freeze({
-      legacy: true,
-      family: MORPHOLOGY_FAMILY.spiral,
-      ellipticity: 0,
-      bulgeShare: .24,
-      armCount: 3,
-      winding: .105,
-      armFraction: .38,
-      barLength: 0,
-      clumpCount: 0,
-      clumpSpread: 0,
-      phaseSeed: 0,
-      phase: 0,
-    });
+    const FALLBACK_MORPHOLOGY_ROW = Object.freeze([MORPHOLOGY_FAMILY.spiral, 0, 240, 3, 105, 380, 0, 0, 0, 0]);
     const RSPEC_PROXY_PREFIX = "RSpec example group #";
     const DEFAULT_CAMERA = Object.freeze({ yaw: -.36, pitch: .34, zoom: 2, panX: 0, panY: 0 });
     const DEFAULT_ROTATION_DIRECTION = "clockwise";
@@ -62,7 +52,9 @@
     const SEARCH_BATCH_SIZE = 8;
     const WARNING_ROW_LIMIT = 24;
     let lastDriftTimestamp = null;
+    let lastDependencySpinTimestamp = null;
     let doubleClickTarget = null;
+    let restoreTapDoubleClickDeadline = 0;
     let searchIndex = null;
     let searchTimer = 0;
     let searchMatches = [];
@@ -81,7 +73,9 @@
       "centerXPercent": 49,
       "centerYPercent": 67,
       "starBrightnessPercent": 75,
-      "pointGlowPercent": 35,
+      "pointGlowPercent": 0,
+      "hazeMilkRadius": 12,
+      "hazeMilkGainPercent": 12,
       "backgroundGlowPercent": 200,
       "textScalePercent": 80,
       "layoutReferenceWidth": 720,
@@ -90,6 +84,22 @@
       "mastheadTop": 40,
       "mastheadWidth": 632
     });
+    // Self-gravitating systems have a characteristic angular frequency
+    // proportional to sqrt(mass / radius^3). The host's tidal gradient adds a
+    // weaker distance^-3/2 frequency term. Declaration count is the local mass
+    // proxy; the result is compressed to whole turns per Showcase loop so Clip
+    // keeps its exact seam. Direction and the package-local orbital plane are
+    // independent seeded enrichment. Uniform cos(inclination) samples plane
+    // normals isotropically instead of inheriting Core's disc plane.
+    const DEPENDENCY_SPIN_RECIPE = Object.freeze({
+      selfGravityScale: .25,
+      tidalScale: .35,
+      minimumTurnsPerLoop: 1,
+      maximumTurnsPerLoop: 2,
+      directionChannel: 104,
+      inclinationChannel: 105,
+      azimuthChannel: 106,
+    });
     const SHOWCASE_WIDESCREEN_LAYOUT_PRESET = Object.freeze({
       "minimumFittedWidth": 1600,
       "minimumAspectRatio": 1.6,
@@ -126,6 +136,46 @@
       "safeInsetBottom": 90,
       "labelWidth": 440
     });
+    const TRAVEL_PRESET = Object.freeze({
+      "flightDurationMs": 2200,
+      "initialDelayMin": 0.2,
+      "initialDelayRange": 0.5,
+      "intervalMin": 0.55,
+      "intervalRange": 0.75,
+      "handoffGapMinMs": 24,
+      "handoffGapRangeMs": 126,
+      "loopQuietMs": 80,
+      "tailFraction": 0.7,
+      "progressEase": 0.055,
+      "fadeInFraction": 0.12,
+      "fadeOutStart": 0.82,
+      "minimumVisibility": 0.04,
+      "minimumRouteLengthPx": 48,
+      "admissionInsetPx": 16,
+      "admissionCandidateLimit": 12,
+      "arcHeightPercent": 24,
+      "arcHeightMin": 16,
+      "arcHeightMax": 120,
+      "tailSegments": 12,
+      "tailLengthPx": 145.6,
+      "lineWidth": 1.91,
+      "tailAlpha": 0.38,
+      "tailHeadOverlap": 0.82,
+      "headLengthPx": 6.5,
+      "headWidthPx": 1.82,
+      "headAlpha": 0.64,
+      "headGlowAlpha": 0.12,
+      "headGlowBlur": 2.95,
+      "initialDelayChannel": 13,
+      "intervalChannel": 29,
+      "handoffGapChannel": 43,
+      "candidateChannel": 59,
+      "arcDirectionChannel": 71
+    });
+    function travelFlightLimitForPointCount(pointCount) {
+      if (pointCount < 500) return 1;
+      return 2;
+    }
     const TOP_DOWN_PITCH = Math.PI / 2;
     const CONTEXT_TARGET_X = .32;
     const CONTEXT_CORE_X = .68;
@@ -144,6 +194,8 @@
     const glslVec3 = rgb => `vec3(${rgb.map(channel => channel.toFixed(1)).join(", ")})`;
     const colourStyles = Object.fromEntries(Object.entries(colours).map(([category, rgb]) => [category, `rgb(${rgb.join(",")})`]));
     const projectionScratch = [0, 0, 0];
+    const scenePointPositionScratch = [0, 0, 0];
+    const dependencySpinScratch = [0, 0, 0];
     let zoomReadout = null;
     let zoomReadoutText = "";
     const showcaseAnnotationData = showcaseDetails && Array.isArray(model.annotations)
@@ -164,31 +216,44 @@
     };
     const unit = (seed, channel) => hash(seed, channel) / 4294967296;
     const normal = (seed, channel) => Math.sqrt(-2 * Math.log(Math.max(unit(seed, channel), 1e-7))) * Math.cos(6.283185 * unit(seed, channel + 1));
+    // Spitzer isothermal-sheet vertical draw: a sech^2(z / 2z0) disc profile
+    // via its logistic inverse CDF, scaled to Gaussian-sigma-equivalent units.
+    const sheet = (seed, channel) => {
+      const share = Math.min(.996, Math.max(.004, unit(seed, channel)));
+      return .551 * Math.log(share / (1 - share));
+    };
     const clamp = (value, low, high) => Math.max(low, Math.min(high, value));
+    function decodeConstantReferenceLinks(rows) {
+      if (!Array.isArray(rows)) return [];
+      const seen = new Set();
+      const endpointCount = model.namespaces.length + model.dependencyStars.length;
+      return rows.slice(0, 1_024).reduce((links, row) => {
+        if (!Array.isArray(row) || row.length !== 2 || !row.every(Number.isInteger)) return links;
+        const [referringIndex, referencedIndex] = row;
+        if (referringIndex < 0 || referringIndex >= model.namespaces.length) return links;
+        if (referencedIndex < 0 || referencedIndex >= endpointCount) return links;
+        if (referringIndex === referencedIndex) return links;
+        const key = `${referringIndex}:${referencedIndex}`;
+        if (seen.has(key)) return links;
+        seen.add(key);
+        links.push(Object.freeze({
+          departureIndex: referencedIndex,
+          arrivalIndex: referringIndex,
+        }));
+        return links;
+      }, []);
+    }
     function fallbackMorphology(phaseSeed = 0) {
       const normalizedSeed = Number.isInteger(phaseSeed) && phaseSeed >= 0 && phaseSeed <= 0xffff_ffff ? phaseSeed >>> 0 : 0;
-      if (normalizedSeed === 0) return LEGACY_MORPHOLOGY;
-      return Object.freeze({
-        ...LEGACY_MORPHOLOGY,
-        phaseSeed: normalizedSeed,
-        phase: unit(normalizedSeed, 80) * Math.PI * 2,
-      });
+      return decodeMorphology([...FALLBACK_MORPHOLOGY_ROW.slice(0, 9), normalizedSeed]);
     }
-    function decodeMorphology(raw, fallbackPhaseSeed = 0) {
-      const row = Array.isArray(raw)
-        ? raw
-        : raw && typeof raw === "object" && Array.isArray(raw.knobs)
-          ? [raw.family, ...raw.knobs]
-          : null;
-      if (!row || row.length !== 10 || !row.every(Number.isInteger)) return fallbackMorphology(fallbackPhaseSeed);
+    function decodeMorphology(row, fallbackPhaseSeed = 0) {
+      if (!Array.isArray(row) || row.length !== 10 || !row.every(Number.isInteger)) return fallbackMorphology(fallbackPhaseSeed);
       const family = row[0];
       if (family < MORPHOLOGY_FAMILY.elliptical || family > MORPHOLOGY_FAMILY.irregular) return fallbackMorphology(fallbackPhaseSeed);
       if (row[9] < 0 || row[9] > 0xffff_ffff) return fallbackMorphology(fallbackPhaseSeed);
-      const legacy = family === MORPHOLOGY_FAMILY.spiral &&
-        row.slice(1).every((value, index) => value === [0, 240, 3, 105, 380, 0, 0, 0, 0][index]);
       const phaseSeed = row[9] >>> 0;
       return Object.freeze({
-        legacy,
         family,
         ellipticity: family === MORPHOLOGY_FAMILY.elliptical ? clamp(row[1], 0, 700) / 1000 : 0,
         bulgeShare: [MORPHOLOGY_FAMILY.lenticular, MORPHOLOGY_FAMILY.spiral, MORPHOLOGY_FAMILY.barredSpiral].includes(family)
@@ -199,7 +264,7 @@
           : family === MORPHOLOGY_FAMILY.barredSpiral ? clamp(row[3], 2, 4) : 0,
         winding: [MORPHOLOGY_FAMILY.spiral, MORPHOLOGY_FAMILY.barredSpiral].includes(family) ? clamp(row[4], 40, 220) / 1000 : 0,
         armFraction: [MORPHOLOGY_FAMILY.spiral, MORPHOLOGY_FAMILY.barredSpiral].includes(family) ? clamp(row[5], 0, 800) / 1000 : 0,
-        barLength: family === MORPHOLOGY_FAMILY.barredSpiral ? clamp(row[6], 100, 700) / 1000 : 0,
+        barLength: family === MORPHOLOGY_FAMILY.barredSpiral ? clamp(row[6], 100, 800) / 1000 : 0,
         clumpCount: family === MORPHOLOGY_FAMILY.irregular ? clamp(row[7], 2, 5) : 0,
         clumpSpread: family === MORPHOLOGY_FAMILY.irregular ? clamp(row[8], 250, 1000) / 1000 : 0,
         phaseSeed,
@@ -234,19 +299,19 @@
       const cameraScale = Math.pow(tests, .8);
       let coreExtent = 42;
       let testExtent = 62;
-      if (!activeMorphology.legacy) {
-        if (activeMorphology.family === MORPHOLOGY_FAMILY.elliptical) {
-          coreExtent = 36;
-          testExtent = 52;
-        } else if (activeMorphology.family === MORPHOLOGY_FAMILY.lenticular) {
-          const discProgress = clamp((.42 - activeMorphology.bulgeShare) / .08, 0, 1);
-          coreExtent = 42 + 2 * discProgress;
-          testExtent = 54 + 4 * discProgress;
-        } else if (activeMorphology.family === MORPHOLOGY_FAMILY.irregular) {
-          const centerSpread = 12 + 18 * activeMorphology.clumpSpread;
-          coreExtent = centerSpread + 24;
-          testExtent = centerSpread + 32;
-        }
+      if (activeMorphology.family === MORPHOLOGY_FAMILY.elliptical) {
+        coreExtent = 36;
+        testExtent = 52;
+      } else if (activeMorphology.family === MORPHOLOGY_FAMILY.lenticular) {
+        const discProgress = clamp((.42 - activeMorphology.bulgeShare) / .08, 0, 1);
+        coreExtent = 42 + 2 * discProgress;
+        testExtent = 54 + 4 * discProgress;
+      } else if (activeMorphology.family === MORPHOLOGY_FAMILY.barredSpiral) {
+        testExtent = Math.max(17, activeMorphology.barLength * 48) + 45;
+      } else if (activeMorphology.family === MORPHOLOGY_FAMILY.irregular) {
+        const centerSpread = 12 + 18 * activeMorphology.clumpSpread;
+        coreExtent = centerSpread + 24;
+        testExtent = centerSpread + 32;
       }
       return Object.freeze({
         disk,
@@ -261,12 +326,61 @@
       });
     }
 
-    const coreCount = model.namespaces.reduce((count, row) => count + (row[3] === 1 ? 0 : 1), 0);
+    const coreCount = model.namespaces.reduce((count, row) => count + (row[2] === 1 ? 0 : 1), 0);
     const layoutScale = layoutMetricsForCoreCount(coreCount, morphology);
     const cameraDistance = layoutScale.cameraDistance;
     const cameraFocalLength = layoutScale.cameraFocalLength;
+    const barRadius = morphology.barLength * 48;
+    // Arm recipe shared by the project galaxy and dependency clouds. Seeded
+    // jitters draw from a galaxy's phase seed on the channels below, so each
+    // galaxy varies while every one of its stars agrees.
+    const ARM_RECIPE = Object.freeze({
+      // The winding knob maps linearly to tan(pitch), floored near 7 degrees
+      // and reaching about 24 degrees for the loosest arms.
+      tanPitchFloor: .12,
+      tanPitchIntercept: .43,
+      tanPitchSlope: 1.5,
+      // Per-bar-end pitch (x0.82-1.18) and trailing-side-only takeoff
+      // (0-0.12 rad) jitters keep the arm pair from mirroring.
+      pitchJitterFloor: .82,
+      pitchJitterSpan: .36,
+      pitchChannel: 60,
+      takeoffJitter: .12,
+      takeoffChannel: 66,
+      // Third and fourth arms ride a main arm, then fork off at 1.3-1.8x the
+      // bar radius and open with a 1.4-1.9x looser pitch.
+      forkRadialFloor: 1.3,
+      forkRadialSpan: .5,
+      forkRadialChannel: 72,
+      forkPitchFloor: 1.4,
+      forkPitchSpan: .5,
+      forkPitchChannel: 84,
+      // Roughly a third of barred galaxies are ringed SB(r) systems; rings
+      // take 15% of arm members, hug the bar tips at 1.05-1.15x their
+      // radius, and sit 15% squashed across the bar.
+      ringGalaxyShare: .3,
+      ringGalaxyChannel: 88,
+      ringMemberShare: .15,
+      ringRadialFloor: 1.05,
+      ringRadialSpan: .1,
+      ringSquash: .15,
+      // 22% of arm members feather into a 2.6x wider sheath, and arm width
+      // grows with radius from a .55 base, so arms read as overdensities
+      // rather than rails.
+      featherShare: .22,
+      featherWidth: 2.6,
+      widthFloor: .55,
+      // Unbarred arms sweep from the log-spiral origin radius but admit
+      // members only beyond the minimum, where the spiral has visibly curved
+      // away from its takeoff angle; closer in, members share that angle and
+      // would draw a cross of straight spokes through the core.
+      unbarredOriginRadial: 6,
+      unbarredMinimumRadial: 8,
+    });
+    const barredRing = morphology.family === MORPHOLOGY_FAMILY.barredSpiral &&
+      unit(morphology.phaseSeed, ARM_RECIPE.ringGalaxyChannel) < ARM_RECIPE.ringGalaxyShare;
 
-    const irregularClumpCenters = morphology.family === MORPHOLOGY_FAMILY.irregular && !morphology.legacy
+    const irregularClumpCenters = morphology.family === MORPHOLOGY_FAMILY.irregular
       ? Array.from({ length: morphology.clumpCount }, (_, index) => {
           const centerSpread = 12 + 18 * morphology.clumpSpread;
           const angle = morphology.phase + index * Math.PI * 2 / morphology.clumpCount + (unit(morphology.phaseSeed, 90 + index * 3) - .5) * .8;
@@ -295,22 +409,76 @@
       ];
     }
 
-    function spiralArmTheta(seed, radial, channel) {
+    const armTanPitch = winding =>
+      Math.max(ARM_RECIPE.tanPitchFloor, ARM_RECIPE.tanPitchIntercept - ARM_RECIPE.tanPitchSlope * winding);
+
+    // Constant-pitch logarithmic arm angle shared by the project galaxy and
+    // dependency clouds: exactly one arm trails each bar end (takeoff jitter
+    // stays on the trailing side), each end draws its own seeded pitch so the
+    // pair is not a mirror image, and third and fourth arms are downstream
+    // bifurcations that ride a main arm before forking outward with a looser
+    // pitch, as in real multi-armed barred galaxies.
+    function barredArmTheta(phaseSeed, phase, winding, arm, armRadial, tipRadial) {
+      const barEnd = arm % 2;
+      const branch = Math.floor(arm / 2);
+      const tanPitch = armTanPitch(winding) *
+        (ARM_RECIPE.pitchJitterFloor + ARM_RECIPE.pitchJitterSpan * unit(phaseSeed, ARM_RECIPE.pitchChannel + barEnd));
+      const origin = phase + barEnd * Math.PI + unit(phaseSeed, ARM_RECIPE.takeoffChannel + barEnd) * ARM_RECIPE.takeoffJitter;
+      let sweep = Math.log(armRadial / tipRadial) / tanPitch;
+      if (branch > 0) {
+        const forkRadial = tipRadial *
+          (ARM_RECIPE.forkRadialFloor + ARM_RECIPE.forkRadialSpan * unit(phaseSeed, ARM_RECIPE.forkRadialChannel + arm));
+        if (armRadial > forkRadial) {
+          sweep = Math.log(forkRadial / tipRadial) / tanPitch +
+            Math.log(armRadial / forkRadial) / (tanPitch *
+              (ARM_RECIPE.forkPitchFloor + ARM_RECIPE.forkPitchSpan * unit(phaseSeed, ARM_RECIPE.forkPitchChannel + arm)));
+        }
+      }
+      return origin + sweep;
+    }
+
+    // SB(r) variant: an inner ring hugging the bar ends, slightly elongated
+    // along the bar. Shared by the project galaxy and dependency clouds.
+    function barredRingPlacement(phase, tipRadial, radialUnit, thetaUnit) {
+      const ringTheta = thetaUnit * Math.PI * 2;
+      const across = Math.sin(ringTheta);
+      return [
+        phase + ringTheta,
+        tipRadial * (ARM_RECIPE.ringRadialFloor + ARM_RECIPE.ringRadialSpan * radialUnit) * (1 - ARM_RECIPE.ringSquash * across * across),
+      ];
+    }
+
+    // The arm's center angle at a radius — the one arm-angle law shared by
+    // star placement and the dust lanes that hug those arms.
+    function armCenterTheta(arm, radial) {
+      if (morphology.family === MORPHOLOGY_FAMILY.barredSpiral) {
+        return barredArmTheta(morphology.phaseSeed, morphology.phase, morphology.winding, arm, radial, barRadius);
+      }
+      const origin = ARM_RECIPE.unbarredOriginRadial;
+      return morphology.phase + arm * Math.PI * 2 / morphology.armCount +
+        Math.log(Math.max(radial, origin) / origin) / armTanPitch(morphology.winding);
+    }
+
+    // Answers both the arm angle and the point's (possibly adjusted) radius:
+    // barred-spiral arms unwind from the bar tips, so arm members that fall
+    // inside the bar are respread outward along the arm, densest at the tip.
+    function spiralArmPlacement(seed, radial, channel) {
       const arm = Math.floor(unit(seed, channel) * morphology.armCount);
       const scatter = .22 - (morphology.armCount - 2) * .025;
-      let origin;
-      let armRadial = radial;
       if (morphology.family === MORPHOLOGY_FAMILY.barredSpiral) {
-        const barEnd = arm % 2;
-        const branch = Math.floor(arm / 2);
-        const branchesAtEnd = Math.ceil((morphology.armCount - barEnd) / 2);
-        const branchOffset = (branch - (branchesAtEnd - 1) / 2) * Math.PI / Math.max(3, morphology.armCount);
-        origin = morphology.phase + barEnd * Math.PI + branchOffset;
-        armRadial = Math.max(0, radial - (12 + morphology.barLength * 24) * .55);
-      } else {
-        origin = morphology.phase + arm * Math.PI * 2 / morphology.armCount;
+        const armRadial = radial < barRadius
+          ? barRadius + radial / barRadius * (40 - barRadius)
+          : radial;
+        if (barredRing && unit(seed, channel + 5) < ARM_RECIPE.ringMemberShare) {
+          return barredRingPlacement(morphology.phase, barRadius, unit(seed, channel + 6), unit(seed, channel + 7));
+        }
+        const theta = armCenterTheta(arm, armRadial);
+        const feather = unit(seed, channel + 2) < ARM_RECIPE.featherShare ? ARM_RECIPE.featherWidth : 1;
+        const width = scatter * (ARM_RECIPE.widthFloor + armRadial / 64) * Math.min(1, 36 / armRadial) * feather;
+        return [theta + normal(seed, channel + 3) * width, armRadial];
       }
-      return origin + armRadial * morphology.winding + normal(seed, channel + 1) * scatter;
+      const theta = armCenterTheta(arm, radial) + normal(seed, channel + 1) * scatter;
+      return [theta, radial];
     }
 
     function irregularPosition(seed, outer) {
@@ -330,9 +498,21 @@
     }
 
     function barredCorePosition(seed, vertical, scale) {
-      const halfLength = 12 + morphology.barLength * 24;
-      const along = (unit(seed, 34) * 2 - 1) * halfLength;
-      const across = normal(seed, 35) * (1 + Math.abs(along) * .025);
+      let along;
+      let acrossSigma;
+      if (morphology.barLength > .45 && unit(seed, 37) < .1) {
+        // Long early-type bars carry ansae: bright knots near the bar ends.
+        along = (unit(seed, 38) < .5 ? 1 : -1) * barRadius * .9 + normal(seed, 39) * barRadius * .08;
+        acrossSigma = barRadius * .08;
+      } else {
+        const draw = unit(seed, 34) * 2 - 1;
+        // Flat density along early-type bars, exponential-like falloff for
+        // short late-type bars; lens envelope tapering into the tips.
+        along = (morphology.barLength < .36 ? Math.sign(draw) * Math.pow(Math.abs(draw), 1.5) : draw) * barRadius;
+        const taper = Math.sqrt(Math.max(.15, 1 - (along / barRadius) * (along / barRadius)));
+        acrossSigma = barRadius * .16 * taper;
+      }
+      const across = normal(seed, 35) * acrossSigma;
       const cos = Math.cos(morphology.phase), sin = Math.sin(morphology.phase);
       return [
         (cos * along - sin * across) * scale,
@@ -341,61 +521,49 @@
       ];
     }
 
-    function coreDiscUsesArm(seed, bulge) {
+    function coreDiscUsesArm(seed, bulge, radial) {
       return !bulge &&
         spiralMorphology &&
+        (morphology.family === MORPHOLOGY_FAMILY.barredSpiral || radial > ARM_RECIPE.unbarredMinimumRadial) &&
         unit(seed, 30) < morphology.armFraction;
     }
 
     function corePosition(seed) {
-      if (morphology.legacy) {
-        const bulge = unit(seed, 2) < .24;
-        const radial = bulge ? 17 * Math.pow(unit(seed, 3), 1.75) : Math.min(42, -10 * Math.log(Math.max(1e-5, 1 - unit(seed, 3))));
-        const theta = unit(seed, 4) * Math.PI * 2 + radial * .04;
-        const vertical = normal(seed, 5) * (bulge ? 5.8 : 1.4 + radial * .025);
-        const scale = bulge ? layoutScale.bulge : layoutScale.disk;
-        return [Math.cos(theta) * radial * scale, vertical * scale, Math.sin(theta) * radial * scale];
-      }
       if (morphology.family === MORPHOLOGY_FAMILY.elliptical) return spheroidPosition(seed, false);
       if (morphology.family === MORPHOLOGY_FAMILY.irregular) return irregularPosition(seed, false);
 
       const bulge = unit(seed, 2) < morphology.bulgeShare;
       const discLimit = morphology.family === MORPHOLOGY_FAMILY.lenticular ? layoutScale.coreOuterRadius / layoutScale.disk : 42;
       const radial = bulge ? 17 * Math.pow(unit(seed, 3), 1.75) : Math.min(discLimit, -10 * Math.log(Math.max(1e-5, 1 - unit(seed, 3))));
-      const vertical = normal(seed, 5) * (bulge ? 5.8 : 1.4 + radial * .025);
       const scale = bulge ? layoutScale.bulge : layoutScale.disk;
-      if (!bulge && morphology.family === MORPHOLOGY_FAMILY.barredSpiral && radial < 12 + morphology.barLength * 24 && unit(seed, 33) < .72) {
-        return barredCorePosition(seed, vertical, scale);
+      if (!bulge && morphology.family === MORPHOLOGY_FAMILY.barredSpiral && unit(seed, 33) < .32) {
+        return barredCorePosition(seed, sheet(seed, 5) * 1.6, scale);
       }
-      const inArm = coreDiscUsesArm(seed, bulge);
-      const theta = inArm
-        ? spiralArmTheta(seed, radial, 31)
-        : morphology.phase + unit(seed, 4) * Math.PI * 2 + radial * .04;
+      if (coreDiscUsesArm(seed, bulge, radial)) {
+        const [theta, armRadial] = spiralArmPlacement(seed, radial, 43);
+        return [Math.cos(theta) * armRadial * scale, sheet(seed, 5) * (1.4 + armRadial * .025) * scale, Math.sin(theta) * armRadial * scale];
+      }
+      const vertical = bulge ? normal(seed, 5) * 5.8 : sheet(seed, 5) * (1.4 + radial * .025);
+      const theta = morphology.phase + unit(seed, 4) * Math.PI * 2 + radial * .04;
       return [Math.cos(theta) * radial * scale, vertical * scale, Math.sin(theta) * radial * scale];
     }
 
     function testPosition(seed) {
-      if (morphology.legacy) {
-        const radial = 17 + Math.min(45, -14 * Math.log(Math.max(1e-5, 1 - unit(seed, 7))));
-        const arm = Math.floor(unit(seed, 8) * 3);
-        const inArm = unit(seed, 9) < .38;
-        const theta = inArm
-          ? arm * (Math.PI * 2 / 3) + radial * .105 + normal(seed, 10) * .22
-          : unit(seed, 10) * Math.PI * 2;
-        const vertical = normal(seed, 11) * (1.4 + radial * .035);
-        return [Math.cos(theta) * radial * layoutScale.tests, vertical * layoutScale.tests, Math.sin(theta) * radial * layoutScale.tests];
-      }
       if (morphology.family === MORPHOLOGY_FAMILY.elliptical) return spheroidPosition(seed, true);
       if (morphology.family === MORPHOLOGY_FAMILY.irregular) return irregularPosition(seed, true);
 
+      const discFloor = morphology.family === MORPHOLOGY_FAMILY.barredSpiral
+        ? Math.max(17, barRadius) - 5 * unit(seed, 28)
+        : 17;
       const radial = morphology.family === MORPHOLOGY_FAMILY.lenticular
         ? 16 + Math.min(layoutScale.testOuterRadius / layoutScale.tests - 16, -13 * Math.log(Math.max(1e-5, 1 - unit(seed, 7))))
-        : 17 + Math.min(45, -14 * Math.log(Math.max(1e-5, 1 - unit(seed, 7))));
-      const inArm = spiralMorphology && unit(seed, 9) < morphology.armFraction;
-      const theta = inArm
-        ? spiralArmTheta(seed, radial, 8)
-        : morphology.phase + unit(seed, 10) * Math.PI * 2;
-      const vertical = normal(seed, 11) * (1.4 + radial * .035);
+        : discFloor + Math.min(45, -14 * Math.log(Math.max(1e-5, 1 - unit(seed, 7))));
+      if (spiralMorphology && unit(seed, 9) < morphology.armFraction) {
+        const [theta, armRadial] = spiralArmPlacement(seed, radial, 13);
+        return [Math.cos(theta) * armRadial * layoutScale.tests, sheet(seed, 11) * (1.4 + armRadial * .035) * layoutScale.tests, Math.sin(theta) * armRadial * layoutScale.tests];
+      }
+      const theta = morphology.phase + unit(seed, 10) * Math.PI * 2;
+      const vertical = sheet(seed, 11) * (1.4 + radial * .035);
       return [Math.cos(theta) * radial * layoutScale.tests, vertical * layoutScale.tests, Math.sin(theta) * radial * layoutScale.tests];
     }
 
@@ -425,7 +593,7 @@
       const declarationCount = Math.max(0, Number(packageRow[3]) || 0);
       return Object.freeze({
         ...decodeMorphology(raw, phaseSeed),
-        compact: declarationCount < DEPENDENCY_CLOUD_THREASHOLD,
+        compact: declarationCount < DEPENDENCY_CLOUD_THRESHOLD,
       });
     }
 
@@ -465,14 +633,22 @@
         );
       }
 
+      const barred = cloud.family === MORPHOLOGY_FAMILY.barredSpiral;
       const bulge = unit(seed, 18) < cloud.bulgeShare;
+      const radialUnit = unit(seed, 19);
+      const inArm = unit(seed, 22) < cloud.armFraction;
+      const spiralArmTail = cloud.family === MORPHOLOGY_FAMILY.spiral && !bulge && inArm
+        ? .12 * Math.max(0, -Math.log((1 - radialUnit) / .15))
+        : 0;
       const radial = bulge
-        ? radius * .36 * Math.pow(unit(seed, 19), 1.55)
-        : radius * (.2 + .72 * Math.sqrt(unit(seed, 19)));
-      const vertical = clamp(normal(seed, 20), -2.2, 2.2) * radius * (bulge ? .13 : .055);
-      if (cloud.family === MORPHOLOGY_FAMILY.barredSpiral && !bulge && radial < radius * cloud.barLength && unit(seed, 21) < .74) {
-        const along = (unit(seed, 22) * 2 - 1) * radius * cloud.barLength;
-        const across = clamp(normal(seed, 23), -2.2, 2.2) * radius * .055;
+        ? radius * .36 * Math.pow(radialUnit, 1.55)
+        : radius * (.2 + .72 * Math.sqrt(radialUnit) + spiralArmTail);
+      const vertical = clamp(bulge ? normal(seed, 26) : sheet(seed, 26), -2.2, 2.2) * radius * (bulge ? .13 : .055);
+      if (barred && !bulge && unit(seed, 21) < .34) {
+        const halfLength = radius * cloud.barLength;
+        const along = (unit(seed, 22) * 2 - 1) * halfLength;
+        const taper = Math.sqrt(Math.max(.15, 1 - (along / halfLength) * (along / halfLength)));
+        const across = clamp(normal(seed, 23), -2.2, 2.2) * halfLength * .16 * taper;
         return boundedDependencyOffset(
           Math.cos(cloud.phase) * along - Math.sin(cloud.phase) * across,
           vertical,
@@ -482,20 +658,35 @@
       }
 
       const armCount = Math.max(2, cloud.armCount);
-      const arm = Math.floor(unit(seed, 21) * armCount);
-      const armOrigin = cloud.family === MORPHOLOGY_FAMILY.barredSpiral ? arm % 2 * Math.PI : arm * Math.PI * 2 / armCount;
-      const inArm = unit(seed, 22) < cloud.armFraction;
-      const radialShare = radial / radius;
-      const theta = inArm
-        ? cloud.phase + armOrigin + radialShare * cloud.winding * 42 + normal(seed, 23) * .17
+      const arm = Math.floor(unit(seed, 25) * armCount);
+      if (barred && !bulge && inArm) {
+        const tipRadial = radius * cloud.barLength;
+        const rootShare = (radial / radius - .2) / Math.max(.05, cloud.barLength - .2);
+        const armRadial = radial < tipRadial
+          ? tipRadial + rootShare * rootShare * (radius * .92 - tipRadial) * .5
+          : radial;
+        if (unit(cloud.phaseSeed, ARM_RECIPE.ringGalaxyChannel) < ARM_RECIPE.ringGalaxyShare && unit(seed, 29) < ARM_RECIPE.ringMemberShare) {
+          const [ringTheta, ringRadial] = barredRingPlacement(cloud.phase, tipRadial, unit(seed, 30), unit(seed, 31));
+          return boundedDependencyOffset(Math.cos(ringTheta) * ringRadial, vertical, Math.sin(ringTheta) * ringRadial, radius);
+        }
+        const feather = unit(seed, 28) < ARM_RECIPE.featherShare ? ARM_RECIPE.featherWidth : 1;
+        const width = .16 * (ARM_RECIPE.widthFloor + armRadial / (radius * .92)) * Math.min(1, radius * .52 / armRadial) * feather;
+        const theta = barredArmTheta(cloud.phaseSeed, cloud.phase, cloud.winding, arm, armRadial, tipRadial) + normal(seed, 23) * width;
+        return boundedDependencyOffset(Math.cos(theta) * armRadial, vertical, Math.sin(theta) * armRadial, radius);
+      }
+      const theta = inArm && !barred && !bulge
+        ? cloud.phase + arm * Math.PI * 2 / armCount +
+          Math.log(Math.max(radial, radius * .2) / (radius * .2)) / armTanPitch(cloud.winding) + normal(seed, 23) * .17
         : cloud.phase + unit(seed, 23) * Math.PI * 2;
-      return boundedDependencyOffset(Math.cos(theta) * radial, vertical, Math.sin(theta) * radial, radius);
+      const x = Math.cos(theta) * radial;
+      const z = Math.sin(theta) * radial;
+      return spiralArmTail > 0 ? [x, vertical, z] : boundedDependencyOffset(x, vertical, z, radius);
     }
     const dependencyAnchor = (seed, declarationCount) => {
       const radius = layoutScale.dependencyInnerRadius + 72 * Math.sqrt(layoutScale.tests) * Math.pow(unit(seed, 14), .72);
       const theta = unit(seed, 15) * Math.PI * 2;
       const vertical = normal(seed, 16) * 24 * Math.sqrt(layoutScale.tests);
-      return [Math.cos(theta) * radius, vertical, Math.sin(theta) * radius, 1.6 + Math.min(9, Math.sqrt(declarationCount) * .055)];
+      return [Math.cos(theta) * radius, vertical, Math.sin(theta) * radius, 1.6 + Math.sqrt(declarationCount) * .055];
     };
     const systemAnchors = dependencySystems.map((row, index) => {
       const anchor = dependencyAnchor(row[0], systemAggregates[index]?.declarationCount || 0);
@@ -505,7 +696,7 @@
     });
     const packageAnchors = model.packages.map((row, index) => {
       const systemIndex = Number(row[8]);
-      const cloudRadius = 1.6 + Math.min(9, Math.sqrt(row[3]) * .055);
+      const cloudRadius = 1.6 + Math.sqrt(row[3]) * .055;
       if (!Number.isInteger(systemIndex) || systemIndex < 0 || !systemAnchors[systemIndex]) {
         return [...dependencyAnchor(row[0], row[3]), index, -1];
       }
@@ -526,14 +717,124 @@
         systemIndex,
       ];
     });
+    for (const anchors of [systemAnchors, packageAnchors]) {
+      for (const anchor of anchors) {
+        anchor[0] *= DEPENDENCY_HALO_SPACING_SCALE;
+        anchor[1] *= DEPENDENCY_HALO_SPACING_SCALE;
+        anchor[2] *= DEPENDENCY_HALO_SPACING_SCALE;
+      }
+    }
+
+    const IDENTITY_DEPENDENCY_ORIENTATION = Object.freeze([0, 1, 0, 1, 0, 0, 0, 0, 1]);
+    function dependencyOrientation(seed) {
+      const normalY = unit(seed, DEPENDENCY_SPIN_RECIPE.inclinationChannel);
+      const horizontal = Math.sqrt(Math.max(0, 1 - normalY * normalY));
+      const azimuth = unit(seed, DEPENDENCY_SPIN_RECIPE.azimuthChannel) * Math.PI * 2;
+      const cosine = Math.cos(azimuth);
+      const sine = Math.sin(azimuth);
+      return Object.freeze([
+        horizontal * cosine, normalY, horizontal * sine,
+        normalY * cosine, -horizontal, normalY * sine,
+        -sine, 0, cosine,
+      ]);
+    }
+    const packageOrientations = model.packages.map(row => dependencyOrientation(row[0]));
+
+    function orientDependencyOffset(offset, orientation, out = [0, 0, 0]) {
+      out[0] = offset[0] * orientation[3] + offset[1] * orientation[0] + offset[2] * orientation[6];
+      out[1] = offset[0] * orientation[4] + offset[1] * orientation[1] + offset[2] * orientation[7];
+      out[2] = offset[0] * orientation[5] + offset[1] * orientation[2] + offset[2] * orientation[8];
+      return out;
+    }
+
+    function dependencySpinTurns(packageRow, anchor) {
+      const declarationCount = Math.max(1, Number(packageRow?.[3]) || 0);
+      const cloudRadius = Math.max(1e-6, Number(anchor?.[3]) || 0);
+      const coreDistance = Math.max(1e-6, Math.hypot(anchor?.[0] || 0, anchor?.[1] || 0, anchor?.[2] || 0)) /
+        DEPENDENCY_HALO_SPACING_SCALE;
+      const selfGravityFrequency = Math.sqrt(declarationCount / cloudRadius ** 3);
+      const tidalFrequency = (layoutScale.dependencyInnerRadius / coreDistance) ** 1.5;
+      const characteristicFrequency = selfGravityFrequency * DEPENDENCY_SPIN_RECIPE.selfGravityScale +
+        tidalFrequency * DEPENDENCY_SPIN_RECIPE.tidalScale;
+      return clamp(
+        Math.round(characteristicFrequency),
+        DEPENDENCY_SPIN_RECIPE.minimumTurnsPerLoop,
+        DEPENDENCY_SPIN_RECIPE.maximumTurnsPerLoop,
+      );
+    }
+
+    const packageSpinRates = model.packages.map((row, index) => {
+      const direction = unit(row[0], DEPENDENCY_SPIN_RECIPE.directionChannel) < .5 ? -1 : 1;
+      const turns = dependencySpinTurns(row, packageAnchors[index]);
+      return direction * turns * Math.PI * 2 / (SHOWCASE_PRESET.durationMs / 1000);
+    });
+
+    function dependencySpunPosition(positionX, positionY, positionZ, packageIndex, elapsed, out = [0, 0, 0]) {
+      const anchor = packageAnchors[packageIndex];
+      const orientation = packageOrientations[packageIndex];
+      const rate = packageSpinRates[packageIndex];
+      if (!anchor || !orientation || !Number.isFinite(rate)) {
+        out[0] = positionX;
+        out[1] = positionY;
+        out[2] = positionZ;
+        return out;
+      }
+      const loopElapsed = ((Number(elapsed) % SHOWCASE_PRESET.durationMs) + SHOWCASE_PRESET.durationMs) % SHOWCASE_PRESET.durationMs;
+      const angle = rate * loopElapsed / 1000;
+      const cosine = Math.cos(angle);
+      const sine = Math.sin(angle);
+      const offsetX = positionX - anchor[0];
+      const offsetY = positionY - anchor[1];
+      const offsetZ = positionZ - anchor[2];
+      const axisX = orientation[0];
+      const axisY = orientation[1];
+      const axisZ = orientation[2];
+      const axial = axisX * offsetX + axisY * offsetY + axisZ * offsetZ;
+      const carry = 1 - cosine;
+      out[0] = anchor[0] + offsetX * cosine + (axisY * offsetZ - axisZ * offsetY) * sine + axisX * axial * carry;
+      out[1] = anchor[1] + offsetY * cosine + (axisZ * offsetX - axisX * offsetZ) * sine + axisY * axial * carry;
+      out[2] = anchor[2] + offsetZ * cosine + (axisX * offsetY - axisY * offsetX) * sine + axisZ * axial * carry;
+      return out;
+    }
+
+    function createDependencySpinTexture(gl) {
+      const maximumSize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
+      const texelCount = Math.max(1, model.packages.length * 2);
+      const width = Math.min(maximumSize, texelCount);
+      const height = Math.ceil(texelCount / width);
+      if (height > maximumSize) throw new Error("Dependency package count exceeds WebGL2 texture capacity");
+      const pixels = new Float32Array(width * height * 4);
+      packageAnchors.forEach((anchor, index) => {
+        const offset = index * 8;
+        const orientation = packageOrientations[index];
+        pixels[offset] = anchor[0];
+        pixels[offset + 1] = anchor[1];
+        pixels[offset + 2] = anchor[2];
+        pixels[offset + 3] = packageSpinRates[index];
+        pixels[offset + 4] = orientation[0];
+        pixels[offset + 5] = orientation[1];
+        pixels[offset + 6] = orientation[2];
+      });
+      const texture = gl.createTexture();
+      gl.bindTexture(gl.TEXTURE_2D, texture);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, pixels);
+      gl.bindTexture(gl.TEXTURE_2D, null);
+      return Object.freeze({ texture, width });
+    }
 
     function dependencyPosition(seed, packageIndex) {
       const anchor = packageAnchors[packageIndex] || [0, 0, 0, 2];
+      const orientation = packageOrientations[packageIndex] || IDENTITY_DEPENDENCY_ORIENTATION;
       const offset = dependencyCloudOffset(seed, packageMorphologies[packageIndex], anchor[3]);
+      const oriented = orientDependencyOffset(offset, orientation);
       return [
-        anchor[0] + offset[0],
-        anchor[1] + offset[1],
-        anchor[2] + offset[2],
+        anchor[0] + oriented[0],
+        anchor[1] + oriented[1],
+        anchor[2] + oriented[2],
       ];
     }
 
@@ -583,8 +884,8 @@
       };
       model.namespaces.forEach((row, index) => {
         const name = interactiveMode ? model.namespaceNames[index] : "";
-        const category = row[3] === 1 ? "tests" : "core";
-        const values = row.slice(4, 10);
+        const category = row[2] === 1 ? "tests" : "core";
+        const values = row.slice(3, 9);
         const position = category === "tests" ? testPosition(row[0]) : corePosition(row[0]);
         const sizeFactor = writeScenePoint(category, position, weightedSignal(normalizedSignals(values), category), category === "core" ? .82 : .68, false, -1, -1);
         const interactive = interactiveMode && !name.startsWith(RSPEC_PROXY_PREFIX);
@@ -592,7 +893,7 @@
         const anchored = showcaseDetails && (showcaseAnnotationAnchors.has(annotationKey) || showcasePinnedNamespaceAnchors.has(index));
         if (!interactive && !anchored) return;
         const point = interactiveMode
-          ? { category, position, name, kind: row[2] === 0 ? "Class" : "Module", rubyCounts: row.slice(10, 14), instanceVariableCount: row[14] || 0, values }
+          ? { category, position, name, kind: row[1] === 0 ? "Class" : "Module", rubyCounts: row.slice(9, 13), instanceVariableCount: row[13] || 0, values }
           : { category, position };
         if (anchored) showcasePointsByAnchor.set(annotationKey, point);
         addPoint(point, sizeFactor, interactive);
@@ -638,25 +939,242 @@
       return { sceneData, scenePointCount, interactivePoints, dependencyHubs, packageHubs, systemHubs };
     }
     const { sceneData, scenePointCount, interactivePoints, dependencyHubs, packageHubs, systemHubs } = buildPoints();
-    const totals = model.totals || {
-      namespaces: model.namespaces.length,
-      packages: model.packages.length,
-      dependencyStars: model.dependencyStars.length,
-      renderedDependencyStars: model.dependencyStars.length,
+    const travelFlightLimit = travelFlightLimitForPointCount(scenePointCount);
+    const constantReferenceLinks = decodeConstantReferenceLinks(model.constantReferenceLinks);
+    const travelScheduleSeed = hash((
+      morphology.phaseSeed ^ scenePointCount ^
+      Math.imul(constantReferenceLinks.length + 1, 0x9e3779b9)
+    ) >>> 0);
+    delete model.constantReferenceLinks;
+    function travelEndpointCategory(renderIndex) {
+      const categoryCode = sceneData[renderIndex * SCENE_POINT_STRIDE + 5];
+      if (categoryCode === categoryCodes.tests) return "tests";
+      if (categoryCode === categoryCodes.dependencies) return "dependencies";
+      return "core";
+    }
+    const dependencyTravelLinkIndices = [];
+    const workspaceTravelLinkIndices = [];
+    constantReferenceLinks.forEach((link, index) => {
+      const pool = travelEndpointCategory(link.departureIndex) === "dependencies"
+        ? dependencyTravelLinkIndices
+        : workspaceTravelLinkIndices;
+      pool.push(index);
+    });
+    const packageCount = model.packages.length;
+
+    // Unresolved-glow population. The milky texture of a real galaxy is not a
+    // halo around bright stars; it is millions of separate faint stars too
+    // small to resolve. Haze micro-stars are therefore drawn from the same
+    // deterministic position law as the data marks themselves — corePosition,
+    // testPosition, and dependencyPosition with fresh seeds — so the haze is
+    // literally more of the same stellar population, only fainter: arms stay
+    // crisp, the exponential radial falloff shows, and zooming in resolves the
+    // texture into faint individual stars instead of per-mark blur blobs.
+    // Haze rows live after the data rows in one interleaved buffer, encode
+    // their category as data category + HAZE_CATEGORY_OFFSET, and never enter
+    // interactive points, hit scans, search, or reported scene point counts.
+    const HAZE_CATEGORY_OFFSET = 3;
+    // Tuned constants and unit/normal channels for the haze population, named
+    // in one frozen recipe block per the renderer geometry practices. normal
+    // draws consume their channel and channel + 1.
+    const HAZE_RECIPE = Object.freeze({
+      pointBudget: 90_000,
+      starsPerMark: Object.freeze({ core: 24, tests: 18, dependencyStar: 2 }),
+      sizeChannel: 96,
+      faintChannel: 97,
+      ditherSeedChannel: 120,
+      ditherChannel: 121,
+      poolSeedChannel: 133,      // + category code: core 133, tests 134, dependencies 135
+      clumpCenterChannel: 137,   // + category code
+      clumpMemberChannel: 139,   // + category code; members draw normal channels 1/3/5
+      clumpSize: 14,
+      clumpShare: Object.freeze({ core: .2, tests: .3 }),
+      clumpSpread: Object.freeze({ core: 1.1, tests: 1.4 }),
+      faintFloor: .24,
+      faintSpan: .95,
+      sparkleThreshold: .96,
+      size: Object.freeze({ floor: .16, span: .14 }),
+      sparkleSize: Object.freeze({ floor: .3, span: .18 }),
+      maxSize: 1.2,
+    });
+    function buildHazePoints() {
+      const markCounts = [0, 0, 0];
+      const alphaSums = [0, 0, 0];
+      for (let index = 0; index < scenePointCount; index += 1) {
+        const offset = index * SCENE_POINT_STRIDE;
+        if (sceneData[offset + 6] > 4) continue;
+        const category = sceneData[offset + 5];
+        markCounts[category] += 1;
+        alphaSums[category] += sceneData[offset + 4];
+      }
+      const perMark = [HAZE_RECIPE.starsPerMark.core, HAZE_RECIPE.starsPerMark.tests, HAZE_RECIPE.starsPerMark.dependencyStar];
+      const requested = markCounts[0] * perMark[0] + markCounts[1] * perMark[1] + markCounts[2] * perMark[2];
+      const budgetScale = Math.min(1, HAZE_RECIPE.pointBudget / Math.max(1, requested));
+      const poolCounts = markCounts.map((count, category) => Math.round(count * perMark[category] * budgetScale));
+      // The budget is a hard cap: rounding and dither tails trim, never spill.
+      poolCounts[0] = Math.min(poolCounts[0], HAZE_RECIPE.pointBudget);
+      poolCounts[1] = Math.min(poolCounts[1], HAZE_RECIPE.pointBudget - poolCounts[0]);
+      const meanAlpha = alphaSums.map((sum, category) => (markCounts[category] ? sum / markCounts[category] : 0));
+
+      // Dependency haze resamples per declaration row so each gem cloud keeps
+      // its exact share, morphology, and expansion indexes.
+      const dependencyRows = [];
+      if (poolCounts[2] > 0) {
+        const perStar = perMark[2] * budgetScale;
+        for (let index = 0; index < scenePointCount; index += 1) {
+          const offset = index * SCENE_POINT_STRIDE;
+          if (sceneData[offset + 5] !== categoryCodes.dependencies || sceneData[offset + 6] > 4) continue;
+          const stars = Math.floor(perStar) +
+            (unit(hash(index + 1, HAZE_RECIPE.ditherSeedChannel), HAZE_RECIPE.ditherChannel) < perStar % 1 ? 1 : 0);
+          for (let star = 0; star < stars; star += 1) dependencyRows.push(index * 8 + star);
+        }
+        const dependencyBudget = Math.max(0, HAZE_RECIPE.pointBudget - poolCounts[0] - poolCounts[1]);
+        if (dependencyRows.length > dependencyBudget) dependencyRows.length = dependencyBudget;
+      }
+
+      const hazeCount = poolCounts[0] + poolCounts[1] + dependencyRows.length;
+      const data = new Float32Array(hazeCount * SCENE_POINT_STRIDE);
+      let cursor = 0;
+      const writeHazeStar = (position, category, packageIndex, systemIndex, seed) => {
+        const out = cursor * SCENE_POINT_STRIDE;
+        const faint = unit(seed, HAZE_RECIPE.faintChannel);
+        // faint⁴ keeps most of the field very dim with a small sparkle tail of
+        // brighter, slightly larger resolved stars — the depth hierarchy of a
+        // real star field rather than uniform grain.
+        const sparkle = faint > HAZE_RECIPE.sparkleThreshold;
+        const size = sparkle ? HAZE_RECIPE.sparkleSize : HAZE_RECIPE.size;
+        data[out] = position[0];
+        data[out + 1] = position[1];
+        data[out + 2] = position[2];
+        data[out + 3] = size.floor + size.span * unit(seed, HAZE_RECIPE.sizeChannel);
+        data[out + 4] = meanAlpha[category] * (HAZE_RECIPE.faintFloor + HAZE_RECIPE.faintSpan * faint * faint * faint * faint);
+        data[out + 5] = category + HAZE_CATEGORY_OFFSET;
+        data[out + 6] = HAZE_RECIPE.maxSize;
+        data[out + 7] = packageIndex;
+        data[out + 8] = systemIndex;
+        cursor += 1;
+      };
+      // A fraction of each namespace pool lands in tight clumps resampled from
+      // the same law — the flocculent star-cloud patchiness of a real disc.
+      const writeNamespacePool = (count, category, positionFor, clumpShare, clumpSpread) => {
+        const clumps = Math.floor(count * clumpShare / HAZE_RECIPE.clumpSize);
+        const smooth = count - clumps * HAZE_RECIPE.clumpSize;
+        for (let star = 0; star < smooth; star += 1) {
+          const seed = hash(star + 1, HAZE_RECIPE.poolSeedChannel + category);
+          writeHazeStar(positionFor(seed), category, -1, -1, seed);
+        }
+        for (let clump = 0; clump < clumps; clump += 1) {
+          const center = positionFor(hash(clump + 1, HAZE_RECIPE.clumpCenterChannel + category));
+          for (let member = 0; member < HAZE_RECIPE.clumpSize; member += 1) {
+            const seed = hash(clump * 97 + member + 1, HAZE_RECIPE.clumpMemberChannel + category);
+            writeHazeStar([
+              center[0] + normal(seed, 1) * clumpSpread,
+              center[1] + normal(seed, 3) * clumpSpread * .4,
+              center[2] + normal(seed, 5) * clumpSpread,
+            ], category, -1, -1, seed);
+          }
+        }
+      };
+      writeNamespacePool(poolCounts[0], categoryCodes.core, corePosition, HAZE_RECIPE.clumpShare.core, HAZE_RECIPE.clumpSpread.core * layoutScale.disk);
+      writeNamespacePool(poolCounts[1], categoryCodes.tests, testPosition, HAZE_RECIPE.clumpShare.tests, HAZE_RECIPE.clumpSpread.tests * layoutScale.tests);
+      for (const row of dependencyRows) {
+        const offset = Math.floor(row / 8) * SCENE_POINT_STRIDE;
+        const seed = hash(row + 1, HAZE_RECIPE.poolSeedChannel + categoryCodes.dependencies);
+        writeHazeStar(
+          dependencyPosition(seed, sceneData[offset + 7]),
+          categoryCodes.dependencies,
+          sceneData[offset + 7],
+          sceneData[offset + 8],
+          seed,
+        );
+      }
+      return data;
+    }
+    // Dust absorbs. One broad, broken lane hugs each spiral arm's inner edge
+    // and attenuates the marks and haze behind it by up to half — rule 6 of
+    // docs/STELLAR_DESIGN_RESEARCH.md: dust is derived from the morphology,
+    // broken into segments, and absorbing; never uniform fog and never new
+    // glowing particles. Positions are static in galaxy space, so absorption
+    // is baked into point alphas at build time and costs nothing per frame.
+    // innerRadius matches the bulge's outer edge — corePosition's bulge radial
+    // law caps at 17, and the tests disc starts there — so lanes never cut
+    // through bulge stars and dust begins where arms actually live.
+    const DUST_PRESET = Object.freeze({
+      maxAbsorption: .5,
+      laneWidth: 2.4,
+      laneOffset: -.16,
+      innerRadius: 17,
+      fadeInSpan: 5,
+      outerFadeStart: 44,
+      outerFadeEnd: 58,
+      segmentLength: 9,
+      brokenChannel: 150,
+    });
+    const smoothstep = (low, high, value) => {
+      const t = clamp((value - low) / (high - low), 0, 1);
+      return t * t * (3 - 2 * t);
     };
-    const exactDependencyDeclarations = Math.max(0, Number(totals.dependencyStars) || 0);
+    function dustAttenuation(position, radialScale) {
+      if (!spiralMorphology) return 0;
+      const x = position[0] / radialScale;
+      const z = position[2] / radialScale;
+      const radial = Math.hypot(x, z);
+      const barred = morphology.family === MORPHOLOGY_FAMILY.barredSpiral;
+      // Lanes hug arms, and barred arms only exist beyond the bar tips.
+      const laneStart = barred ? Math.max(DUST_PRESET.innerRadius, barRadius) : DUST_PRESET.innerRadius;
+      const window = smoothstep(laneStart, laneStart + DUST_PRESET.fadeInSpan, radial) *
+        (1 - smoothstep(DUST_PRESET.outerFadeStart, DUST_PRESET.outerFadeEnd, radial));
+      if (window <= 0) return 0;
+      const pointTheta = Math.atan2(z, x);
+      let density = 0;
+      for (let arm = 0; arm < morphology.armCount; arm += 1) {
+        // armCenterTheta is the same law that places arm stars, so the lane
+        // follows the rendered arm — including its seeded jitters and forks.
+        const laneTheta = armCenterTheta(arm, radial) + DUST_PRESET.laneOffset;
+        const delta = Math.atan2(Math.sin(pointTheta - laneTheta), Math.cos(pointTheta - laneTheta));
+        const across = Math.abs(delta) * radial;
+        if (across > DUST_PRESET.laneWidth * 3) continue;
+        const segment = Math.floor((radial + arm * 3.7) / DUST_PRESET.segmentLength);
+        const broken = (.35 + .65 * unit(hash(morphology.phaseSeed + arm * 17 + 1, DUST_PRESET.brokenChannel + segment), 0)) *
+          (.6 + .4 * Math.sin(radial * 1.7 + arm * 2.1));
+        density = Math.max(density, Math.exp(-((across / DUST_PRESET.laneWidth) ** 2)) * clamp(broken, 0, 1));
+      }
+      return DUST_PRESET.maxAbsorption * window * density;
+    }
+    function applyDustLanes(rows, count, categoryColumnOffset) {
+      for (let index = 0; index < count; index += 1) {
+        const offset = index * SCENE_POINT_STRIDE;
+        const category = rows[offset + 5] - categoryColumnOffset;
+        if (category !== categoryCodes.core && category !== categoryCodes.tests) continue;
+        const radialScale = category === categoryCodes.core ? layoutScale.disk : layoutScale.tests;
+        const absorbed = dustAttenuation([rows[offset], rows[offset + 1], rows[offset + 2]], radialScale);
+        if (absorbed > 0) rows[offset + 4] *= 1 - absorbed;
+      }
+    }
+    // Haze and dust exist only to be rendered, so they are built on first use
+    // by an accepted renderer — a browser that takes the WebGL2-unavailable
+    // path never spends the CPU or memory. Data rows come first, haze rows
+    // after: glow and white-hot passes draw only the first scenePointCount
+    // rows, and data render indexes stay pairable with gl_VertexID for
+    // selection.
+    let hazeBufferState = null;
+    function hazeBuffers() {
+      if (!hazeBufferState) {
+        const hazeData = buildHazePoints();
+        applyDustLanes(sceneData, scenePointCount, 0);
+        applyDustLanes(hazeData, hazeData.length / SCENE_POINT_STRIDE, HAZE_CATEGORY_OFFSET);
+        const renderPointData = new Float32Array(sceneData.length + hazeData.length);
+        renderPointData.set(sceneData, 0);
+        renderPointData.set(hazeData, sceneData.length);
+        // Counts are always derived from the buffers at their call sites; the
+        // arrays are the single source of truth for the rendered workload.
+        hazeBufferState = Object.freeze({ hazeData, renderPointData });
+      }
+      return hazeBufferState;
+    }
+
     const embeddedDependencyDeclarations = model.dependencyStars.length;
     let plottedDependencyDeclarations = embeddedDependencyDeclarations;
-    function dependencySamplingState(exact, embedded, packageCount) {
-      if (embedded >= exact) return null;
-      const gems = `${packageCount.toLocaleString()} ${packageCount === 1 ? "gem" : "gems"}`;
-      return {
-        summary: "Dependency stars sampled",
-        title: "Report data",
-        countLabel: `${embedded.toLocaleString()} embedded`,
-        note: `This report embeds ${embedded.toLocaleString()} of ${exact.toLocaleString()} dependency stars. Exact totals across ${gems} remain complete.`,
-      };
-    }
 
     function updateGalaxySummary() {
       const summary = document.getElementById("galaxy-summary");
@@ -687,6 +1205,7 @@
     function markExplorerUnavailable(reason, error = null) {
       const activeElement = document.activeElement;
       const hadInteractiveFocus = !helpOverlay.hidden || activeElement === canvas || Boolean(activeElement?.closest?.(".toolbar, #controls, #explorer-search-region"));
+      document.body.classList.remove("is-ui-hidden");
       if (animationFrame) cancelAnimationFrame(animationFrame);
       if (hoverFrame) cancelAnimationFrame(hoverFrame);
       animationFrame = 0;
@@ -709,10 +1228,9 @@
       plottedDependencyDeclarations = 0;
       document.documentElement.dataset.explorerRenderer = "unavailable";
       document.documentElement.dataset.explorerUnavailableReason = reason;
-      document.documentElement.dataset.dependencySampling = String(embeddedDependencyDeclarations < exactDependencyDeclarations);
-      document.documentElement.dataset.embeddedDependencySampling = String(embeddedDependencyDeclarations < exactDependencyDeclarations);
       document.documentElement.dataset.plottedDependencyDeclarations = String(plottedDependencyDeclarations);
       document.documentElement.dataset.plottedScenePoints = "0";
+      document.documentElement.dataset.hazePoints = "0";
       if (error) document.documentElement.dataset.explorerRendererError = error.message;
       canvas.setAttribute("aria-label", "Interactive artwork unavailable because WebGL2 is required.");
       disableExplorerControls();
@@ -731,6 +1249,7 @@
       hideShowcaseAnnotation();
       if (showcaseAnnotation) showcaseAnnotation.hidden = true;
       canvas.hidden = true;
+      travelCanvas.hidden = true;
       canvas.setAttribute("aria-label", "Showcase artwork unavailable because WebGL2 is required.");
       if (showcaseStatus) {
         showcaseStatus.textContent = "WebGL2 is required to display this Showcase.";
@@ -741,6 +1260,7 @@
       plottedDependencyDeclarations = 0;
       document.documentElement.dataset.plottedDependencyDeclarations = String(plottedDependencyDeclarations);
       document.documentElement.dataset.plottedScenePoints = "0";
+      document.documentElement.dataset.hazePoints = "0";
       document.documentElement.dataset.showcaseMotion = "unavailable";
       document.documentElement.dataset.showcaseReady = "true";
       if (error) document.documentElement.dataset.showcaseRendererError = error.message;
@@ -766,6 +1286,17 @@
         void main() {
           if (v_alpha <= 0.0) discard;
           float radial = length(gl_PointCoord - vec2(0.5)) * 2.0;
+          // Negative radius marks a milk sprite: a soft puff whose additive
+          // overlap integrates unresolved light into a continuous glow
+          // surface. (1-r²)² tracks a gaussian closely and stays cheap on the
+          // software rasterizers the milk pass must survive.
+          if (v_radius < 0.0) {
+            if (radial > 1.0) discard;
+            float falloff = 1.0 - radial * radial;
+            float milk = v_alpha * falloff * falloff;
+            outColor = vec4(v_colour * milk, milk);
+            return;
+          }
           float feather = min(1.0, 1.0 / max(v_radius, 1.0));
           float coverage = 1.0 - smoothstep(1.0 - feather, 1.0, radial);
           if (coverage <= 0.0) discard;
@@ -774,6 +1305,26 @@
         }
       `;
 
+    const DEPENDENCY_SPIN_VERTEX_SOURCE = `
+        uniform sampler2D u_dependencySpins;
+        uniform int u_dependencySpinTextureWidth;
+        uniform float u_dependencySpinElapsed;
+
+        vec3 dependencySpinPosition(vec3 position, float category, float maxSize, float packageIndex) {
+          if (category < 1.5 || maxSize >= 4.0 || packageIndex < 0.0) return position;
+          int index = int(packageIndex + 0.5) * 2;
+          ivec2 spinCoordinate = ivec2(index % u_dependencySpinTextureWidth, index / u_dependencySpinTextureWidth);
+          ivec2 axisCoordinate = ivec2((index + 1) % u_dependencySpinTextureWidth, (index + 1) / u_dependencySpinTextureWidth);
+          vec4 spin = texelFetch(u_dependencySpins, spinCoordinate, 0);
+          vec3 axis = texelFetch(u_dependencySpins, axisCoordinate, 0).xyz;
+          float angle = spin.w * u_dependencySpinElapsed;
+          float cosine = cos(angle);
+          float sine = sin(angle);
+          vec3 offset = position - spin.xyz;
+          return spin.xyz + offset * cosine + cross(axis, offset) * sine + axis * dot(axis, offset) * (1.0 - cosine);
+        }
+      `;
+
     function compileGlShader(gl, type, source) {
       const shader = gl.createShader(type);
       gl.shaderSource(shader, source);
@@ -816,13 +1367,21 @@
         document.documentElement.dataset.showcaseUnavailableReason = "webgl2-unavailable";
         return null;
       }
-      // Largest sprite is an unexpanded hub glow: radius 5.2 * 3.4 CSS pixels.
-      const maxSpriteCssSize = 5.2 * 3.4 * 2 + 2;
+      // The largest active sprite decides the capability floor: the hub glow
+      // when the glow pass is on, otherwise the larger of the hub body and the
+      // milk sprite (drawn at quarter resolution, so its device size is half
+      // a hazeMilkRadius).
+      const maxSpriteCssSize = Math.max(
+        SHOWCASE_PRESET.pointGlowPercent > 0 ? 5.2 * 3.4 * 2 : 5.2 * 2,
+        SHOWCASE_PRESET.hazeMilkRadius / 2,
+      ) + 2;
       const pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
       if (pointSizeRange[1] < maxSpriteCssSize) {
         document.documentElement.dataset.showcaseUnavailableReason = "webgl2-point-size-range";
         return null;
       }
+      const { renderPointData } = hazeBuffers();
+      const renderPointCount = renderPointData.length / SCENE_POINT_STRIDE;
 
       const createProgram = (vertexSource, fragmentSource) => createGlProgram(gl, vertexSource, fragmentSource);
 
@@ -851,6 +1410,7 @@
         layout(location = 2) in float a_alpha;
         layout(location = 3) in float a_category;
         layout(location = 4) in float a_maxSize;
+        layout(location = 5) in float a_packageIndex;
         uniform vec2 u_resolution;
         uniform vec2 u_center;
         uniform vec4 u_trig;
@@ -861,6 +1421,7 @@
         uniform float u_glow;
         uniform float u_deepDetail;
         uniform int u_pass;
+        ${DEPENDENCY_SPIN_VERTEX_SOURCE}
         out vec3 v_colour;
         out float v_alpha;
         out float v_radius;
@@ -874,14 +1435,17 @@
         }
 
         void main() {
+          bool hazePoint = a_category >= 2.5;
+          float categoryCode = hazePoint ? a_category - 3.0 : a_category;
+          vec3 position = dependencySpinPosition(a_position, categoryCode, a_maxSize, a_packageIndex);
           float cy = u_trig.x;
           float sy = u_trig.y;
           float cp = u_trig.z;
           float sp = u_trig.w;
-          float x1 = a_position.x * cy - a_position.z * sy;
-          float z1 = a_position.x * sy + a_position.z * cy;
-          float y2 = a_position.y * cp - z1 * sp;
-          float z2 = a_position.y * sp + z1 * cp;
+          float x1 = position.x * cy - position.z * sy;
+          float z1 = position.x * sy + position.z * cy;
+          float y2 = position.y * cp - z1 * sp;
+          float z2 = position.y * sp + z1 * cp;
           float depth = u_cameraDistance - z2;
           if (depth <= 35.0) { hidePoint(); return; }
 
@@ -893,33 +1457,43 @@
           }
 
           float size = clamp(a_sizeFactor * perspective, 0.35, a_maxSize);
-          float starAlphaScale = a_category > 1.5 ? float(${SHOWCASE_DEPENDENCY_PRESET.starAlphaScale}) : 1.0;
+          float starAlphaScale = categoryCode > 1.5 ? float(${SHOWCASE_DEPENDENCY_PRESET.starAlphaScale}) : 1.0;
           float visibleAlpha = clamp(a_alpha * starAlphaScale * u_brightness / 100.0, 0.0, 1.0);
           float radius = size;
           float alpha = visibleAlpha;
-          vec3 colour = a_category < 0.5
+          vec3 colour = categoryCode < 0.5
             ? ${glslVec3(colours.core)} / 255.0
-            : (a_category < 1.5 ? ${glslVec3(colours.tests)} / 255.0 : ${glslVec3(colours.dependencies)} / 255.0);
-
-          if (u_pass == 0) {
-            if (size <= 1.35 || u_glow <= 0.0) { hidePoint(); return; }
+            : (categoryCode < 1.5 ? ${glslVec3(colours.tests)} / 255.0 : ${glslVec3(colours.dependencies)} / 255.0);
+
+          if (u_pass == 3) {
+            // Milk pass: on the fixed far camera the unresolved population
+            // presents as its integrated light — big, ultra-faint gaussian
+            // sprites whose overlap forms a continuous glow tracing the
+            // real density law, not individual resolved points. It renders
+            // into a half-resolution target, so device sizes are halved.
+            if (!hazePoint) { hidePoint(); return; }
+            radius = float(${SHOWCASE_PRESET.hazeMilkRadius});
+            alpha = visibleAlpha * float(${SHOWCASE_PRESET.hazeMilkGainPercent}) / 100.0;
+          } else if (u_pass == 0) {
+            if (hazePoint || size <= 1.35 || u_glow <= 0.0) { hidePoint(); return; }
             float glowScale = (3.4 - u_deepDetail * 1.3) * (0.75 + 0.25 * u_glow / 100.0);
             radius = size * glowScale;
             alpha = min(1.0, visibleAlpha * 0.055 * u_glow / 100.0);
           } else if (u_pass == 1) {
+            if (hazePoint) { hidePoint(); return; }
             radius = size < 0.85 ? 0.5 : size;
           } else {
-            if (size <= 1.1) { hidePoint(); return; }
+            if (hazePoint || size <= 1.1) { hidePoint(); return; }
             radius = max(0.45 + u_deepDetail * 0.25, size * (0.24 + u_deepDetail * 0.06));
             alpha = min(0.9, visibleAlpha * 1.25);
             colour = ${glslVec3(whiteHotColour)} / 255.0;
           }
 
           gl_Position = vec4(screen.x / u_resolution.x * 2.0 - 1.0, 1.0 - screen.y / u_resolution.y * 2.0, 0.0, 1.0);
-          gl_PointSize = max(1.0, radius * 2.0);
+          gl_PointSize = max(1.0, radius * 2.0) * (u_pass == 3 ? 0.25 : 1.0);
           v_colour = colour;
           v_alpha = alpha;
-          v_radius = radius;
+          v_radius = u_pass == 3 ? -radius : radius;
         }
       `, POINT_FRAGMENT_SOURCE);
 
@@ -927,13 +1501,51 @@
       const pointBuffer = gl.createBuffer();
       gl.bindVertexArray(pointVao);
       gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, sceneData, gl.STATIC_DRAW);
+      gl.bufferData(gl.ARRAY_BUFFER, renderPointData, gl.STATIC_DRAW);
       const stride = SCENE_POINT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
-      [[0, 3, 0], [1, 1, 3], [2, 1, 4], [3, 1, 5], [4, 1, 6]].forEach(([location, size, offset]) => {
+      [[0, 3, 0], [1, 1, 3], [2, 1, 4], [3, 1, 5], [4, 1, 6], [5, 1, 7]].forEach(([location, size, offset]) => {
         gl.enableVertexAttribArray(location);
         gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset * Float32Array.BYTES_PER_ELEMENT);
       });
       gl.bindVertexArray(null);
+      const dependencySpins = createDependencySpinTexture(gl);
+
+      // The milk pass accumulates into a quarter-resolution offscreen target
+      // and is composited up with linear filtering: identical integrated light
+      // at a sixteenth of the fragment work, which keeps large scenes and the
+      // software rasterizers CI and clip export run on inside frame budgets.
+      const milkTexture = gl.createTexture();
+      const milkFramebuffer = gl.createFramebuffer();
+      let milkWidth = 0;
+      let milkHeight = 0;
+      const ensureMilkTarget = () => {
+        const targetWidth = Math.max(1, Math.round(canvas.width / 4));
+        const targetHeight = Math.max(1, Math.round(canvas.height / 4));
+        if (targetWidth === milkWidth && targetHeight === milkHeight) return;
+        milkWidth = targetWidth;
+        milkHeight = targetHeight;
+        gl.bindTexture(gl.TEXTURE_2D, milkTexture);
+        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, milkWidth, milkHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, milkFramebuffer);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, milkTexture, 0);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      };
+      const milkCompositeProgram = createProgram(FULLSCREEN_TRIANGLE_VERTEX_SOURCE, `#version 300 es
+        precision highp float;
+        uniform sampler2D u_milk;
+        uniform vec2 u_resolution;
+        out vec4 outColor;
+        void main() { outColor = texture(u_milk, gl_FragCoord.xy / u_resolution); }
+      `);
+      const milkCompositeUniforms = {
+        milk: gl.getUniformLocation(milkCompositeProgram, "u_milk"),
+        resolution: gl.getUniformLocation(milkCompositeProgram, "u_resolution"),
+      };
 
       const backgroundUniforms = {
         resolution: gl.getUniformLocation(backgroundProgram, "u_resolution"),
@@ -950,6 +1562,9 @@
         brightness: gl.getUniformLocation(pointProgram, "u_brightness"),
         glow: gl.getUniformLocation(pointProgram, "u_glow"),
         deepDetail: gl.getUniformLocation(pointProgram, "u_deepDetail"),
+        dependencySpins: gl.getUniformLocation(pointProgram, "u_dependencySpins"),
+        dependencySpinTextureWidth: gl.getUniformLocation(pointProgram, "u_dependencySpinTextureWidth"),
+        dependencySpinElapsed: gl.getUniformLocation(pointProgram, "u_dependencySpinElapsed"),
         pass: gl.getUniformLocation(pointProgram, "u_pass"),
       };
       canvas.addEventListener("webglcontextlost", () => {
@@ -964,6 +1579,7 @@
           canvas.width = Math.round(viewportWidth);
           canvas.height = Math.round(viewportHeight);
           gl.viewport(0, 0, canvas.width, canvas.height);
+          ensureMilkTarget();
         },
         render() {
           const deepDetail = clamp(Math.log2(Math.max(1, zoom)) / 5, 0, 1);
@@ -980,6 +1596,11 @@
           gl.blendFunc(gl.ONE, gl.ONE);
           gl.useProgram(pointProgram);
           gl.bindVertexArray(pointVao);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, dependencySpins.texture);
+          gl.uniform1i(pointUniforms.dependencySpins, 0);
+          gl.uniform1i(pointUniforms.dependencySpinTextureWidth, dependencySpins.width);
+          gl.uniform1f(pointUniforms.dependencySpinElapsed, dependencySpinElapsed / 1000);
           gl.uniform2f(pointUniforms.resolution, width, height);
           gl.uniform2f(pointUniforms.center, sceneCenterX, sceneCenterY);
           const [cy, sy, cp, sp] = viewMatrix();
@@ -990,6 +1611,26 @@
           gl.uniform1f(pointUniforms.brightness, SHOWCASE_PRESET.starBrightnessPercent);
           gl.uniform1f(pointUniforms.glow, SHOWCASE_PRESET.pointGlowPercent);
           gl.uniform1f(pointUniforms.deepDetail, deepDetail);
+
+          ensureMilkTarget();
+          gl.bindFramebuffer(gl.FRAMEBUFFER, milkFramebuffer);
+          gl.viewport(0, 0, milkWidth, milkHeight);
+          gl.clearColor(0, 0, 0, 0);
+          gl.clear(gl.COLOR_BUFFER_BIT);
+          gl.uniform1i(pointUniforms.pass, 3);
+          gl.drawArrays(gl.POINTS, scenePointCount, renderPointCount - scenePointCount);
+          gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+          gl.viewport(0, 0, canvas.width, canvas.height);
+          gl.useProgram(milkCompositeProgram);
+          gl.bindVertexArray(null);
+          gl.activeTexture(gl.TEXTURE1);
+          gl.bindTexture(gl.TEXTURE_2D, milkTexture);
+          gl.uniform1i(milkCompositeUniforms.milk, 1);
+          gl.uniform2f(milkCompositeUniforms.resolution, canvas.width, canvas.height);
+          gl.drawArrays(gl.TRIANGLES, 0, 3);
+          gl.useProgram(pointProgram);
+          gl.bindVertexArray(pointVao);
+
           for (let pass = 0; pass < 3; pass += 1) {
             gl.uniform1i(pointUniforms.pass, pass);
             gl.drawArrays(gl.POINTS, 0, scenePointCount);
@@ -1009,10 +1650,9 @@
         document.documentElement.dataset.showcaseUnavailableReason = "webgl2-initialization-error";
       }
       if (showcaseRenderer) {
-        document.documentElement.dataset.dependencySampling = String(embeddedDependencyDeclarations < exactDependencyDeclarations);
-        document.documentElement.dataset.embeddedDependencySampling = String(embeddedDependencyDeclarations < exactDependencyDeclarations);
         document.documentElement.dataset.plottedDependencyDeclarations = String(embeddedDependencyDeclarations);
         document.documentElement.dataset.plottedScenePoints = String(scenePointCount);
+        document.documentElement.dataset.hazePoints = String(hazeBuffers().hazeData.length / SCENE_POINT_STRIDE);
       } else {
         markShowcaseUnavailable(
           document.documentElement.dataset.showcaseUnavailableReason || "webgl2-unavailable",
@@ -1038,14 +1678,17 @@
         document.documentElement.dataset.explorerUnavailableReason = "webgl2-unavailable";
         return null;
       }
-      // Largest sprite is an unexpanded hub glow: radius 5.2 * 3.4 CSS pixels.
-      const maxSpriteCssSize = 5.2 * 3.4 * 2 + 2;
+      // Dependency marks skip this pass, so an ordinary Core/Test glow is the
+      // largest Explorer sprite: radius 3.2 * 3.4 CSS pixels.
+      const maxSpriteCssSize = 3.2 * 3.4 * 2 + 2;
       const pointSizeRange = gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE);
       if (pointSizeRange[1] < maxSpriteCssSize) {
         liveCanvas.remove();
         document.documentElement.dataset.explorerUnavailableReason = "webgl2-point-size-range";
         return null;
       }
+      const { renderPointData } = hazeBuffers();
+      const renderPointCount = renderPointData.length / SCENE_POINT_STRIDE;
       let rendererDpr = 1;
 
       const backgroundProgram = createGlProgram(gl, FULLSCREEN_TRIANGLE_VERTEX_SOURCE, `#version 300 es
@@ -1091,6 +1734,7 @@
         uniform float u_expansion;
         uniform int u_selectedIndex;
         uniform int u_pass;
+        ${DEPENDENCY_SPIN_VERTEX_SOURCE}
         out vec3 v_colour;
         out float v_alpha;
         out float v_radius;
@@ -1104,9 +1748,12 @@
         }
 
         void main() {
-          int category = int(a_category + 0.5);
+          bool hazePoint = a_category >= 2.5;
+          float categoryCode = hazePoint ? a_category - 3.0 : a_category;
+          int category = int(categoryCode + 0.5);
           if (u_categoryVisible[category] < 0.5) { hidePoint(); return; }
-          vec3 position = a_position;
+          if (u_pass == 0 && (hazePoint || category == 2)) { hidePoint(); return; }
+          vec3 position = dependencySpinPosition(a_position, categoryCode, a_maxSize, a_packageIndex);
           bool expandedPoint = (u_expandedPackage >= 0.0 && a_packageIndex == u_expandedPackage)
             || (u_expandedSystem >= 0.0 && a_systemIndex == u_expandedSystem);
           if (expandedPoint) position = u_expandedAnchor + (position - u_expandedAnchor) * u_expansion;
@@ -1131,27 +1778,38 @@
           }
 
           float size = clamp(a_sizeFactor * perspective, 0.35, a_maxSize);
-          bool focusedDependencyPoint = expandedPoint && category == 2;
+          bool focusedDependencyPoint = !hazePoint && expandedPoint && category == 2;
           bool focusedDependencyHub = focusedDependencyPoint && a_maxSize > 4.0;
           float emphasis = focusedDependencyPoint || selected ? 1.0 : u_categoryEmphasis[category];
           float focusedAlpha = max(focusedDependencyHub ? 0.34 : 0.289, a_alpha);
-          float visibleAlpha = (focusedDependencyPoint ? focusedAlpha : a_alpha * emphasis) * u_exposure;
+          float categoryExposure = category == 2
+            ? min(u_exposure, float(${explorerExposureForZoom(DEFAULT_CAMERA.zoom * ZOOM_STEP)}))
+            : u_exposure;
+          float visibleAlpha = (focusedDependencyPoint ? focusedAlpha : a_alpha * emphasis) * categoryExposure;
           bool detailed = emphasis >= 0.1;
           float radius = size;
           float alpha = visibleAlpha;
-          vec3 colour = a_category < 0.5
+          vec3 colour = categoryCode < 0.5
             ? ${glslVec3(colours.core)} / 255.0
-            : (a_category < 1.5 ? ${glslVec3(colours.tests)} / 255.0 : ${glslVec3(colours.dependencies)} / 255.0);
+            : (categoryCode < 1.5 ? ${glslVec3(colours.tests)} / 255.0 : ${glslVec3(colours.dependencies)} / 255.0);
 
           if (u_pass == 0) {
             if (size <= 1.35 || !detailed) { hidePoint(); return; }
-            float glowScale = focusedDependencyPoint ? 2.2 - u_deepDetail * 0.8 : 3.4 - u_deepDetail * 1.3;
+            float glowScale = 3.4 - u_deepDetail * 1.3;
             radius = size * glowScale;
-            alpha = visibleAlpha * (focusedDependencyPoint ? 0.045 : 0.055);
+            alpha = visibleAlpha * 0.055 * (1.0 - 0.78 * u_deepDetail);
           } else if (u_pass == 1) {
-            radius = (!detailed || size < 0.85) ? 0.5 : size;
+            if (hazePoint) {
+              // Haze escapes the zoom exposure dimming: as marks calm down at
+              // depth, the unresolved field stays lit and reads as resolved
+              // faint stars, the way a telescope resolves the Milky Way.
+              radius = size * (1.0 + 0.4 * u_deepDetail);
+              alpha = a_alpha * emphasis * mix(categoryExposure, 1.35, u_deepDetail);
+            } else {
+              radius = (!detailed || size < 0.85) ? 0.5 : size;
+            }
           } else {
-            if (size <= 1.1 || !detailed) { hidePoint(); return; }
+            if (hazePoint || size <= 1.1 || !detailed) { hidePoint(); return; }
             radius = max(0.45 + u_deepDetail * 0.25, size * (0.24 + u_deepDetail * 0.06));
             alpha = min(0.9, visibleAlpha * 1.25);
             colour = ${glslVec3(whiteHotColour)} / 255.0;
@@ -1169,13 +1827,14 @@
       const pointBuffer = gl.createBuffer();
       gl.bindVertexArray(pointVao);
       gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
-      gl.bufferData(gl.ARRAY_BUFFER, sceneData, gl.STATIC_DRAW);
+      gl.bufferData(gl.ARRAY_BUFFER, renderPointData, gl.STATIC_DRAW);
       const stride = SCENE_POINT_STRIDE * Float32Array.BYTES_PER_ELEMENT;
       [[0, 3, 0], [1, 1, 3], [2, 1, 4], [3, 1, 5], [4, 1, 6], [5, 1, 7], [6, 1, 8]].forEach(([location, size, offset]) => {
         gl.enableVertexAttribArray(location);
         gl.vertexAttribPointer(location, size, gl.FLOAT, false, stride, offset * Float32Array.BYTES_PER_ELEMENT);
       });
       gl.bindVertexArray(null);
+      const dependencySpins = createDependencySpinTexture(gl);
 
       const backgroundUniforms = {
         resolution: gl.getUniformLocation(backgroundProgram, "u_resolution"),
@@ -1185,7 +1844,8 @@
         "u_resolution", "u_center", "u_sceneBounds", "u_trig", "u_zoom",
         "u_cameraDistance", "u_cameraFocalLength", "u_exposure", "u_deepDetail", "u_dpr",
         "u_categoryVisible", "u_categoryEmphasis", "u_expandedPackage", "u_expandedSystem",
-        "u_expandedAnchor", "u_expansion", "u_selectedIndex", "u_pass",
+        "u_expandedAnchor", "u_expansion", "u_selectedIndex", "u_dependencySpins",
+        "u_dependencySpinTextureWidth", "u_dependencySpinElapsed", "u_pass",
       ].map(name => [name.slice(2), gl.getUniformLocation(pointProgram, name)]));
 
       const categoryEmphasisVector = () => {
@@ -1228,6 +1888,11 @@
           gl.blendFunc(gl.ONE, gl.ONE);
           gl.useProgram(pointProgram);
           gl.bindVertexArray(pointVao);
+          gl.activeTexture(gl.TEXTURE0);
+          gl.bindTexture(gl.TEXTURE_2D, dependencySpins.texture);
+          gl.uniform1i(pointUniforms.dependencySpins, 0);
+          gl.uniform1i(pointUniforms.dependencySpinTextureWidth, dependencySpins.width);
+          gl.uniform1f(pointUniforms.dependencySpinElapsed, dependencySpinElapsed / 1000);
           gl.uniform2f(pointUniforms.resolution, width, height);
           gl.uniform2f(pointUniforms.center, centerX, centerY);
           gl.uniform2f(pointUniforms.sceneBounds, sceneRight, sceneBottom);
@@ -1253,7 +1918,7 @@
           gl.uniform1i(pointUniforms.selectedIndex, selectedPoint ? selectedPoint.renderIndex : -1);
           for (let pass = 0; pass < 3; pass += 1) {
             gl.uniform1i(pointUniforms.pass, pass);
-            gl.drawArrays(gl.POINTS, 0, scenePointCount);
+            gl.drawArrays(gl.POINTS, 0, pass === 1 ? renderPointCount : scenePointCount);
           }
           gl.bindVertexArray(null);
           gl.disable(gl.BLEND);
@@ -1273,10 +1938,9 @@
         document.documentElement.dataset.explorerUnavailableReason = "webgl2-initialization-error";
       }
       if (explorerRenderer) {
-        document.documentElement.dataset.dependencySampling = String(plottedDependencyDeclarations < exactDependencyDeclarations);
-        document.documentElement.dataset.embeddedDependencySampling = String(embeddedDependencyDeclarations < exactDependencyDeclarations);
         document.documentElement.dataset.plottedDependencyDeclarations = String(plottedDependencyDeclarations);
         document.documentElement.dataset.plottedScenePoints = String(scenePointCount);
+        document.documentElement.dataset.hazePoints = String(hazeBuffers().hazeData.length / SCENE_POINT_STRIDE);
       } else {
         markExplorerUnavailable(
           document.documentElement.dataset.explorerUnavailableReason || "webgl2-unavailable",
@@ -1285,8 +1949,9 @@
       }
     }
     const context = interactiveMode ? canvas.getContext("2d", { alpha: Boolean(explorerRenderer) }) : null;
+    const travelContext = showcaseMode ? travelCanvas.getContext("2d", { alpha: true }) : context;
     const directGemCount = model.packages.filter(row => row[1] === 0).length;
-    const transitiveGemCount = totals.packages - directGemCount;
+    const transitiveGemCount = packageCount - directGemCount;
     const allRubyMetricIndexes = [0, 1, 2, 3];
     const testRubyMetricIndexes = [0, 2];
     const dependencyRubyCounts = model.packages.reduce(
@@ -1296,7 +1961,7 @@
     const categoryMeta = {
       core: { title: "Core code", rubyCounts: model.categoryStats?.core || [0, 0, 0, 0], metricIndexes: allRubyMetricIndexes, focusZoom: 2.8 },
       tests: { title: "Tests", rubyCounts: model.categoryStats?.tests || [0, 0, 0, 0], metricIndexes: testRubyMetricIndexes, focusZoom: 1.35 },
-      dependencies: { title: "Gems", summary: `${totals.packages.toLocaleString()} dependency gems`, rubyCounts: dependencyRubyCounts, metricIndexes: allRubyMetricIndexes, note: `${directGemCount.toLocaleString()} direct · ${transitiveGemCount.toLocaleString()} transitive`, focusZoom: .72 },
+      dependencies: { title: "Gems", rubyCounts: dependencyRubyCounts, metricIndexes: allRubyMetricIndexes, note: `${directGemCount.toLocaleString()} direct · ${transitiveGemCount.toLocaleString()} transitive`, focusZoom: .72 },
     };
     model.namespaces = [];
     model.packages = [];
@@ -1308,6 +1973,7 @@
       zoom = clamp(target.zoom, MIN_ZOOM, MAX_ZOOM);
       panX = target.panX;
       panY = target.panY;
+      rebaseExplorerTravelAdmission();
     }
 
     function contextualSelectionCameraTarget(point, preferredZoom = point.hub ? 4 : point.category === "dependencies" ? 5 : 7) {
@@ -1421,6 +2087,7 @@
       panY = start.panY + (target.panY - start.panY) * eased;
       const pullback = Math.sin(Math.PI * progress) ** 2 * cameraFlight.pullback;
       zoom = Math.exp(Math.log(start.zoom) + (Math.log(target.zoom) - Math.log(start.zoom)) * eased - pullback);
+      rebaseExplorerTravelAdmission();
       if (progress >= 1) {
         cameraFlight = null;
         applyCameraTarget(finalTarget);
@@ -1447,6 +2114,19 @@
       return true;
     }
 
+    function advanceDependencySpin(timestamp) {
+      if (!interactiveMode || !drifting || reducedMotionQuery.matches) {
+        lastDependencySpinTimestamp = null;
+        return false;
+      }
+      const elapsed = lastDependencySpinTimestamp === null
+        ? 1000 / 60
+        : clamp(timestamp - lastDependencySpinTimestamp, 0, MAX_DRIFT_DELTA_MS);
+      lastDependencySpinTimestamp = timestamp;
+      dependencySpinElapsed = (dependencySpinElapsed + elapsed) % SHOWCASE_PRESET.durationMs;
+      return true;
+    }
+
     function addTooltipMetric(label, value) {
       const term = document.createElement("dt");
       const detail = document.createElement("dd");
@@ -1492,7 +2172,7 @@
     }
 
     function positionTooltip(point) {
-      if (cameraFlight || !point?.screen) { tooltip.hidden = true; return; }
+      if (document.body.classList.contains("is-ui-hidden") || cameraFlight || !point?.screen) { tooltip.hidden = true; return; }
       tooltip.hidden = false;
       const bounds = tooltip.getBoundingClientRect();
       if (bounds.width === 0 || bounds.height === 0) {
@@ -1657,7 +2337,7 @@
     }
 
     function queueHover(x, y) {
-      if (cameraFlight || dragging || pointers.size > 0) return;
+      if (document.body.classList.contains("is-ui-hidden") || cameraFlight || dragging || pointers.size > 0) return;
       pendingHover = [x, y];
       if (hoverFrame) return;
       hoverFrame = requestAnimationFrame(() => {
@@ -1678,10 +2358,28 @@
 
     function setPanelCollapsed(collapsed) {
       if (collapsed && panelBody.contains(document.activeElement)) panelToggle.focus();
+      const action = collapsed ? "Expand" : "Collapse";
       panel.classList.toggle("is-collapsed", collapsed);
       panelBody.hidden = collapsed;
       panelToggle.setAttribute("aria-expanded", String(!collapsed));
-      panelToggle.textContent = collapsed ? "Show" : "Hide";
+      panelToggle.setAttribute("aria-label", `${action} Explorer`);
+      panelToggle.textContent = action;
+      updateSceneViewport();
+      requestRender();
+    }
+
+    function setUiHidden(hidden) {
+      const action = hidden ? "Show" : "Hide";
+      document.body.classList.toggle("is-ui-hidden", hidden);
+      uiToggle.setAttribute("aria-pressed", String(hidden));
+      uiToggle.setAttribute("aria-label", `${action} interface`);
+      uiToggle.textContent = `${action} UI`;
+      uiToggle.title = `${action} interface (H)`;
+      cancelPendingHover();
+      canvas.classList.remove("is-star");
+      tooltip.hidden = true;
+      if (!selectionLocked) selectPoint(null);
+      if (hidden && document.activeElement !== canvas) canvas.focus({ preventScroll: true });
       updateSceneViewport();
       requestRender();
     }
@@ -1752,6 +2450,7 @@
     }
 
     function clearExpandedPackage() {
+      if (expandedSystemIndex !== null || expandedPackageIndex !== null) resetExplorerTravel();
       expandedSystemIndex = null;
       expandedPackageIndex = null;
     }
@@ -1795,6 +2494,7 @@
     }
 
     function setCategoryVisible(category, visible) {
+      if (visibleCategories[category] !== visible) resetExplorerTravel();
       visibleCategories[category] = visible;
       if (visibilityInputs[category]) visibilityInputs[category].checked = visible;
       if (!visible && (selectedPoint?.category === category || focusedCategory === category)) clearExplorationFocus();
@@ -1827,10 +2527,13 @@
       }
       clearCategoryFocus();
       if (expandDependency && point.systemHub && !point.packageHub) {
+        if (expandedSystemIndex !== point.systemIndex || expandedPackageIndex !== null) resetExplorerTravel();
         expandedSystemIndex = point.systemIndex;
         expandedPackageIndex = null;
       } else if (expandDependency && point.packageHub) {
-        expandedSystemIndex = point.systemIndex >= 0 ? point.systemIndex : null;
+        const systemIndex = point.systemIndex >= 0 ? point.systemIndex : null;
+        if (expandedSystemIndex !== systemIndex || expandedPackageIndex !== point.packageIndex) resetExplorerTravel();
+        expandedSystemIndex = systemIndex;
         expandedPackageIndex = point.packageIndex;
       } else {
         clearExpandedPackage();
@@ -1912,17 +2615,13 @@
       const counts = Object.fromEntries(["manifest", "index", "integrity"].map(category => [category, Math.max(0, Number(model.warningCounts?.[category]) || 0)]));
       const warningTotal = Object.values(counts).reduce((sum, count) => sum + count, 0);
       const rendererUnavailable = interactiveMode && document.documentElement.dataset.explorerRenderer === "unavailable";
-      const sampling = interactiveMode
-        ? dependencySamplingState(exactDependencyDeclarations, embeddedDependencyDeclarations, totals.packages)
-        : null;
       container.textContent = "";
-      details.hidden = !rendererUnavailable && !sampling && warningTotal === 0;
+      details.hidden = !rendererUnavailable && warningTotal === 0;
       if (details.hidden) return;
 
       const analysisSummary = `${warningTotal.toLocaleString()} analysis warning${warningTotal === 1 ? "" : "s"}`;
       const statusSummaries = [];
       if (rendererUnavailable) statusSummaries.push("WebGL2 required");
-      if (sampling) statusSummaries.push(sampling.summary);
       if (warningTotal > 0) statusSummaries.push(analysisSummary);
       summary.textContent = statusSummaries.join(" · ");
 
@@ -1933,22 +2632,11 @@
           "Interactive rendering",
           1,
           [],
-          `This report requires WebGL2 to display its ${scenePointCount.toLocaleString()}-star interactive scene. Exact dependency totals across ${totals.packages.toLocaleString()} ${totals.packages === 1 ? "gem" : "gems"} remain complete.`,
+          `This report requires WebGL2 to display its ${scenePointCount.toLocaleString()}-star interactive scene. Exact dependency totals across ${packageCount.toLocaleString()} ${packageCount === 1 ? "gem" : "gems"} remain complete.`,
           "Unavailable",
         );
       }
 
-      if (sampling) {
-        appendWarningGroup(
-          container,
-          sampling.title,
-          1,
-          [],
-          sampling.note,
-          sampling.countLabel,
-        );
-      }
-
       const safeWarnings = (Array.isArray(model.dependencyWarnings) ? model.dependencyWarnings : []).filter(warning =>
         warning && typeof warning.name === "string" && warning.name.length > 0 && typeof warning.reason === "string" && warning.reason.length > 0
       );
@@ -2060,7 +2748,7 @@
       searchInput.value = "";
       searchResults.textContent = "";
       searchResults.hidden = true;
-      searchStatus.textContent = "Search Core, Tests, and Gems.";
+      searchStatus.textContent = "";
       if (focus) searchInput.focus();
     }
 
@@ -2135,21 +2823,27 @@
       for (const category of ["core", "tests", "dependencies"]) {
         const meta = categoryMeta[category];
         const details = document.createElement("details");
+        details.className = `explorer-section ${category}`;
         details.open = category === "core";
         const summary = document.createElement("summary");
-        const swatch = document.createElement("span");
-        swatch.className = `swatch ${category}`;
         const heading = document.createElement("span");
         heading.className = "section-heading";
         const title = document.createElement("strong");
         title.textContent = meta.title;
-        heading.append(title);
-        if (meta.summary) {
-          const summaryText = document.createElement("small");
-          summaryText.textContent = meta.summary;
-          heading.append(summaryText);
+        const summaryText = document.createElement("small");
+        summaryText.textContent = category === "dependencies"
+          ? `${packageCount.toLocaleString()} dependency gems`
+          : `${Number(meta.rubyCounts[0] || 0).toLocaleString()} classes · ${Number(meta.rubyCounts[2] || 0).toLocaleString()} methods`;
+        heading.append(title, summaryText);
+        const state = document.createElement("span");
+        state.className = "section-state";
+        for (const [className, label] of [["visible", "In view"], ["focused", "Focused"], ["hidden", "Hidden"]]) {
+          const stateLabel = document.createElement("span");
+          stateLabel.className = className;
+          stateLabel.textContent = label;
+          state.append(stateLabel);
         }
-        summary.append(swatch, heading);
+        summary.append(heading, state);
 
         const body = document.createElement("div");
         body.className = "section-body";
@@ -2164,8 +2858,11 @@
         checkbox.addEventListener("change", () => setCategoryVisible(category, checkbox.checked));
         visibilityInputs[category] = checkbox;
         const visibilityText = document.createElement("span");
-        visibilityText.textContent = "Visible";
-        visibility.append(checkbox, visibilityText);
+        const visibilityTrack = document.createElement("span");
+        visibilityTrack.className = "visibility-track";
+        visibilityTrack.setAttribute("aria-hidden", "true");
+        visibilityText.textContent = "Show stars";
+        visibility.append(checkbox, visibilityTrack, visibilityText);
         const focus = document.createElement("button");
         focus.type = "button";
         focus.textContent = "Focus";
@@ -2212,7 +2909,7 @@
         if (categoryFacts.length) {
           const factLabel = document.createElement("p");
           factLabel.className = "fact-label";
-          factLabel.textContent = "Ruby code highlights";
+          factLabel.textContent = "Fly to a landmark";
           body.append(factLabel, facts);
         }
         details.append(summary, body);
@@ -2266,6 +2963,13 @@
         width = SHOWCASE_PRESET.stageWidth;
         height = SHOWCASE_PRESET.stageHeight;
         if (showcaseRenderer) showcaseRenderer.resize(width, height);
+        travelCanvas.width = width;
+        travelCanvas.height = height;
+        travelContext.setTransform(1, 0, 0, 1, 0, 0);
+        travelOverlayDirty = false;
+        travelEpisodes.length = 0;
+        travelScheduleMinute = 0;
+        travelScheduleComplete = false;
         fitShowcaseStage();
         updateSceneViewport();
         if (reducedMotionQuery.matches) applyShowcaseCamera(0);
@@ -2276,6 +2980,7 @@
       width = window.innerWidth; height = window.innerHeight;
       canvas.width = Math.round(width * dpr); canvas.height = Math.round(height * dpr);
       context.setTransform(dpr, 0, 0, dpr, 0, 0);
+      travelOverlayDirty = false;
       if (explorerRenderer) explorerRenderer.resize();
       updateSceneViewport();
       requestRender();
@@ -2289,6 +2994,13 @@
         sceneCenterY = height * activeShowcaseLayout.centerYPercent / 100;
         return;
       }
+      if (document.body.classList.contains("is-ui-hidden")) {
+        sceneRight = width;
+        sceneBottom = height;
+        sceneCenterX = width / 2;
+        sceneCenterY = height / 2;
+        return;
+      }
       const panelBounds = panel.getBoundingClientRect();
       sceneRight = width > 760 && !panel.classList.contains("is-collapsed") ? panelBounds.left - 14 : width;
       sceneBottom = width <= 760 && !panel.classList.contains("is-collapsed") ? panelBounds.top - 12 : height;
@@ -2304,11 +3016,13 @@
       panX = toX - sceneCenterX - (fromX - sceneCenterX - panX) * scale;
       panY = toY - sceneCenterY - (fromY - sceneCenterY - panY) * scale;
       zoom = clampedZoom;
+      rebaseExplorerTravelAdmission();
     }
 
     function panBy(dx, dy) {
       panX += dx;
       panY += dy;
+      rebaseExplorerTravelAdmission();
     }
 
     function isEditableTarget(target) {
@@ -2339,13 +3053,15 @@
     function handleViewShortcut(event) {
       if (pointers.size > 0) return false;
       if (event.metaKey || event.ctrlKey || event.altKey) return false;
+      const uiHidden = document.body.classList.contains("is-ui-hidden");
       if (isEditableTarget(event.target)) return false;
       if (event.key === "+" || event.key === "=") { cancelCameraFlight(); zoomBetween(zoom * ZOOM_STEP, sceneCenterX, sceneCenterY); }
       else if (event.key === "-") { cancelCameraFlight(); zoomBetween(zoom / ZOOM_STEP, sceneCenterX, sceneCenterY); }
       else if (event.key === "0") resetView();
       else if (event.key.toLowerCase() === "p") { cancelCameraFlight(); setNavigationMode(navigationMode === "pan" ? "orbit" : "pan"); }
-      else if (event.key === "/") focusSearch();
-      else if (event.key === "?") { if (!event.repeat) toggleHelp(); }
+      else if (event.key === "/") { if (uiHidden) setUiHidden(false); focusSearch(); }
+      else if (event.key.toLowerCase() === "h") setUiHidden(!uiHidden);
+      else if (event.key === "?" && !uiHidden) { if (!event.repeat) toggleHelp(); }
       else if ((event.key === "Enter" || event.key.toLowerCase() === "f") && selectedPoint?.category === "dependencies") {
         if (event.key === "Enter" && event.target !== canvas && event.target !== document.body) return false;
         if (selectedPoint.systemHub && !selectedPoint.packageHub) focusDependencySystem(selectedPoint.systemIndex);
@@ -2391,14 +3107,7 @@
       canvas.classList.toggle("is-pan", panning);
     }
 
-    function project(point, matrix, out) {
-      const position = point.position;
-      let anchor = null;
-      if (expandedPackageIndex !== null && point.packageIndex === expandedPackageIndex) anchor = packageAnchors[expandedPackageIndex];
-      else if (expandedPackageIndex === null && expandedSystemIndex !== null && point.systemIndex === expandedSystemIndex) anchor = systemAnchors[expandedSystemIndex];
-      const positionX = anchor ? anchor[0] + (position[0] - anchor[0]) * DEPENDENCY_EXPANSION : position[0];
-      const positionY = anchor ? anchor[1] + (position[1] - anchor[1]) * DEPENDENCY_EXPANSION : position[1];
-      const positionZ = anchor ? anchor[2] + (position[2] - anchor[2]) * DEPENDENCY_EXPANSION : position[2];
+    function projectCoordinates(positionX, positionY, positionZ, matrix, out, camera = null) {
       const [cy, sy, cp, sp] = matrix;
       const x1 = positionX * cy - positionZ * sy;
       const z1 = positionX * sy + positionZ * cy;
@@ -2406,14 +3115,552 @@
       const z2 = positionY * sp + z1 * cp;
       const depth = cameraDistance - z2;
       if (depth <= 35) return null;
-      const perspective = cameraFocalLength / depth * zoom;
+      const perspective = cameraFocalLength / depth * (camera?.zoom ?? zoom);
       const projected = out || [0, 0, 0];
-      projected[0] = sceneCenterX + panX + x1 * perspective;
-      projected[1] = sceneCenterY + panY + y2 * perspective;
+      projected[0] = sceneCenterX + (camera?.panX ?? panX) + x1 * perspective;
+      projected[1] = sceneCenterY + (camera?.panY ?? panY) + y2 * perspective;
       projected[2] = perspective;
       return projected;
     }
 
+    function dependencyExpansionAnchor(packageIndex, systemIndex) {
+      if (expandedPackageIndex !== null && packageIndex === expandedPackageIndex) return packageAnchors[expandedPackageIndex];
+      if (expandedPackageIndex === null && expandedSystemIndex !== null && systemIndex === expandedSystemIndex) return systemAnchors[expandedSystemIndex];
+      return null;
+    }
+
+    function scenePointWorldPosition(renderIndex, spinElapsed = dependencySpinElapsed, out = [0, 0, 0]) {
+      const offset = renderIndex * SCENE_POINT_STRIDE;
+      let positionX = sceneData[offset];
+      let positionY = sceneData[offset + 1];
+      let positionZ = sceneData[offset + 2];
+      const packageIndex = sceneData[offset + 7];
+      const systemIndex = sceneData[offset + 8];
+      if (sceneData[offset + 5] === categoryCodes.dependencies && sceneData[offset + 6] < 4 && packageIndex >= 0) {
+        const spun = dependencySpunPosition(positionX, positionY, positionZ, packageIndex, spinElapsed, dependencySpinScratch);
+        positionX = spun[0];
+        positionY = spun[1];
+        positionZ = spun[2];
+      }
+      const anchor = dependencyExpansionAnchor(packageIndex, systemIndex);
+      out[0] = anchor ? anchor[0] + (positionX - anchor[0]) * DEPENDENCY_EXPANSION : positionX;
+      out[1] = anchor ? anchor[1] + (positionY - anchor[1]) * DEPENDENCY_EXPANSION : positionY;
+      out[2] = anchor ? anchor[2] + (positionZ - anchor[2]) * DEPENDENCY_EXPANSION : positionZ;
+      return out;
+    }
+
+    function projectScenePoint(renderIndex, matrix, out, camera = null, spinElapsed = dependencySpinElapsed) {
+      const position = scenePointWorldPosition(renderIndex, spinElapsed, scenePointPositionScratch);
+      return projectCoordinates(position[0], position[1], position[2], matrix, out, camera);
+    }
+
+    function project(point, matrix, out) {
+      const position = point.position;
+      const anchor = dependencyExpansionAnchor(point.packageIndex, point.systemIndex);
+      const positionX = anchor ? anchor[0] + (position[0] - anchor[0]) * DEPENDENCY_EXPANSION : position[0];
+      const positionY = anchor ? anchor[1] + (position[1] - anchor[1]) * DEPENDENCY_EXPANSION : position[1];
+      const positionZ = anchor ? anchor[2] + (position[2] - anchor[2]) * DEPENDENCY_EXPANSION : position[2];
+      return projectCoordinates(positionX, positionY, positionZ, matrix, out);
+    }
+
+    const travelEpisodes = [];
+    let travelScheduleMinute = 0;
+    let travelScheduleComplete = false;
+    let explorerTravelAdmissionOrigin = null;
+    let explorerTravelElapsed = 0;
+    let explorerTravelLastTimestamp = null;
+    let travelOverlayDirty = false;
+
+    function resetExplorerTravel() {
+      if (!interactiveMode) return;
+      travelEpisodes.length = 0;
+      travelScheduleMinute = 0;
+      travelScheduleComplete = false;
+      explorerTravelAdmissionOrigin = null;
+      explorerTravelElapsed = 0;
+      explorerTravelLastTimestamp = null;
+    }
+
+    function travelLinksShareEndpoint(left, right) {
+      return left.departureIndex === right.departureIndex ||
+        left.departureIndex === right.arrivalIndex ||
+        left.arrivalIndex === right.departureIndex ||
+        left.arrivalIndex === right.arrivalIndex;
+    }
+
+    function travelEpisodeSeed(episodeIndex) {
+      return hash(hash(travelScheduleSeed, travelScheduleMinute + 1), episodeIndex + 1);
+    }
+
+    function travelLinkCandidatesForEpisode(episodeIndex, selected) {
+      const episodeSeed = travelEpisodeSeed(episodeIndex);
+      const preferencePhase = hash(travelScheduleSeed, travelScheduleMinute + 1) & 3;
+      const dependencyPreferred = (episodeIndex + preferencePhase) % 4 !== 0;
+      const primaryPool = dependencyPreferred ? dependencyTravelLinkIndices : workspaceTravelLinkIndices;
+      const secondaryPool = dependencyPreferred ? workspaceTravelLinkIndices : dependencyTravelLinkIndices;
+      const candidates = [];
+      const avoidSelected = selected.size < constantReferenceLinks.length;
+      for (const [pool, channel] of [
+        [primaryPool, TRAVEL_PRESET.candidateChannel],
+        [secondaryPool, TRAVEL_PRESET.candidateChannel + 1],
+      ]) {
+        const start = Math.floor(unit(episodeSeed, channel) * pool.length);
+        for (let offset = 0; offset < pool.length && candidates.length < TRAVEL_PRESET.admissionCandidateLimit; offset += 1) {
+          const linkIndex = pool[(start + offset) % pool.length];
+          if (avoidSelected && selected.has(linkIndex)) continue;
+          candidates.push(linkIndex);
+        }
+      }
+      return candidates;
+    }
+
+    function travelEpisodeStartsAt(episodeIndex) {
+      const episodeSeed = travelEpisodeSeed(episodeIndex);
+      const baseInterval = TRAVEL_PRESET.flightDurationMs / travelFlightLimit;
+      const minuteStart = travelScheduleMinute * SHOWCASE_PRESET.durationMs;
+      let startsAt;
+      if (episodeIndex === 0) {
+        startsAt = minuteStart + baseInterval * (
+          TRAVEL_PRESET.initialDelayMin +
+          unit(episodeSeed, TRAVEL_PRESET.initialDelayChannel) * TRAVEL_PRESET.initialDelayRange
+        );
+      } else {
+        startsAt = travelEpisodes[episodeIndex - 1].startsAt + baseInterval * (
+          TRAVEL_PRESET.intervalMin +
+          unit(episodeSeed, TRAVEL_PRESET.intervalChannel) * TRAVEL_PRESET.intervalRange
+        );
+      }
+      if (episodeIndex >= travelFlightLimit) {
+        const handoffAt = travelEpisodes[episodeIndex - travelFlightLimit].startsAt +
+          TRAVEL_PRESET.flightDurationMs + TRAVEL_PRESET.handoffGapMinMs +
+          unit(episodeSeed, TRAVEL_PRESET.handoffGapChannel) * TRAVEL_PRESET.handoffGapRangeMs;
+        startsAt = Math.max(startsAt, handoffAt);
+      }
+      const latestStart = minuteStart + SHOWCASE_PRESET.durationMs -
+        TRAVEL_PRESET.flightDurationMs - TRAVEL_PRESET.loopQuietMs;
+      return startsAt <= latestStart ? startsAt : minuteStart + SHOWCASE_PRESET.durationMs;
+    }
+
+    function travelEpisodeUpperBound(elapsed) {
+      let low = 0;
+      let high = travelEpisodes.length;
+      while (low < high) {
+        const middle = (low + high) >>> 1;
+        if (travelEpisodes[middle].startsAt <= elapsed) low = middle + 1;
+        else high = middle;
+      }
+      return low;
+    }
+
+    function travelEpisodesThrough(elapsed) {
+      if (!constantReferenceLinks.length || !Number.isFinite(elapsed)) return [];
+      const normalizedElapsed = showcaseMode
+        ? ((elapsed % SHOWCASE_PRESET.durationMs) + SHOWCASE_PRESET.durationMs) % SHOWCASE_PRESET.durationMs
+        : Math.max(0, elapsed);
+      ensureTravelEpisodesThrough(normalizedElapsed);
+      return travelEpisodes.slice(0, travelEpisodeUpperBound(normalizedElapsed));
+    }
+
+    function travelStatesAt(elapsed) {
+      if (!constantReferenceLinks.length || !Number.isFinite(elapsed)) return [];
+      const normalizedElapsed = showcaseMode
+        ? ((elapsed % SHOWCASE_PRESET.durationMs) + SHOWCASE_PRESET.durationMs) % SHOWCASE_PRESET.durationMs
+        : Math.max(0, elapsed);
+      ensureTravelEpisodesThrough(normalizedElapsed);
+      const states = [];
+      for (let index = travelEpisodeUpperBound(normalizedElapsed) - 1; index >= 0; index -= 1) {
+        const episode = travelEpisodes[index];
+        const flightElapsed = normalizedElapsed - episode.startsAt;
+        if (flightElapsed >= TRAVEL_PRESET.flightDurationMs) break;
+        if (!episode.route) continue;
+        const rawProgress = flightElapsed / TRAVEL_PRESET.flightDurationMs;
+        const progress = rawProgress - TRAVEL_PRESET.progressEase * Math.sin(Math.PI * 2 * rawProgress);
+        const fadeInProgress = Math.min(1, rawProgress / TRAVEL_PRESET.fadeInFraction);
+        const fadeOutProgress = Math.max(0, (rawProgress - TRAVEL_PRESET.fadeOutStart) / (1 - TRAVEL_PRESET.fadeOutStart));
+        const fadeIn = fadeInProgress * fadeInProgress * (3 - 2 * fadeInProgress);
+        const fadeOut = 1 - fadeOutProgress * fadeOutProgress * (3 - 2 * fadeOutProgress);
+        states.push({ episode, progress, visibility: fadeIn * fadeOut });
+      }
+      return states.reverse();
+    }
+
+    function travelEmphasis(category) {
+      if (!interactiveMode) return 1;
+      if (expandedPackageIndex !== null || expandedSystemIndex !== null) return contextVisibility.package;
+      if (selectionLocked && selectedPoint) return contextVisibility.selection;
+      if (focusedCategory) return category === focusedCategory ? 1 : contextVisibility.category;
+      return 1;
+    }
+
+    function quadraticCoordinate(start, control, end, progress) {
+      const inverse = 1 - progress;
+      return inverse * inverse * start + 2 * inverse * progress * control + progress * progress * end;
+    }
+
+    function travelGuideFits(route, right, bottom, inset) {
+      return Math.min(route.departure[0], route.controlX, route.arrival[0]) >= inset &&
+        Math.max(route.departure[0], route.controlX, route.arrival[0]) <= right - inset &&
+        Math.min(route.departure[1], route.controlY, route.arrival[1]) >= inset &&
+        Math.max(route.departure[1], route.controlY, route.arrival[1]) <= bottom - inset;
+    }
+
+    function travelGeometry(departure, arrival, arcDirection) {
+      const dx = arrival[0] - departure[0];
+      const dy = arrival[1] - departure[1];
+      const distance = Math.hypot(dx, dy);
+      if (distance < 1) return null;
+
+      const midpointX = (departure[0] + arrival[0]) / 2;
+      const midpointY = (departure[1] + arrival[1]) / 2;
+      const arcHeight = Math.min(
+        TRAVEL_PRESET.arcHeightMax,
+        Math.max(TRAVEL_PRESET.arcHeightMin, distance * TRAVEL_PRESET.arcHeightPercent / 100),
+      );
+      const direction = arcDirection < 0 ? -1 : 1;
+      return {
+        departure,
+        arrival,
+        controlX: midpointX - dy / distance * arcHeight * direction,
+        controlY: midpointY + dx / distance * arcHeight * direction,
+      };
+    }
+
+    function prepareTravelGeometry(link, episodeIndex, departure, arrival, right, bottom, inset = 8) {
+      const visible = point => point[0] >= inset && point[0] <= right - inset && point[1] >= inset && point[1] <= bottom - inset;
+      if (!visible(departure) || !visible(arrival)) return null;
+
+      const positiveRoute = travelGeometry(departure, arrival, 1);
+      if (!positiveRoute) return null;
+      const distance = Math.hypot(arrival[0] - departure[0], arrival[1] - departure[1]);
+      if (distance < TRAVEL_PRESET.minimumRouteLengthPx) return null;
+      const midpointX = (departure[0] + arrival[0]) / 2;
+      const midpointY = (departure[1] + arrival[1]) / 2;
+      const negativeX = midpointX * 2 - positiveRoute.controlX;
+      const negativeY = midpointY * 2 - positiveRoute.controlY;
+      const centerX = right / 2;
+      const centerY = bottom / 2;
+      const positiveClearance = Math.hypot(positiveRoute.controlX - centerX, positiveRoute.controlY - centerY);
+      const negativeClearance = Math.hypot(negativeX - centerX, negativeY - centerY);
+      const linkSeed = hash((link.arrivalIndex ^ Math.imul(link.departureIndex + 1, 0x9e3779b9)) >>> 0);
+      const seededDirection = unit(
+        hash(linkSeed, episodeIndex + 1),
+        TRAVEL_PRESET.arcDirectionChannel,
+      ) < 0.5 ? -1 : 1;
+      const arcDirection = Math.abs(positiveClearance - negativeClearance) < 1
+        ? seededDirection
+        : positiveClearance > negativeClearance ? 1 : -1;
+      return arcDirection > 0 ? positiveRoute : travelGeometry(departure, arrival, -1);
+    }
+
+    function beginExplorerTravelAdmission(elapsed) {
+      if (explorerTravelAdmissionOrigin) return;
+      const yawDirection = screenRotationYawSign(pitch);
+      explorerTravelAdmissionOrigin = {
+        yaw: yaw - yawDirection * DRIFT_RADIANS_PER_SECOND * elapsed / 1000,
+        yawDirection,
+        pitch,
+        zoom,
+        panX,
+        panY,
+        spinElapsed: dependencySpinElapsed - elapsed,
+      };
+    }
+
+    function rebaseExplorerTravelAdmission() {
+      if (!explorerTravelAdmissionOrigin) return;
+      const yawDirection = screenRotationYawSign(pitch);
+      explorerTravelAdmissionOrigin.yaw = yaw - yawDirection * DRIFT_RADIANS_PER_SECOND *
+        explorerTravelElapsed / 1000;
+      explorerTravelAdmissionOrigin.yawDirection = yawDirection;
+      explorerTravelAdmissionOrigin.pitch = pitch;
+      explorerTravelAdmissionOrigin.zoom = zoom;
+      explorerTravelAdmissionOrigin.panX = panX;
+      explorerTravelAdmissionOrigin.panY = panY;
+    }
+
+    function travelAdmissionCameraAt(elapsed) {
+      if (showcaseMode) return showcaseCameraState(showcaseFrameProgress(elapsed));
+      const origin = explorerTravelAdmissionOrigin;
+      return {
+        yaw: origin.yaw + origin.yawDirection * DRIFT_RADIANS_PER_SECOND * elapsed / 1000,
+        pitch: origin.pitch,
+        zoom: origin.zoom,
+        panX: origin.panX,
+        panY: origin.panY,
+      };
+    }
+
+    function unprojectCoordinates(screenX, screenY, depth, matrix, camera) {
+      const [cy, sy, cp, sp] = matrix;
+      const perspective = cameraFocalLength / depth * camera.zoom;
+      const x1 = (screenX - sceneCenterX - camera.panX) / perspective;
+      const y2 = (screenY - sceneCenterY - camera.panY) / perspective;
+      const z2 = cameraDistance - depth;
+      const positionY = y2 * cp + z2 * sp;
+      const z1 = -y2 * sp + z2 * cp;
+      return [x1 * cy + z1 * sy, positionY, -x1 * sy + z1 * cy];
+    }
+
+    function prepareTravelRoute(episodeIndex, episode, right, bottom) {
+      const link = constantReferenceLinks[episode.linkIndex];
+      const departureCategory = travelEndpointCategory(link.departureIndex);
+      const arrivalCategory = travelEndpointCategory(link.arrivalIndex);
+      if (!visibleCategories[departureCategory] || !visibleCategories[arrivalCategory]) return null;
+      const midpoint = episode.startsAt + TRAVEL_PRESET.flightDurationMs / 2;
+      const camera = travelAdmissionCameraAt(midpoint);
+      const matrix = [
+        Math.cos(camera.yaw),
+        Math.sin(camera.yaw),
+        Math.cos(camera.pitch),
+        Math.sin(camera.pitch),
+      ];
+      const spinOrigin = showcaseMode ? 0 : explorerTravelAdmissionOrigin.spinElapsed;
+      const departure = scenePointWorldPosition(
+        link.departureIndex,
+        spinOrigin + episode.startsAt,
+      );
+      const arrival = scenePointWorldPosition(
+        link.arrivalIndex,
+        spinOrigin + episode.startsAt + TRAVEL_PRESET.flightDurationMs,
+      );
+      const projectedDeparture = projectCoordinates(
+        departure[0], departure[1], departure[2], matrix, [0, 0, 0], camera,
+      );
+      const projectedArrival = projectCoordinates(
+        arrival[0], arrival[1], arrival[2], matrix, [0, 0, 0], camera,
+      );
+      if (!projectedDeparture || !projectedArrival) return null;
+      const admittedRoute = prepareTravelGeometry(
+        link,
+        episodeIndex,
+        projectedDeparture,
+        projectedArrival,
+        right,
+        bottom,
+        TRAVEL_PRESET.admissionInsetPx,
+      );
+      if (!admittedRoute || !travelGuideFits(
+        admittedRoute,
+        right,
+        bottom,
+        TRAVEL_PRESET.admissionInsetPx,
+      )) return null;
+      const departureDepth = cameraFocalLength * camera.zoom / projectedDeparture[2];
+      const arrivalDepth = cameraFocalLength * camera.zoom / projectedArrival[2];
+      const control = unprojectCoordinates(
+        admittedRoute.controlX,
+        admittedRoute.controlY,
+        (departureDepth + arrivalDepth) / 2,
+        matrix,
+        camera,
+      );
+      return { departure, control, arrival };
+    }
+
+    function ensureTravelEpisodesThrough(elapsed) {
+      const minute = Math.floor(elapsed / SHOWCASE_PRESET.durationMs);
+      if (travelScheduleMinute !== minute) {
+        travelEpisodes.length = 0;
+        travelScheduleMinute = minute;
+        travelScheduleComplete = false;
+      }
+      if (!showcaseMode) beginExplorerTravelAdmission(elapsed);
+      const right = interactiveMode ? sceneRight : width;
+      const bottom = interactiveMode ? sceneBottom : height;
+      while (!travelScheduleComplete && (!travelEpisodes.length || travelEpisodes.at(-1).startsAt <= elapsed)) {
+        const episodeIndex = travelEpisodes.length;
+        const startsAt = travelEpisodeStartsAt(episodeIndex);
+        if (startsAt >= (minute + 1) * SHOWCASE_PRESET.durationMs) {
+          travelScheduleComplete = true;
+          break;
+        }
+        const overlapping = [];
+        for (let index = travelEpisodes.length - 1; index >= 0; index -= 1) {
+          const other = travelEpisodes[index];
+          if (other.startsAt + TRAVEL_PRESET.flightDurationMs <= startsAt) break;
+          if (other.route) overlapping.push(other);
+        }
+        const selected = new Set(overlapping.map(episode => episode.linkIndex));
+        const candidates = travelLinkCandidatesForEpisode(episodeIndex, selected);
+        let chosen = null;
+        for (const linkIndex of candidates) {
+          const episode = {
+            linkIndex,
+            startsAt,
+            route: null,
+          };
+          chosen ||= episode;
+          if (overlapping.length >= travelFlightLimit || overlapping.some(other => travelLinksShareEndpoint(
+            constantReferenceLinks[other.linkIndex],
+            constantReferenceLinks[episode.linkIndex],
+          ))) {
+            continue;
+          }
+          const route = prepareTravelRoute(episodeIndex, episode, right, bottom);
+          if (!route) continue;
+          episode.route = route;
+          chosen = episode;
+          break;
+        }
+        if (!chosen) break;
+        travelEpisodes.push(chosen);
+      }
+    }
+
+    function projectTravelRoutePoint(route, progress, matrix, out) {
+      return projectCoordinates(
+        quadraticCoordinate(route.departure[0], route.control[0], route.arrival[0], progress),
+        quadraticCoordinate(route.departure[1], route.control[1], route.arrival[1], progress),
+        quadraticCoordinate(route.departure[2], route.control[2], route.arrival[2], progress),
+        matrix,
+        out,
+      );
+    }
+
+    function drawTravelHead(context, x, y, angle, colourChannels, emphasis) {
+      const length = TRAVEL_PRESET.headLengthPx;
+      const halfWidth = TRAVEL_PRESET.headWidthPx / 2;
+      context.save();
+      context.translate(x, y);
+      context.rotate(angle);
+      context.shadowColor = `rgba(${colourChannels},${(TRAVEL_PRESET.headGlowAlpha * emphasis).toFixed(4)})`;
+      context.shadowBlur = TRAVEL_PRESET.headGlowBlur;
+      context.fillStyle = `rgba(${colourChannels},${(TRAVEL_PRESET.headAlpha * emphasis).toFixed(4)})`;
+      context.beginPath();
+      context.moveTo(-length, 0);
+      context.bezierCurveTo(-length * 0.66, -halfWidth * 0.08, -length * 0.43, -halfWidth, -length * 0.18, -halfWidth);
+      context.bezierCurveTo(-length * 0.06, -halfWidth, 0, -halfWidth * 0.52, 0, 0);
+      context.bezierCurveTo(0, halfWidth * 0.52, -length * 0.06, halfWidth, -length * 0.18, halfWidth);
+      context.bezierCurveTo(-length * 0.43, halfWidth, -length * 0.66, halfWidth * 0.08, -length, 0);
+      context.closePath();
+      context.fill();
+      context.restore();
+    }
+
+    function travelCategoryAlpha(category) {
+      if (category === "dependencies") return 0.82;
+      if (category === "tests") return 1.08;
+      return 1;
+    }
+
+    function hideTravelOverlay() {
+      if (travelOverlayDirty) {
+        travelContext.clearRect(0, 0, width, height);
+        travelOverlayDirty = false;
+      }
+    }
+
+    function explorerTravelElapsedAt(timestamp, enabled) {
+      if (!enabled) {
+        resetExplorerTravel();
+        return 0;
+      }
+      if (!Number.isFinite(timestamp)) return explorerTravelElapsed;
+      const delta = explorerTravelLastTimestamp === null
+        ? 1000 / 60
+        : clamp(timestamp - explorerTravelLastTimestamp, 0, MAX_DRIFT_DELTA_MS);
+      explorerTravelElapsed += delta;
+      explorerTravelLastTimestamp = timestamp;
+      return explorerTravelElapsed;
+    }
+
+    function drawTravelOverlay(elapsed, enabled) {
+      if (!enabled || reducedMotionQuery.matches) {
+        hideTravelOverlay();
+        return;
+      }
+      if (!constantReferenceLinks.length || !Number.isFinite(elapsed)) {
+        hideTravelOverlay();
+        return;
+      }
+
+      const states = travelStatesAt(elapsed);
+      if (!states.length) {
+        hideTravelOverlay();
+        return;
+      }
+      if (travelOverlayDirty) {
+        travelContext.clearRect(0, 0, width, height);
+        travelOverlayDirty = false;
+      }
+      let drewTravel = false;
+      travelContext.save();
+      travelContext.globalCompositeOperation = "lighter";
+      travelContext.lineCap = "round";
+      travelContext.shadowColor = "transparent";
+      travelContext.shadowBlur = 0;
+      const matrix = viewMatrix();
+      for (const state of states) {
+        const { episode, progress, visibility } = state;
+        if (visibility < TRAVEL_PRESET.minimumVisibility) continue;
+        const route = episode.route;
+        const head = projectTravelRoutePoint(route, progress, matrix, [0, 0, 0]);
+        const tangentProgress = progress < 0.999 ? progress + 0.001 : progress - 0.001;
+        const tangent = projectTravelRoutePoint(route, tangentProgress, matrix, [0, 0, 0]);
+        const pixelsPerProgress = head && tangent
+          ? Math.max(1, Math.hypot(tangent[0] - head[0], tangent[1] - head[1]) /
+            Math.abs(tangentProgress - progress))
+          : TRAVEL_PRESET.tailLengthPx / TRAVEL_PRESET.tailFraction;
+        const link = constantReferenceLinks[episode.linkIndex];
+        const departureCategory = travelEndpointCategory(link.departureIndex);
+        const arrivalCategory = travelEndpointCategory(link.arrivalIndex);
+        const departureColour = colours[departureCategory];
+        const departureColourChannels = departureColour.join(",");
+        const emphasis = Math.min(travelEmphasis(departureCategory), travelEmphasis(arrivalCategory)) *
+          travelCategoryAlpha(departureCategory) * visibility;
+
+        const wakeEnd = Math.max(
+          0,
+          progress - TRAVEL_PRESET.headLengthPx * (1 - TRAVEL_PRESET.tailHeadOverlap) / pixelsPerProgress,
+        );
+        const drawnTailStart = Math.max(
+          0,
+          wakeEnd - TRAVEL_PRESET.tailFraction,
+          wakeEnd - TRAVEL_PRESET.tailLengthPx / pixelsPerProgress,
+        );
+        let previous = [0, 0, 0];
+        let current = [0, 0, 0];
+        let previousVisible = Boolean(projectTravelRoutePoint(route, drawnTailStart, matrix, previous));
+        for (let segment = 1; segment <= TRAVEL_PRESET.tailSegments; segment += 1) {
+          const position = segment / TRAVEL_PRESET.tailSegments;
+          const weight = 0.12 + 0.88 * Math.pow(position, 1.45);
+          const segmentProgress = drawnTailStart + (wakeEnd - drawnTailStart) * position;
+          const currentVisible = Boolean(projectTravelRoutePoint(route, segmentProgress, matrix, current));
+          if (previousVisible && currentVisible) {
+            travelContext.beginPath();
+            travelContext.moveTo(previous[0], previous[1]);
+            travelContext.lineTo(current[0], current[1]);
+            travelContext.strokeStyle = `rgba(${departureColourChannels},${(TRAVEL_PRESET.tailAlpha * emphasis * weight).toFixed(4)})`;
+            travelContext.lineWidth = TRAVEL_PRESET.lineWidth * (0.28 + weight * 0.72);
+            travelContext.stroke();
+            drewTravel = true;
+          }
+          const swap = previous;
+          previous = current;
+          current = swap;
+          previousVisible = currentVisible;
+        }
+        if (!head || !tangent) continue;
+        const tangentX = tangentProgress > progress ? tangent[0] - head[0] : head[0] - tangent[0];
+        const tangentY = tangentProgress > progress ? tangent[1] - head[1] : head[1] - tangent[1];
+        drawTravelHead(
+          travelContext,
+          head[0],
+          head[1],
+          Math.atan2(tangentY, tangentX),
+          departureColourChannels,
+          emphasis,
+        );
+        drewTravel = true;
+      }
+      travelContext.restore();
+      if (!drewTravel) {
+        hideTravelOverlay();
+        return;
+      }
+      travelOverlayDirty = true;
+    }
+
     function updateZoomReadout() {
       zoomReadout ||= document.getElementById("zoom-level");
       const text = `${Math.round(zoom * 100)}%`;
@@ -2422,9 +3669,14 @@
       zoomReadout.value = text;
     }
 
-    function updateExplorerOverlay() {
-      context.clearRect(0, 0, width, height);
-      if (!selectedPoint) return;
+    function updateExplorerOverlay(timestamp) {
+      if (constantReferenceLinks.length) {
+        const travelEnabled = drifting;
+        drawTravelOverlay(explorerTravelElapsedAt(timestamp, travelEnabled), travelEnabled);
+      } else {
+        hideTravelOverlay();
+      }
+      if (document.body.classList.contains("is-ui-hidden") || !selectedPoint) return;
       const screen = screenDataFor(selectedPoint, viewMatrix(), 0);
       if (!screen) return;
       const [x, y, size] = screen;
@@ -2437,41 +3689,58 @@
       context.strokeStyle = colourStyles[selectedPoint.category]; context.lineWidth = 1; context.stroke();
       context.globalAlpha = 1;
       context.globalCompositeOperation = "source-over";
+      travelOverlayDirty = true;
     }
 
     function render(timestamp) {
       animationFrame = 0;
       if (showcaseMode) {
+        const elapsed = showcaseStartedAt === null ? 0 : Math.max(0, timestamp - showcaseStartedAt);
+        dependencySpinElapsed = reducedMotionQuery.matches ? 0 : elapsed % SHOWCASE_PRESET.durationMs;
         if (showcaseRenderer) showcaseRenderer.render();
+        if (constantReferenceLinks.length) drawTravelOverlay(elapsed, Boolean(showcaseRenderer));
         return;
       }
       if (!explorerRenderer) return;
       const driftAdvanced = advanceExplorerDrift(timestamp);
+      const spinAdvanced = advanceDependencySpin(timestamp);
       updateCameraFlight(timestamp);
       updateZoomReadout();
       explorerRenderer.render();
-      updateExplorerOverlay();
+      updateExplorerOverlay(timestamp);
       if (selectedPoint) {
         if (cameraFlight) tooltip.hidden = true;
         else positionTooltip(selectedPoint);
       }
-      if (cameraFlight || driftAdvanced) requestRender();
+      if (cameraFlight || driftAdvanced || spinAdvanced) requestRender();
     }
 
     function requestRender() {
       if (!animationFrame) animationFrame = requestAnimationFrame(render);
     }
 
-    function applyShowcaseCamera(progress) {
+    const showcaseCameraScratch = {};
+
+    function showcaseCameraState(progress, out = {}) {
       const wrapped = ((Number(progress) % 1) + 1) % 1;
       const yawSign = screenRotationYawSign(SHOWCASE_PRESET.elevationDegrees * Math.PI / 180);
       const phase = wrapped * Math.PI * 2 * SHOWCASE_PRESET.turns * yawSign;
       const viewportScale = Math.min(width / SHOWCASE_PRESET.layoutReferenceWidth, height / SHOWCASE_PRESET.layoutReferenceHeight);
-      yaw = SHOWCASE_PRESET.startAngleDegrees * Math.PI / 180 + phase;
-      pitch = (SHOWCASE_PRESET.elevationDegrees + Math.sin(phase) * SHOWCASE_PRESET.elevationSwayDegrees) * Math.PI / 180;
-      zoom = SHOWCASE_PRESET.zoom * (1 + ((1 - Math.cos(phase)) / 2) * SHOWCASE_PRESET.zoomBreathPercent / 100) * viewportScale;
-      panX = 0;
-      panY = 0;
+      out.yaw = SHOWCASE_PRESET.startAngleDegrees * Math.PI / 180 + phase;
+      out.pitch = (SHOWCASE_PRESET.elevationDegrees + Math.sin(phase) * SHOWCASE_PRESET.elevationSwayDegrees) * Math.PI / 180;
+      out.zoom = SHOWCASE_PRESET.zoom * (1 + ((1 - Math.cos(phase)) / 2) * SHOWCASE_PRESET.zoomBreathPercent / 100) * viewportScale;
+      out.panX = 0;
+      out.panY = 0;
+      return out;
+    }
+
+    function applyShowcaseCamera(progress) {
+      const camera = showcaseCameraState(progress, showcaseCameraScratch);
+      yaw = camera.yaw;
+      pitch = camera.pitch;
+      zoom = camera.zoom;
+      panX = camera.panX;
+      panY = camera.panY;
     }
 
     function hideShowcaseAnnotation() {
@@ -2513,12 +3782,7 @@
       return null;
     }
 
-    function updateShowcaseAnnotation(timestamp) {
-      if (reducedMotionQuery.matches || !showcaseAnnotation || showcaseStartedAt === null) {
-        hideShowcaseAnnotation();
-        return;
-      }
-      const elapsed = Math.max(0, timestamp - showcaseStartedAt);
+    function trackShowcaseAnnotation(elapsed) {
       const slot = Math.floor(elapsed / SHOWCASE_ANNOTATION_PRESET.slotDurationMs);
       const slotElapsed = elapsed % SHOWCASE_ANNOTATION_PRESET.slotDurationMs;
       const matrix = viewMatrix();
@@ -2534,31 +3798,44 @@
           showcaseAnnotationName.textContent = annotation.name;
         }
       }
-      if (!activeShowcaseAnnotation) return;
+      if (!activeShowcaseAnnotation) return null;
 
       const projected = project(activeShowcaseAnnotation.annotation.point, matrix);
-      if (!projected) {
+      if (!projected) return null;
+      const [x, y] = projected;
+      showcaseAnnotation.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+      return { slotElapsed, fits: showcaseAnnotationFits(x, y, activeShowcaseAnnotation.side) };
+    }
+
+    function updateShowcaseAnnotation(timestamp) {
+      if (reducedMotionQuery.matches || !showcaseAnnotation || showcaseStartedAt === null) {
         hideShowcaseAnnotation();
         return;
       }
-      const [x, y] = projected;
-      showcaseAnnotation.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-      const revealed = slotElapsed >= SHOWCASE_ANNOTATION_PRESET.revealStartMs &&
-        slotElapsed <= SHOWCASE_ANNOTATION_PRESET.revealEndMs &&
-        showcaseAnnotationFits(x, y, activeShowcaseAnnotation.side);
+      const tracked = trackShowcaseAnnotation(Math.max(0, timestamp - showcaseStartedAt));
+      if (!tracked) {
+        hideShowcaseAnnotation();
+        return;
+      }
+      const revealed = tracked.slotElapsed >= SHOWCASE_ANNOTATION_PRESET.revealStartMs &&
+        tracked.slotElapsed <= SHOWCASE_ANNOTATION_PRESET.revealEndMs &&
+        tracked.fits;
       showcaseAnnotation.classList.toggle("is-visible", revealed);
       document.documentElement.dataset.showcaseAnnotation = revealed
         ? activeShowcaseAnnotation.annotation.name
         : "hidden";
     }
 
+    function showcaseFrameProgress(elapsed) {
+      const frameCount = SHOWCASE_PRESET.targetFps * SHOWCASE_PRESET.durationMs / 1000;
+      const rawProgress = (elapsed % SHOWCASE_PRESET.durationMs) / SHOWCASE_PRESET.durationMs;
+      return Math.floor(rawProgress * frameCount) / frameCount;
+    }
+
     function renderShowcase(timestamp) {
-      if (!showcaseRenderer) return;
+      if (!showcaseRenderer || clipMode) return;
       showcaseStartedAt ??= timestamp;
-      const frameCount = SHOWCASE_PRESET.targetFps * SHOWCASE_PRESET.durationMs / 1000;
-      const rawProgress = ((timestamp - showcaseStartedAt) % SHOWCASE_PRESET.durationMs) / SHOWCASE_PRESET.durationMs;
-      const progress = Math.floor(rawProgress * frameCount) / frameCount;
-      applyShowcaseCamera(progress);
+      applyShowcaseCamera(showcaseFrameProgress(timestamp - showcaseStartedAt));
       render(timestamp);
       if (!showcaseRenderer) return;
       if (showcaseDetails) updateShowcaseAnnotation(timestamp);
@@ -2566,7 +3843,72 @@
       if (!reducedMotionQuery.matches) animationFrame = requestAnimationFrame(renderShowcase);
     }
 
+    // Clip export drives Showcase frames from an external capture process
+    // (`rubylens clip`). Frames are a pure function of (frameIndex, fps):
+    // annotation choreography runs off the same synthetic clock with inline
+    // opacity, because live CSS fades would tie captures to wall-clock time.
+    function showcaseClipAnnotationOpacity(slotElapsed) {
+      const preset = SHOWCASE_ANNOTATION_PRESET;
+      if (slotElapsed < preset.revealStartMs) return 0;
+      if (slotElapsed <= preset.revealEndMs) {
+        const linear = Math.min(1, (slotElapsed - preset.revealStartMs) / preset.fadeInMs);
+        return 1 - (1 - linear) ** 3;
+      }
+      const linear = Math.min(1, (slotElapsed - preset.revealEndMs) / preset.fadeOutMs);
+      return Math.max(0, 1 - linear * linear);
+    }
+
+    function updateShowcaseClipAnnotation(elapsed) {
+      if (!showcaseAnnotation) return;
+      const tracked = trackShowcaseAnnotation(elapsed);
+      const opacity = tracked && tracked.fits ? showcaseClipAnnotationOpacity(tracked.slotElapsed) : 0;
+      showcaseAnnotation.classList.toggle("is-visible", opacity > 0);
+      showcaseAnnotation.style.opacity = opacity.toFixed(4);
+      document.documentElement.dataset.showcaseAnnotation = opacity > 0
+        ? activeShowcaseAnnotation.annotation.name
+        : "hidden";
+    }
+
+    function beginShowcaseClip() {
+      if (!showcaseMode) return { status: "not-showcase" };
+      if (!showcaseRenderer) return { status: "renderer-unavailable" };
+      if (animationFrame) cancelAnimationFrame(animationFrame);
+      animationFrame = 0;
+      clipMode = true;
+      showcaseStartedAt = 0;
+      showcaseAnnotationSlot = -1;
+      activeShowcaseAnnotation = null;
+      hideShowcaseAnnotation();
+      drawTravelOverlay(0, false);
+      if (showcaseAnnotation) {
+        showcaseAnnotation.hidden = !showcaseDetails || !renderedShowcaseAnnotations.length;
+        showcaseAnnotation.style.opacity = "0";
+      }
+      document.documentElement.dataset.rubylensClip = "true";
+      document.documentElement.dataset.showcaseMotion = "clip";
+      return {
+        status: "ok",
+        durationMs: SHOWCASE_PRESET.durationMs,
+        stageWidth: SHOWCASE_PRESET.stageWidth,
+        stageHeight: SHOWCASE_PRESET.stageHeight,
+        details: showcaseDetails,
+      };
+    }
+
+    function renderShowcaseClipFrame(frameIndex, fps) {
+      if (!clipMode || !showcaseRenderer) return Promise.reject(new Error("clip mode is not active"));
+      const elapsed = frameIndex * 1000 / fps;
+      applyShowcaseCamera(showcaseFrameProgress(elapsed));
+      render(elapsed);
+      if (showcaseDetails) updateShowcaseClipAnnotation(elapsed);
+      return new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(() => {
+        document.documentElement.dataset.clipFrame = String(frameIndex);
+        resolve(frameIndex);
+      })));
+    }
+
     function startShowcase() {
+      if (clipMode) return;
       if (animationFrame) cancelAnimationFrame(animationFrame);
       animationFrame = 0;
       showcaseStartedAt = null;
@@ -2604,7 +3946,7 @@
       });
       const stats = document.querySelector(".cinema-stats");
       const secondary = document.getElementById("cinema-secondary");
-      secondary.textContent = `Tests · ${counted(tests[0], "class", "classes")} · ${counted(tests[2], "method", "methods")}   ·   ${counted(totals.packages, "dependency gem", "dependency gems")} in orbit`;
+      secondary.textContent = `Tests · ${counted(tests[0], "class", "classes")} · ${counted(tests[2], "method", "methods")}   ·   ${counted(packageCount, "dependency gem", "dependency gems")} in orbit`;
       stats.hidden = false;
       secondary.hidden = false;
     }
@@ -2613,6 +3955,7 @@
       const rendererUnavailable = document.documentElement.dataset.explorerRenderer === "unavailable";
       drifting = interactiveMode && !rendererUnavailable && driftRequested && !reducedMotionQuery.matches;
       lastDriftTimestamp = null;
+      lastDependencySpinTimestamp = null;
       const motion = document.getElementById("motion");
       motion.disabled = rendererUnavailable || reducedMotionQuery.matches;
       if (rendererUnavailable) {
@@ -2701,6 +4044,7 @@
       else {
         yaw += dx * .006;
         pitch = clamp(pitch + dy * .004, -TOP_DOWN_PITCH, TOP_DOWN_PITCH);
+        rebaseExplorerTravelAdmission();
       }
       gesture.lastX = event.clientX;
       gesture.lastY = event.clientY;
@@ -2714,6 +4058,12 @@
       dragging = pointers.size > 0;
       canvas.classList.remove("is-dragging-pan");
       if (wasTap) {
+        if (document.body.classList.contains("is-ui-hidden")) {
+          doubleClickTarget = null;
+          restoreTapDoubleClickDeadline = event.timeStamp + 1000;
+          setUiHidden(false);
+          return;
+        }
         const point = hoverTargetAt(event.clientX, event.clientY);
         const rememberedTapIsFresh = doubleClickTarget &&
           event.timeStamp - doubleClickTarget.at <= 1000 &&
@@ -2753,6 +4103,11 @@
     }, { passive: false });
     canvas.addEventListener("dblclick", event => {
       if (pointers.size > 0) return;
+      if (event.timeStamp <= restoreTapDoubleClickDeadline) {
+        restoreTapDoubleClickDeadline = 0;
+        doubleClickTarget = null;
+        return;
+      }
       const remembered = doubleClickTarget;
       doubleClickTarget = null;
       const rememberedPoint = remembered &&
@@ -2793,6 +4148,7 @@
     document.getElementById("zoom-in").addEventListener("click", () => { if (pointers.size === 0) { cancelCameraFlight(); zoomBetween(zoom * ZOOM_STEP, sceneCenterX, sceneCenterY); } requestRender(); });
     document.getElementById("zoom-out").addEventListener("click", () => { if (pointers.size === 0) { cancelCameraFlight(); zoomBetween(zoom / ZOOM_STEP, sceneCenterX, sceneCenterY); } requestRender(); });
     document.getElementById("reset-view").addEventListener("click", resetView);
+    uiToggle.addEventListener("click", () => setUiHidden(!document.body.classList.contains("is-ui-hidden")));
     document.getElementById("help-open").addEventListener("click", toggleHelp);
     helpClose.addEventListener("click", closeHelp);
     helpOverlay.addEventListener("click", event => { if (event.target === helpOverlay) closeHelp(); });
@@ -2818,7 +4174,7 @@
     } else {
       document.title = `RubyLens · ${model.projectName}`;
       if (explorerRenderer) {
-        canvas.setAttribute("aria-label", `Interactive three-dimensional stellar artwork of ${model.projectName}. Hover class or module stars, dependency systems, or gem clouds for details. Selections open a top-down view that keeps the selected target and Core visible. Double-click a dependency system or gem cloud, press Enter or F on its selected marker, or tap that marker again to expand it. Drag to orbit, Shift-drag or Pan mode to move, scroll or pinch to zoom at a point, use arrow keys to move the view, Space to pause or resume drift, 0 to reset, slash to search, and question mark for the full shortcut list.`);
+        canvas.setAttribute("aria-label", `Interactive three-dimensional stellar artwork of ${model.projectName}. Hover class or module stars, dependency systems, or gem clouds for details. Selections open a top-down view that keeps the selected target and Core visible. Double-click a dependency system or gem cloud, press Enter or F on its selected marker, or tap that marker again to expand it. Drag to orbit, Shift-drag or Pan mode to move, scroll or pinch to zoom at a point, use arrow keys to move the view, Space to pause or resume drift, H to hide or show the interface, 0 to reset, slash to search, and question mark for the full shortcut list.`);
       }
       populateWarningDisclosure();
       applyCameraTarget(DEFAULT_CAMERA);