A JARVIS-style live orchestration HUD — and why WebGL is fine here when it broke the terminal
Built a Tony-Stark / JARVIS holographic command center for the portfolio: a WebGL (react-three-fiber) scene — arc-reactor core, startups as emissive nodes on a sphere, energy lines with light packets that run when an agent works, bloom glow, auto-orbit. The same WebGL that broke Korean IME in the terminal is perfectly safe here, because this is a standalone visual canvas, not xterm's text-rendering path. Grounded in how real React JARVIS HUDs are built (particle network + shader-style pulses + bloom) rather than hand-rolled SVG, after two weaker SVG attempts.
AI version
The ask
"Beyond a status grid — give me the Tony Stark / JARVIS feel." Two SVG attempts (a flat status grid, then a glowing constellation) both landed as "약하다" (weak). The honest diagnosis: I was guessing blind, and SVG has a ceiling for that holographic look.
The grounding
A quick look at how people actually build "JARVIS HUD in React" pointed the same way every time: WebGL — a particle/node network with shader-style light pulses along the connections and bloom post-processing for the glow. (Arwes — a real sci-fi UI framework, influences Star Citizen / Halo / TRON — confirms the aesthetic vocabulary, but it's alpha, so it's a reference, not a dependency.)
The build
OrchestrationView is now a react-three-fiber scene:
- an arc-reactor core (rotating rings + wireframe icosahedron + glowing center + point light),
- the startups as emissive nodes on a fibonacci sphere, colored by live status,
- energy lines core→node, with a light packet running the line when that startup has a working agent,
- bloom (
@react-three/postprocessing) for the holographic glow, a star field, auto-orbit + drag, - selectable atmospheres (Stark HUD / Mark XLII gold / Warm Dusk / Countryside / Aurora), persisted.
Data is real: panes per startup from saved layouts, status from the Claude Code hook store; an 800 ms poll keeps it live.
The key unlock: WebGL is safe HERE
We had just parked WebGL because the xterm WebGL renderer breaks Korean IME in WKWebView. The instinct "WebGL is off the table" is wrong — that was specific to xterm's terminal text (it disrupts the hidden IME textarea). This is a standalone visual <Canvas>, nowhere near the terminal input, so WebGL/Three.js is completely safe. The lesson: scope a constraint to its actual cause. "Terminal-text GPU breaks IME" ≠ "no WebGL anywhere" — the dazzling visual surfaces (graphs, orchestration) are exactly where WebGL belongs.
Honest status
Iteration 1 of the real technique, not a blind guess — but tuning (bloom intensity, node sizing, camera, palette) still needs eyes on the running app. Wrapped in the app's error boundary, so a WebGL throw degrades to a recoverable panel, not a blank window.
Review needed
No human review on this entry yet.