La sala de operaciones
que nunca duerme

01El concepto

CyberSenseAI vende Personas IA para la empresa: colaboradores digitales con rol, responsabilidades y objetivos, disponibles 24/7. La metáfora elegida es la guardia: una sala de operaciones donde alguien vigila el perímetro mientras el resto del mundo duerme. La página entera es esa sala. El hero no ilustra el producto — lo ejerce: el radar barre, detecta amenazas, las neutraliza, escribe el parte en el log y actualiza los contadores del HUD, todo delante del visitante. El eslogan sale solo: «Las empresas duermen. Las Personas IA, no.»

02Un radar en un solo fragment shader

No hay three.js ni ninguna otra librería: un contexto webgl crudo, un triángulo que cubre la pantalla y un fragment shader que dibuja todo — rejilla polar, barrido con estela, ecos, amenazas, scanlines, grano y viñeta. La rejilla se traza midiendo la distancia en píxeles al anillo o al radio más cercano, para que las líneas midan ~1 px físico en cualquier resolución (el uniform uPx es el devicePixelRatio):

float ringD  = abs(fract(r*5.0+0.5)-0.5)/5.0*uRadius;
float rings  = smoothstep(1.5*uPx, 0.0, ringD) * inR;
float spD    = abs(fract(ang/(PI/12.0)+0.5)-0.5)*(PI/12.0)*rp;
float spokes = smoothstep(1.2*uPx, 0.0, spD) * inR;

El barrido es el truco clásico hecho con una exponencial: la diferencia angular con la aguja, envuelta a [0,TAU), decae como estela. La rejilla no tiene brillo propio constante — se enciende cuando la estela pasa por encima, como el fósforo de un CRT de verdad:

float da    = mod(ang - uSweep, TAU);
float trail = exp(-da*1.7) * inR;
col += PHOS * grid * (0.16 + 0.55*trail);   // el fósforo se excita al paso

Los «ecos» de fondo son celdas polares con un hash sembrado por número de revolución (rev = floor((ang-uSweep)/TAU)), así cada vuelta ilumina retornos distintos sin guardar estado ninguno.

03Amenazas: 16 vec4 y una máquina de estados

Las amenazas viven en un uniform vec4 uT[16]: posición, marca de tiempo del último cambio y estado. El shader las pinta según el estado; la lógica vive en JavaScript:

• 1 · latente — un parpadeo rojo casi invisible. Está ahí, pero el radar aún no la ha visto.
• 2 · detectada — cuando la aguja cruza su ángulo: punto ámbar y doble anillo de ping expandiéndose.
• 3 · neutralizada — punto fósforo, anillo que colapsa y una ✕ girada 45° que se desvanece.

// JS — la aguja decrece; su diferencia angular envuelta crece y…
var daOld = ((s.a - sweepPrev)%TAU+TAU)%TAU;
var daNew = ((s.a - sweep    )%TAU+TAU)%TAU;
if (daNew < daOld - 3.0) detect(s, now);      // …salta TAU→0: la aguja la pisó

// GLSL — el ping de detección
col += AMBER * smoothstep(5.0*uPx, 0.0, td) * (0.85+0.3*sin(uTime*14.0));
float pr = age*110.0*uPx;                      // radio del anillo crece con la edad
col += AMBER * smoothstep(2.6*uPx, 0.0, abs(td-pr)) * exp(-age*2.2);

La parte que hace que la página se sienta viva: cada transición de la simulación escribe en el DOM. Detección → línea ámbar «CONTACTO ▸ S-G3 — credenciales expuestas» en el log que cae a la derecha. Neutralización → línea verde con el identificador y el tiempo de respuesta real de esa amenaza, el contador «amenazas neutralizadas hoy» se incrementa y el tiempo medio del HUD se recalcula con las últimas doce. El radar no es un adorno del contenido; es el contenido.

04El cursor es un foco de análisis

El ratón entra al shader como uMouse. A su alrededor, la rejilla se sobreexcita (un foco exponencial), se dibuja una retícula de guiones que rota, y — el detalle que premia explorar — revela amenazas latentes antes de que el barrido llegue: si el foco pasa a menos de 110 px de una amenaza en estado 1, se detecta al instante y el log lo registra como [análisis manual]. Un lector de esquina inferior muestra azimut y radio del cursor como si fuera consola de operador.

float spot = exp(-md/(130.0*uPx)) * uMouseOn;
col += PHOS * grid * spot*0.9;                 // la rejilla se enciende bajo el foco
float revl = exp(-distance(q,uMouse)/(120.0*uPx)) * uMouseOn;
col += AMBER * halo * revl;                    // la amenaza latente aflora

05Assets

Todo el hero es 100 % procedural (shader + DOM). La única imagen del sitio es la figura de mitad de página — la sala de operaciones con el operador y su café — generada con gpt-image-2 prompteada directamente en la paleta del sitio (#04080D / #3DFFA0 / #FFB547), y comprimida de 1,8 MB PNG a 150 KB JPG. El grano de película es un tile de 128 px generado en un canvas al cargar. La tipografía (Archivo + JetBrains Mono) es el único recurso externo de toda la página.

06Las pasadas

07Degradación con dignidad

• Sin WebGL — la clase nogl muestra un radar CSS: anillos con repeating-radial-gradient y barrido con conic-gradient animado. Menos teatro, misma escena.
• prefers-reduced-motion — un solo fotograma compuesto a mano: barrido congelado, dos amenazas neutralizadas, una detectada, dos latentes, y el log pre-escrito. Nada se mueve; nada falta.
• Pestaña oculta — todo se pausa (visibilitychange). Hero fuera de vista — se pausa solo el pintado (IntersectionObserver): la simulación sigue de guardia y alimenta el log y el contador de sesión del CTA. El radar no quema batería si nadie lo mira; la vigilancia no descansa.

08Reprodúcelo

• Un triángulo fullscreen + un fragment shader dibuja un radar completo. No hace falta geometría.
• Mide las líneas de la rejilla en píxeles físicos (distancia*uRadius o *rp contra uPx) y sobrevivirán a cualquier DPR.
• La estela de un barrido es exp(-mod(ang-uSweep,TAU)*k). La detección en JS es ver saltar esa misma diferencia de TAU a 0.
• Pasa tus entidades como vec4[N]: posición, timestamp, estado. La máquina de estados vive en JS; el shader solo interpola.
• Acopla la simulación al DOM: cada evento del canvas debe dejar huella legible (log, contador, titular). Ahí está el diseño.
• Renderiza un fotograma antes del RAF y compón a mano el fotograma de reduced-motion. El estado de reposo es la primera impresión.