SECTION 9creative artifact · cyberpunk hud · low-stakes
A single-page operator dashboard inspired by Ghost in the Shell, The Matrix, Metal Gear Solid, and Neon Genesis Evangelion. Built as a personal artifact, not a product. No tracking, no analytics, no backend — just HTML, CSS, JS, and a few CDN fonts. Yours to look at, walk around, type easter eggs into, and close when you're done.
01 WHAT IT IS
The operator's HUD: a simulated command interface for an imagined unit that doesn't exist. The squad roster references real services running on the author's machine (Hermes, Batou, Watchdog, MCPs) restyled as Section 9 personnel. The think-tanks are real Model Context Protocol servers. The Magi votes are symbolic. The codec frequencies are jokes.
It's a love letter. Mostly to Section 9 as an aesthetic and doctrine — the idea of a small unit of specialists watching the network for anomalies — and to the four works that gave us the visual grammar for that.
02 CREDITS — THE SOURCES
By Masamune Shirow (manga), Mamoru Oshii (1995 film), Kenji Kamiyama (Stand Alone Complex). Source of: Section 9, Tachikomas, Major Kusanagi, Batou, ghost-line dialectic, "the net is vast and infinite," the Puppet Master arc that gave the whole work its central question.
By the Wachowskis. Source of: the green digital rain, "wake up," the white rabbit, kung fu, red/blue pill, Zion, Trinity, Morpheus, the Construct, and the central image of the operator at a screen watching avatars in the net.
By Hideo Kojima. Source of: FOXHOUND, codec frequencies, the cardboard box, "kept you waiting, huh?", CQC, alert-mode exclamation marks, nanomachines, tactical espionage operation, the Patriots and La-li-lu-le-lo, and the entire tradition of staging political thought experiments inside a stealth game.
By Hideaki Anno (Studio Gainax / Khara). Source of: NERV, the orange-and-black color logic, A.T. Field, the Magi system (Balthasar / Melchior / Casper), SEELE's twelve monoliths, pattern blue, the Lance of Longinus, and the entire notion of operator UIs as windows into existential dread.
03 STACK
- HTML / CSS / JS
- vanilla, no framework, no build step
- fonts
- Orbitron · JetBrains Mono · Noto Sans JP (Google Fonts CDN)
- 3d dive
- three.js v0.160 (lazy-loaded only when invoked)
- audio
- Web Audio API · two-oscillator drone · beeps via OscillatorNode
- persistence
- localStorage (visit count, last-visit timestamp) — that's it
- fingerprint
- canvas-derived hash · displayed for fun · not stored
- accessibility
- WCAG-aware · skip link · prefers-reduced-motion respected
- pwa
- manifest inline · installable
- performance
- requestAnimationFrame throttled · idle mode · pause-on-overlay
- backend
- none
- analytics
- none
- tracking
- none
04 SOURCE
Source code, issues, and discussion on GitHub. Pull requests welcome if you spot a typo, want to add an angel, or have a better cardboard box ASCII.
Built by B with iterative pair-programming via Claude Code (Anthropic's CLI). Castellano peninsular, ghost-line stable, tactical objective: build creative artifacts in spare cycles.
05 EASTER EGGS — HOW TO DRIVE
Type a command into the COMMAND // INPUT box (top-right of the HUD)
and press Enter. There are about 70 of them. Hint rotates every 6.5 seconds.
Press [ ? ] HELP for the full list.
A few favourites to start: ramiel, tabris, dive,
foxhound, kojima, seele,
kept you waiting (also snake),
follow the white rabbit (also rabbit), and
nanomachines. Plus the Konami code (↑↑↓↓←→←→ B A).
Click on any of the 7 nodes in the NETWORK TOPOLOGY panel for
a dossier. The 5 squad cards are clickable. The 6 tachikomas are clickable.
The 5 right-column action buttons ([PING], [QUERY],
[DEPLOY], [INCOMING?], [REFRESH]) all do
something. The audio toggle in the top-left is real Web Audio.
06 LICENCE / DISCLAIMER
Code is MIT-licensed (see GitHub repository). Visual references and quotes are tributes to their respective authors and rights-holders, used under fair-use / transformative-work principles. This is fan-art, not commerce. No money changes hands. No data is collected. No claim is made on the underlying properties of the four source works credited above.
"What we see and hear is shaped by our memories — and our memories are shaped by what we see and hear." — Major Kusanagi // Ghost in the Shell (1995, paraphrased)