The obvious way to build it is one canvas per section. That gives you eight WebGL contexts, eight render loops and eight copies of the same shader, and browsers cap how many contexts a page may hold.
So there is one. Sections declare a slot — a box with a state name — and the stage measures them, blends between the two nearest the middle of the screen, and tells the engine where to be and what to look like. The engine eases every value toward its target and stops drawing when nothing is moving.
Four passes, one frame
Glow, then the sphere itself raymarched in a fragment shader, then the lines that wrap it, then the points that drift around it. Each feature is a set of weights over those passes rather than a different object: the Toolkit is the same sphere with its tool knob at one, the Arena with its energy knob high.
What it cost to get right
Positioning was the hard part. The page sits inside a wrapper that animates a transform during the entrance, and a transformed ancestor makes position: fixed resolve against that ancestor instead of the viewport, so the Orb vanished below the hero. It is absolutely positioned now, placed from the scroll offset minus the layer's own origin.
Quality steps down on its own. If frames run long for a second, the engine drops a tier and never climbs back, because oscillating between tiers is more visible than running at the lower one.