Animate Orleans grain networks and routed request streams

Author: KSemenenko

docs/Features/BenchmarkComparisons.md

@@ -1388,3 +1388,7 @@ site qualification and actual Website/Pages delivery evidence remain required.
 REQ-BC-SCENE-001 / AC-BC-SCENE-001 / TASK-BC-SCENE-001 replace the model-card carousel with three illustrative silo/node groups, eighteen distinct grain activations and thirty intra/inter-silo links. Each node retains its own storage base; grain routing must not suggest migration of storage handles or live telemetry. Desktop and mobile SVG posters convey the same concepts. Native projected DOM labels and the canonical SVG mark remain sharp across viewport/DPR changes. Motion, pause, reduced motion, visibility, disposal and existing renderer budgets remain mandatory.
 
 ADR-040 owns this presentation-only replacement. Files: scene-geometry.mjs owns topology and motion; scene-lifecycle.mjs/scene-observers.mjs project labels and report actual graph counts; index.html/scene.css own semantics and presentation; existing cluster-poster assets own fallback. SiteVectorAssetTests and SiteBrowserVectorAssetAssertions verify actual asset semantics, native graph counts, label containment and Retina poses through Aspire. Existing scene suites retain lifecycle/budget gates. Ordered delivery: specify, replace assets/graph, native browser qualification, scoped checkpoint, Website qualification and Pages verification. Rollback is a reviewed source revert; no alternative scene implementation is retained.
+
+## Owner clarification: replace motion inside the existing hero, 2026-10-06
+
+REQ/AC/TASK-BC-SCENE-002 supersedes the first graph's subtle breathing motion. Keep the screenshot-identified hero figure and surrounding landing sections; do not add another block. Replace its animation with an expressive native Three.js cluster choreography: grains rotate within three fixed transparent silos, curved graph links track those grains, moving request packets follow real links and node-local storage lights on the commit phase. The scene is conceptual rather than live telemetry. Preserve the 3/18/30 graph contract, canonical vector mark, crisp contained labels, reduced motion/pause/visibility/disposal and all renderer budgets. Existing native scene assertions verify running/paused frames, graph topology and responsive bounds; browser review must visibly confirm travel over successive frames. Bootstrap fragment navigation and instant test viewport setup avoid inspecting transitional offscreen frames. ADR-040 retains the same source ownership, staged verification and Pages delivery contract.

site/AGENTS.md

@@ -66,3 +66,7 @@
 - The current four workflows are Build and Tests (`build-and-tests.yml`), Benchmarks (`benchmarks.yml`), Website (`website.yml`) and prepared manual Release (`release.yml`). Only Website builds, qualifies and publishes the site on trusted main push/manual; Benchmarks ends with a bounded Website dispatch and Website has no `workflow_run` executor subscription. These explicit owner corrections supersede every earlier three-workflow, filename, executor, placement and completion-subscription clause; every unrelated suite, permission and qualification rule remains mandatory.
 - The sole measured producer contract is the current 1,386-worker/2,530-input cohort in ADR-076. Its executed dependency manifest contains exactly 80 current source paths. Remove old-plan readers, schemas, event-file parsers and their exclusive fixtures or inventory entries under the root owner-only migration/legacy super rule. This supersedes earlier 270/277 and old-reader requirements only; retain bounded authenticated REST producer/artifact provenance, exact current source and input hashes, failed/null accounting, strict selected-evidence rejection, freshness and unchanged 80/70/90 coverage thresholds.
 - When no current authenticated producer is ready, qualify the complete content-only site without figures. Real native TUnit/Node/Chrome operations, no skips in each applicable suite, source/coverage inventories and needs-gated least-privilege Pages remain required. Local tests enter the same Aspire-owned AppHost and are development evidence; genuine exact-source Linux/provider proof closes delivery. Controlled rejection inputs cannot become published measurements.
+
+## Owner correction: screenshot-identified animation, 2026-10-06
+
+- When the owner identifies an existing visual block in a screenshot and asks for another animation, replace that block's animation while preserving its surrounding landing layout. Do not infer a separate new block. A requested cluster illustration must show meaningful moving requests/grains/graph interactions, rather than a mostly static arrangement of cards or shapes.

site/Features/BenchmarkComparisons/scene-geometry.mjs

