SECTION 9artefacto creativo · hud cyberpunk · low-stakes
Un dashboard de operador en una sola página inspirado en Ghost in the Shell, The Matrix, Metal Gear Solid y Neon Genesis Evangelion. Construido como artefacto personal, no como producto. Sin tracking, sin analítica, sin backend — solo HTML, CSS, JS y unas cuantas fuentes de CDN. Tuyo para mirar, dar una vuelta, escribir easter eggs y cerrarlo cuando hayas terminado.
01 QUÉ ES
El HUD del operador: una interfaz de comando simulada para una unidad imaginaria que no existe. El roster del escuadrón referencia servicios reales corriendo en la máquina del autor (Hermes, Batou, Watchdog, MCPs) reestilizados como personal de Section 9. Las think-tanks son servidores Model Context Protocol reales. Los votos Magi son simbólicos. Las frecuencias codec son chistes.
Es una carta de amor. Sobre todo a Section 9 como estética y doctrina — la idea de una pequeña unidad de especialistas vigilando la red en busca de anomalías — y a las cuatro obras que nos dieron la gramática visual para eso.
02 CRÉDITOS — LAS FUENTES
De Masamune Shirow (manga), Mamoru Oshii (película de 1995), Kenji Kamiyama (Stand Alone Complex). Fuente de: Section 9, Tachikomas, la Mayor Kusanagi, Batou, dialéctica de ghost-line, «la red es vasta e infinita», y el arco del Puppet Master que dio a la obra entera su pregunta central.
De las Wachowski. Fuente de: la lluvia digital verde, «despierta», el conejo blanco, el kung fu, la pastilla roja/azul, Zion, Trinity, Morpheus, el Construct, y la imagen central del operador frente a una pantalla viendo avatares en la red.
De Hideo Kojima. Fuente de: FOXHOUND, frecuencias codec, la caja de cartón, «hiciste que te esperara, ¿eh?», CQC, los signos de exclamación del modo alerta, nanomáquinas, operación de espionaje táctico, los Patriots y La-li-lu-le-lo, y toda la tradición de montar experimentos políticos dentro de un juego de sigilo.
De Hideaki Anno (Studio Gainax / Khara). Fuente de: NERV, la lógica cromática naranja-y-negro, A.T. Field, el sistema MAGI (Balthasar / Melchior / Casper), los doce monolitos de SEELE, el pattern blue, la Lanza de Longinus, y toda la noción de las UIs de operador como ventanas al pavor existencial.
03 STACK
- HTML / CSS / JS
- vanilla, sin framework, sin paso de build
- fuentes
- Orbitron · JetBrains Mono · Noto Sans JP (Google Fonts CDN)
- 3d dive
- three.js v0.160 (lazy-loaded solo cuando se invoca)
- audio
- Web Audio API · drone de dos osciladores · beeps vía OscillatorNode
- persistencia
- localStorage (visit count, last-visit timestamp) — y ya
- fingerprint
- hash derivado de canvas · mostrado por diversión · no almacenado
- accesibilidad
- WCAG-aware · skip link · prefers-reduced-motion respetado
- pwa
- manifiesto inline · instalable
- rendimiento
- requestAnimationFrame throttled · idle mode · pausa-en-overlay
- backend
- ninguno
- analítica
- ninguna
- tracking
- ninguno
04 FUENTE
Código fuente, issues y discusión en GitHub. Pull requests bienvenidos si encuentras una errata, quieres añadir un ángel o tienes una caja de cartón ASCII mejor.
Construido por B con pair-programming iterativo vía Claude Code (la CLI de Anthropic). Castellano peninsular, ghost-line estable, objetivo táctico: construir artefactos creativos en ratos sueltos.
05 EASTER EGGS — CÓMO CONDUCIR
Escribe un comando en el cuadro COMMAND // INPUT
(arriba a la derecha del HUD) y pulsa Enter. Hay unos 70 comandos. El
hint rota cada 6.5 segundos. Pulsa [ ? ] HELP para la
lista completa.
Unos cuantos favoritos para empezar: ramiel,
tabris, dive, foxhound,
kojima, seele,
kept you waiting (también snake),
follow the white rabbit (también rabbit) y
nanomachines. Más el código Konami (↑↑↓↓←→←→ B A).
Haz click en cualquiera de los 7 nodos del panel
NETWORK TOPOLOGY para abrir un dosier. Las 5 tarjetas
del escuadrón son clickables. Las 6 tachikomas son clickables. Los 5
botones de acción de la columna derecha ([PING],
[QUERY], [DEPLOY], [INCOMING?],
[REFRESH]) hacen algo, todos. El toggle de audio de
arriba a la izquierda es Web Audio de verdad.
06 LICENCIA / DISCLAIMER
El código tiene licencia MIT (ver el repositorio de GitHub). Las referencias visuales y citas son tributos a sus respectivos autores y titulares de derechos, usados bajo principios de fair use / obra transformativa. Esto es fan-art, no comercio. Aquí no cambia dinero de manos. No se recolecta dato alguno. No se reclama propiedad sobre las cuatro obras fuente acreditadas más arriba.
«Lo que vemos y oímos lo da forma nuestra memoria — y nuestra memoria la dan forma lo que vemos y oímos.» — Mayor Kusanagi // Ghost in the Shell (1995, parafraseado)