Composer 2.5 vs Mythos — Visual Systems Challenge

Build a complete single HTML file — an interactive "Cybernetic Synapse Nebula" in Three.js. Thousands of data nodes orbit a pulsating neural core; nearby nodes link with dynamic synapse lines; mouse hover warps the local flow field. This is a visual systems exercise: the test is rendering architecture and math, not loading assets. It must run butter-smooth at 60 FPS on a 2020 M1 MacBook in Chrome.

Hard rules (non-negotiable)

• One self-contained HTML file — runs on double-click, no build step.
• No external assets (no images, models, fonts beyond system stack).
• Three.js via CDN (cdnjs or unpkg, r128+). OrbitControls allowed.
• No TODO, no stubs, no "left as exercise". Full implementations only.
• 4096 nodes via THREE.InstancedMesh or custom BufferGeometry — never 4096 separate Mesh instances.
• M1 budget: ≤ 12 000 synapse segments, ≤ 4 post passes, 60 FPS at 1280×800.

Concept (read this twice)

You are building a live visualization of a synthetic neural network — the kind of thing you'd see on a mission-control wall in a hard sci-fi film, but implemented with the rigor of someone who's shipped WebGL dashboards. The viewer should feel:

1. A breathing central core — alive, organic, mathematically driven.
2. A swarm of data packets — coherent motion, not Brownian noise.
3. Synaptic connections — appearing and dissolving as nodes move, without stuttering.
4. Direct manipulation — the mouse is a force in the field.

Subsystem A — The neural core (hero)

Geometry & shader

• Base shape: icosphere or UV sphere, ~64×64 segments max (keep it cheap).
• Vertex shader displacement using 3D Simplex/Perlin noise (implement inline — no external library).
• Displacement driven by uTime with two octaves of noise; amplitude ~0.15–0.25 of radius.
• Animate a slow pulse (sinusoidal scale or emissive intensity) at ~0.5 Hz.

Material

• Emissive cyan/teal core with fresnel rim glow (shader path preferred).
• Core radius ~1.0 world units; everything else scales relative to this.

Interaction

• Raycaster hover on core → increase pulse amplitude and brighten emissive (lerp, don't snap).
• Click core → "systole" burst: brief radial impulse into the vector field.

Subsystem B — Data packet swarm (4096 instanced nodes)

Placement & motion (must be mathematical, not random walk)

Use a hybrid field — document your choice in the UI explain panel:

Recommended approach:

1. Shell assignment: each node i gets shell s = i % 6 and phase θ = (i × golden ratio) mod 2π.
2. Base orbit: spherical coords with radius r = 2.5 + s × 0.4 and angles at ωₛ = 0.3 / (s + 1) rad/s.
3. Curl-noise perturbation: offset from a curl noise vector field at (x, y, z, t).
4. Core influence: nodes within radius 1.8 experience inward spring force.

Forbidden: per-frame position += random() — that's not a vector field.

Rendering

• THREE.InstancedMesh with one shared SphereGeometry (8×8 max).
• Per-instance color from shell index (6-color palette: teal → violet gradient).
• Per-instance scale: slight variation by sin(θ + t) for shimmer.

Mouse field distortion

• Mouse NDC → ray → plane at z = 0.
• Within radius R = 1.5: hover repel, Shift attract; falloff 1 - d/R.
• Blend with lerp(factor, 0.08) per frame — no teleporting.

Subsystem C — Dynamic synapses (the hard part)

Connection rules

• Connect if distance d < 0.85.
• Hard cap: 12 000 line segments (6 000 connections). Keep shortest distances first.
• Line color: opacity = 1 - d/0.85; teal (core) → magenta (outer shell).

Spatial acceleration (mandatory)

• Uniform 3D spatial grid; cell size = 0.85.
• Each frame: clear grid → insert nodes → check own cell + 26 neighbors only.
• Do not compare all 4096 × 4096 pairs. Comment the grid in source.

Rendering

• THREE.LineSegments with BufferGeometry — reuse one geometry, update position attribute.
• transparent: true, depthWrite: false, additive blending optional.

Subsystem D — Environment & post-processing

• Dark void + instanced star dust (≤ 500 points) or gradient skydome. No HDRI.
• EffectComposer: UnrealBloomPass (strength ≤ 0.4, threshold ≥ 0.7), chromatic aberration (offset ≤ 0.003), ACESFilmicToneMapping.
• UI toggle to disable post (scene must still look intentional).

UI / UX (engineer's HUD)

Cyan-on-charcoal overlay: Play/Pause, Reset, Post-FX toggle, grid debug, field vectors, live node/line/draw-call stats, FPS counter.

Keyboard: Space pause · R reset · P post · G grid debug.

URL flags: ?perf=1 draw calls & synapse build ms · ?debug=1 grid occupancy · ?selftest=1 run self-tests.

Educational overlay

Collapsible panel (open 5s on load). Peer-to-peer tone. Cover: instancing, vector fields, spatial hashing, post tradeoffs, and "what broke when I built this".

Code architecture (mandatory structure)

// === CONFIG (counts, thresholds, colors, perf caps) ======================
// === NOISE & VECTOR FIELD MATH (pure functions, no Three) ==================
// === SPATIAL GRID (insert, query neighbors) ================================
// === NODE SWARM (instanced mesh, position integration) ====================
// === SYNAPSE BUILDER (grid-accelerated pair search, line buffer) ============
// === NEURAL CORE (geometry, shader material, pulse) =========================
// === POST-PROCESSING (composer, passes, resize) =============================
// === INPUT (raycaster, mouse field, keyboard) ===============================
// === UI / HUD =================================================================
// === RENDER LOOP (delta time, resize, stats) ==================================
// === BOOT =====================================================================

Separation rule: spatial grid and vector field functions must be testable without WebGL. Shader source must be a template string with comments.

Self-tests (run on load if ?selftest=1)

1. Spatial grid: 8 points in 2×2×2 grid; corner cell returns expected neighbors.
2. Distance cap: 100-node cluster → ≤ cap, no duplicate pairs.
3. Vector field: origin magnitude finite and < 10.
4. Instancing: nodeMesh.count === 4096 and isInstancedMesh.

Print ALL SELF-TESTS PASSED or detailed failure to console + on-screen banner.

Visual quality bar

Screenshot test: "This could be a Keynote slide for a Series B infra startup." Dark, premium, teal / violet / charcoal. Motion feels inevitable, not chaotic.

Deliverable

Output only the complete HTML source. No markdown. No preamble. It must run.