Seven live techniques, each running real code on this page — no video, no mockups. Move your cursor over every panel; they all react. These are the building blocks for moving the hub from passive readouts to a living, tactile canvas.
Ambient state for the hub — behind the logo menu, the SCENES room backdrop, or the chat panel while the agent thinks. Turbulence rises with market heat, so the background itself carries the Geiger reading.
One fullscreen quad, ~40 lines of GLSL. Simplex-style noise + domain warp, cursor displaces the field. ~0.4ms/frame, GPU only, zero DOM.
The 'hyper-pixelated' look from your doc. Wraps any existing canvas — drop it over the heatmap or RRG and they become period-correct without changing their code.
Ordered Bayer dithering to a reduced palette + scanlines + subtle chromatic offset. Post-pass on the pixel buffer. ~1.1ms at 300px. Slider = pixel size.
Activity made physical. Each particle is a live event — a tick, a news hit, an alert. Density and speed encode throughput, so a busy tape looks busy. Good for the feed-health strip and the SCENES idle state.
Pooled particles, no allocation in the loop. Cursor is an attractor/repeller with inverse-square falloff. ~0.9ms for 2400 at 60fps.
The tactile layer. Every node has momentum, damping and snap. Drag one and the rest respond through the lattice. This is what makes clicks feel physical rather than instant.
Hooke's law with critical damping (ζ≈1), verlet integration. Fires navigator.vibrate() on snap where supported. ~0.3ms.
Depth without a 3D engine. Use it as the SCENES backdrop or behind the composite dial — the hub gains physical space while every readout stays flat and legible on top.
Signed-distance raymarch, 48 steps, fog + rim light. Parallax follows the cursor. ~1.6ms — the most expensive here; fine as a backdrop, not per-tile.
This is the one you described. Cohort on X, time receding into Z, Geiger as height and colour. You watch the whole cohort structure evolve as a surface instead of reading ten numbers. Press play and it replays the window.
Heightfield mesh, per-vertex colour, orbit follows the cursor. Needs composite_history in the DB — this demo runs on generated data until that table exists.
The P3 / glossy-glass surface from your doc. A real panel treatment for cards and modals — specular highlight tracks the cursor, edges catch light. Cheap enough to use everywhere.
Radial specular + edge rim, composited under content. Pure canvas, no blur filters (those are what make glass slow). ~0.2ms.