@@ -1,7 +1,7 @@
 export const SCENE = Object.freeze({
   limits: Object.freeze({ maxDevicePixelRatio: 1.5, maxBufferPixels: 1_000_000, maxDrawCalls: 30, maxTriangles: 5_000,
     settleMilliseconds: 500, settleRenderMilliseconds: 450, maxSpinStepMilliseconds: 50 }),
-  world: Object.freeze({ coreSize: 1.05, coreY: 1.9, cameraFov: 24, cameraNear: 0.1, cameraFar: 60,
+  world: Object.freeze({ coreSize: 0.8, coreY: 2.0, cameraFov: 24, cameraNear: 0.1, cameraFar: 60,
     cameraX: 0, cameraY: 2.5, cameraZ: 11.2, cameraLookY: 0.15, cameraAspect: 1,
     pointerYaw: 0.12, pointerPitch: 0.05, smoothingDivisor: 115, millisecondsPerSecond: 1000 }),
   core: Object.freeze({ selector: '.cluster-core', perspectiveScaleIndex: 5, matrixPrefix: 'matrix3d(', matrixSuffix: ')',
@@ -53,28 +53,35 @@ export function createSceneGraph(THREE) {
   const root = new THREE.Group();
   const resources = new Set();
   const own = value => (resources.add(value), value);
-  scene.add(root, new THREE.AmbientLight(0xffffff, 2));
+  scene.add(root, new THREE.AmbientLight(0xffffff, 1.8));
   const light = new THREE.DirectionalLight(0xffffff, 3);
   light.position.set(-3, 6, 5);
   scene.add(light);
   const nodes = SILOS.map((position, index) => createSilo(THREE, own, root, position, COLORS[index]));
   const positions = SILOS.flatMap(silo => GRAINS.map(grain => new THREE.Vector3(...grain).add(new THREE.Vector3(...silo))));
   const grains = new THREE.InstancedMesh(own(new THREE.SphereGeometry(0.12, 12, 8)),
-    own(new THREE.MeshStandardNodeMaterial({ roughness: 0.3, metalness: 0.12 })), positions.length);
+    own(new THREE.MeshStandardNodeMaterial({ roughness: 0.22, metalness: 0.16 })), positions.length);
   own(grains);
   const matrix = new THREE.Matrix4();
-  positions.forEach((position, index) => {
-    grains.setMatrixAt(index, matrix.makeTranslation(position.x, position.y, position.z));
-    grains.setColorAt(index, new THREE.Color(COLORS[Math.floor(index / GRAINS.length)]));
-  });
+  const color = new THREE.Color();
+  const white = new THREE.Color(0xffffff);
   root.add(grains);
   const links = SILOS.flatMap((_, silo) => EDGES.map(([a, b]) => [silo * GRAINS.length + a, silo * GRAINS.length + b]));
   links.push([1, 13], [7, 16], [5, 11]);
-  const vertices = links.flatMap(([a, b]) => [...positions[a].toArray(), ...positions[b].toArray()]);
   const geometry = own(new THREE.BufferGeometry());
-  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
-  const lineMaterial = own(new THREE.LineBasicNodeMaterial({ color: 0x777486, transparent: true, opacity: 0.48 }));
-  root.add(new THREE.LineSegments(geometry, lineMaterial));
+  const lines = new THREE.Float32BufferAttribute(new Float32Array((27 + 3 * 24) * 6), 3);
+  geometry.setAttribute('position', lines);
+  root.add(new THREE.LineSegments(geometry,
+    own(new THREE.LineBasicNodeMaterial({ color: 0x8b8299, transparent: true, opacity: 0.5 }))));
+  const packets = new THREE.InstancedMesh(own(new THREE.SphereGeometry(0.085, 6, 4)),
+    own(new THREE.MeshBasicNodeMaterial({ color: 0xffffff })), 24);
+  own(packets);
+  for (let index = 0; index < packets.count; index++) {
+    color.setHex(0x8f7baa).lerp(white, (index % 8) / 9);
+    packets.setColorAt(index, color);
+  }
+  root.add(packets);
+  const point = new THREE.Vector3();
   const projectLabels = createLabelProjection(THREE, root, camera);
   const projectCore = createCoreProjection(THREE, root, camera);
   const resize = aspect => {
@@ -83,37 +90,91 @@ export function createSceneGraph(THREE) {
     camera.lookAt(0, SCENE.world.cameraLookY, 0);
     camera.updateProjectionMatrix();
   };
+  const animate = seconds => {
+    animateGrains(seconds, positions, grains, matrix, color, white);
+    updateLinks(links, positions, lines, point);
+    animatePackets(seconds, links, positions, packets, matrix, point);
+    nodes.forEach((node, index) => {
+      node.emissiveIntensity = Math.pow(Math.max(0, Math.sin(seconds * 2.1 - index * 0.35)), 8) * 0.7;
+    });
+  };
   resize(1);
+  animate(0);
   return {
-    scene, camera, root, projectCore, projectLabels, resize,
+    scene, camera, root, projectCore, projectLabels, resize, animate,
     counts: { silos: nodes.length, grains: positions.length, links: links.length },
-    animate: seconds => {
-      positions.forEach((position, index) => {
-        const scale = 1 + Math.sin(seconds * 1.7 + index * 0.9) * 0.12;
-        matrix.makeScale(scale, scale, scale).setPosition(position);
-        grains.setMatrixAt(index, matrix);
-      });
-      grains.instanceMatrix.needsUpdate = true;
-      lineMaterial.opacity = 0.42 + Math.sin(seconds * 0.7) * 0.06;
-    },
     dispose: () => { for (const value of resources) value.dispose(); resources.clear(); },
   };
 }
 
+function animateGrains(seconds, positions, grains, matrix, color, white) {
+  positions.forEach((position, index) => {
+    const silo = Math.floor(index / GRAINS.length);
+    const local = GRAINS[index % GRAINS.length];
+    const angle = seconds * (silo === 1 ? -0.28 : 0.23) + silo * 0.18;
+    position.set(SILOS[silo][0] + local[0] * Math.cos(angle) - local[2] * Math.sin(angle),
+      SILOS[silo][1] + local[1] + Math.sin(seconds * 1.2 + index) * 0.045,
+      SILOS[silo][2] + local[0] * Math.sin(angle) + local[2] * Math.cos(angle));
+    const activity = Math.pow(Math.max(0, Math.sin(seconds * 2.1 - index * 0.45)), 6);
+    const scale = 1 + activity * 0.45;
+    matrix.makeScale(scale, scale, scale).setPosition(position);
+    grains.setMatrixAt(index, matrix);
+    color.setHex(COLORS[silo]).lerp(white, activity * 0.35);
+    grains.setColorAt(index, color);
+  });
+  grains.instanceMatrix.needsUpdate = true;
+  grains.instanceColor.needsUpdate = true;
+}
+
+function routePoint(link, positions, progress, index, point) {
+  point.copy(positions[link[0]]).lerp(positions[link[1]], progress);
+  if (index >= 27) point.y += Math.sin(progress * Math.PI) * 0.8;
+  return point;
+}
+
+function updateLinks(links, positions, attribute, point) {
+  let vertex = 0;
+  links.forEach((link, index) => {
+    const segments = index < 27 ? 1 : 24;
+    for (let segment = 0; segment < segments; segment++) {
+      routePoint(link, positions, segment / segments, index, point);
+      attribute.setXYZ(vertex++, point.x, point.y, point.z);
+      routePoint(link, positions, (segment + 1) / segments, index, point);
+      attribute.setXYZ(vertex++, point.x, point.y, point.z);
+    }
+  });
+  attribute.needsUpdate = true;
+}
+
+function animatePackets(seconds, links, positions, packets, matrix, point) {
+  for (let index = 0; index < packets.count; index++) {
+    const route = Math.floor(index / 8);
+    const trail = index % 8;
+    const progress = ((seconds * 0.34 + route / 3 - trail * 0.016) % 1 + 1) % 1;
+    const linkIndex = 27 + route;
+    routePoint(links[linkIndex], positions, progress, linkIndex, point);
+    const scale = 1 - trail * 0.115;
+    matrix.makeScale(scale, scale, scale).setPosition(point);
+    packets.setMatrixAt(index, matrix);
+  }
+  packets.instanceMatrix.needsUpdate = true;
+}
+
 function createSilo(THREE, own, root, position, color) {
   const group = new THREE.Group();
   group.position.set(...position);
-  const glass = new THREE.Mesh(own(new THREE.BoxGeometry(1.7, 1.65, 0.95)),
+  const glass = new THREE.Mesh(own(new THREE.CylinderGeometry(0.9, 0.9, 1.65, 24)),
     own(new THREE.MeshBasicNodeMaterial({ color, transparent: true, opacity: 0.13, depthWrite: false })));
   glass.position.y = 0.82;
-  const outline = new THREE.LineSegments(own(new THREE.EdgesGeometry(glass.geometry)),
-    own(new THREE.LineBasicNodeMaterial({ color, transparent: true, opacity: 0.55 })));
+  const outline = new THREE.LineSegments(own(new THREE.EdgesGeometry(glass.geometry, 20)),
+    own(new THREE.LineBasicNodeMaterial({ color, transparent: true, opacity: 0.65 })));
   outline.position.copy(glass.position);
-  const base = new THREE.Mesh(own(new THREE.BoxGeometry(1.85, 0.12, 1.1)),
-    own(new THREE.MeshStandardNodeMaterial({ color: 0x34343b, roughness: 0.6, metalness: 0.2 })));
+  const material = own(new THREE.MeshStandardNodeMaterial({ color: 0x34343b, roughness: 0.5, metalness: 0.25,
+    emissive: 0xa28ebc, emissiveIntensity: 0 }));
+  const base = new THREE.Mesh(own(new THREE.CylinderGeometry(0.98, 0.98, 0.16, 24)), material);
   group.add(glass, outline, base);
   root.add(group);
-  return group;
+  return material;
 }
 
 function createLabelProjection(THREE, root, camera) {

tests/KeyLoad.SiteTests/Features/BenchmarkComparisons/Assertions/SiteBrowserVectorAssetAssertions.cs

@@ -6,6 +6,8 @@ internal static class SiteBrowserVectorAssetAssertions
 {
     public static async Task AssertReadyMarkAsync(SiteBrowserCdpClient cdp, CancellationToken cancellationToken)
     {
+        await Assert.That(await cdp.WaitForExpressionAsync(SiteBrowserSceneTokens.GraphReadyPredicate,
+            cancellationToken)).IsTrue();
         var state = await ReadMarkAsync(cdp, cancellationToken);
         await Assert.That(state.GetProperty(SiteVectorAssetTokens.CountField).GetInt32()).IsEqualTo(SiteTokens.One);
         await Assert.That(state.GetProperty(SiteVectorAssetTokens.LoadedField).GetBoolean()).IsTrue();

tests/KeyLoad.SiteTests/Features/BenchmarkComparisons/Contracts/SiteBrowserSceneTokens.cs

@@ -13,6 +13,7 @@ internal static class SiteBrowserSceneTokens
     public const string VisibleField = "visible";
     public const string ContainedField = "contained";
     public const string LabelsHiddenField = "labelsHidden";
+    public const string GraphReadyPredicate = "document.querySelector('#cluster-scene')?.dataset.sceneState === 'ready' && document.querySelectorAll('#cluster-scene [data-silo-label]').length === 3 && [...document.querySelectorAll('#cluster-scene [data-silo-label]')].every(label => {const style=getComputedStyle(label);return style.display !== 'none' && style.visibility !== 'hidden' && Number(style.opacity)>0;})";
     public const string ClusterGraphScript = """
         (() => {
           const host = document.querySelector('#cluster-scene');

tests/KeyLoad.SiteTests/Features/BenchmarkComparisons/Contracts/SiteBrowserUiTokens.cs

@@ -52,7 +52,7 @@ internal static class SiteBrowserUiTokens
     public const string TrianglesField = "triangles";
     public const string NoScriptSelector = "noscript";
     public const string OverflowScript = "document.documentElement.scrollWidth>window.innerWidth";
-    public const string SceneScrollScript = "document.querySelector('#cluster-scene')?.scrollIntoView({block:'center'})";
+    public const string SceneScrollScript = "document.querySelector('#cluster-scene')?.scrollIntoView({block:'center',behavior:'instant'})";
     public const string SceneSnapshotScript = "({backend:document.querySelector('#cluster-scene')?.getAttribute('data-graphics-backend'),status:document.querySelector('" + SelectorSceneStatus + "')?.textContent,frame:document.querySelector('#cluster-scene')?.getAttribute('data-frame-state'),canvasCount:document.querySelectorAll('#cluster-scene canvas').length,bufferPixels:Number(document.querySelector('#cluster-scene')?.getAttribute('data-buffer-pixels')??0),drawCalls:Number(document.querySelector('#cluster-scene')?.getAttribute('data-draw-calls')??0),triangles:Number(document.querySelector('#cluster-scene')?.getAttribute('data-triangles')??0)})";
     public const string MotionEnableScript = "(()=>{const e=document.querySelector('#scene-motion');if(!e||e.disabled)return false;if(e.getAttribute('aria-pressed')!=='true')e.click();return e.getAttribute('aria-pressed')==='true'})()";
     public const string MotionDisableScript = "(()=>{const e=document.querySelector('#scene-motion');if(!e||e.disabled)return false;if(e.getAttribute('aria-pressed')==='true')e.click();return e.getAttribute('aria-pressed')==='false'})()";