Offensive Pulse: una web de ciberseguridad futurista hecha con un solo campo de partículas

Las webs de ciberseguridad suelen recurrir al mismo atrezo: figuras con capucha, código verde cayendo sobre una pantalla negra, candados sobre placas de circuitos. Offensive Pulse, un equipo certificado que pone a prueba aplicaciones web y móviles, redes y personas, necesitaba parecer el futuro del sector sin nada de eso.

La respuesta fue tomar prestado de las herramientas con las que de verdad se trabaja en seguridad: pantallas de radar, terminales, planos técnicos y retículas de mira. Este artículo repasa cómo se construyó ese aspecto futurista y digital, capa a capa.

Detrás de cada sección hay un único lienzo WebGL lleno de partículas verdes, y nunca sale de la pantalla. Al hacer scroll, las partículas se dispersan en polvo y se reagrupan en lo que trate la siguiente sección:

• Hero: un radar, con anillos, un punto central y señales que se encienden y se apagan.
• Servicios: la cuadrícula de líneas finas de las seis tarjetas, con nodos brillantes donde se cruzan las líneas.
• Proceso: el tablero de seis fases, con una luz que recorre su borde hasta la fase activa.
• Tech Arsenal: un mapa de red de grupos conectados.
• AETHER: un planeta con un anillo, para la plataforma de pruebas autónomas del propio equipo.
• Contacto: una diana, con un punto brillante en el centro.

Una página larga se convierte en una sola escena continua. La web se siente como un único instrumento que cambia de modo, no como diez secciones separadas.

En el hero, las partículas forman un radar alrededor del titular. Para que las palabras se lean nítidas, una sombra oscura y suave se coloca entre las partículas y el texto y atenúa lo que pasa por detrás, así el titular siempre se lee con claridad.

Tres capas hacen el trabajo: las partículas WebGL al fondo, la sombra en CSS y el texto HTML encima. Cada una puede cambiar sin tocar las demás.

La pequeña etiqueta sobre el titular no aparece sin más. Durante 900 milisegundos pasa por letras, números y símbolos al azar, con una tanda nueva cada 45 milisegundos, y fija un carácter tras otro de izquierda a derecha hasta leer “Complete cyber threat assessment suite”. Los lectores de pantalla reciben el texto final desde el principio.

Ese aire de terminal recorre el resto de la tipografía. Etiquetas, tags y líneas de estado van en GT America Mono, en mayúsculas y con mucho espaciado, junto a Suisse Int’l para titulares y lectura. La doble barra delante del elemento activo del menú y de las credenciales del hero viene de los comentarios en código.

La paleta es un casi negro, unos pocos grises y un verde, #11CE9B, el color de un trazo encendido en una pantalla. Las partículas, las marcas, los estados activos y la segunda línea del titular lo comparten, así que el verde siempre significa “esto está activo”.

El logo funciona igual: un círculo que se rompe en un damero de píxeles por un lado, como una señal que se vuelve digital.

Las secciones se apoyan en cuadrículas de líneas finas, con una pequeña marca verde en cada esquina y cruce, como las de un plano técnico o una retícula de mira. Dan estructura a una página oscura sin cajas pesadas.

Sobre esa cuadrícula, cada servicio tiene un dibujo isométrico de líneas que ejecuta su rutina al pasar el cursor, mientras una etiqueta de estado en la esquina narra cada paso. El lector pasa de “standby” a “scanning · 40%” y a “match”, y la cerradura de “locked” a “picking · pins 3/5” y a “unlocked”. Se lee como una máquina que informa.

Efectos así solo funcionan si la página va fluida. Toda la web comparte un único lienzo de partículas en lugar de dibujar uno por sección, y la escena que lo mueve es un archivo aparte que se carga cuando la página está en reposo, tras una comprobación rápida del dispositivo.

Quien prefiere menos movimiento, usa el ahorro de datos o una conexión lenta, o navega con un móvil con poca memoria o poca potencia recibe en su lugar un radar más ligero dibujado en CSS, con anillos, barrido y señales, y el resto de la página exactamente igual. Los dispositivos que sí reciben las partículas las mueven con uno de dos niveles de calidad, según su chip gráfico y su procesador.

La web está en inglés y en español, y en el móvil los servicios se apilan en tarjetas sueltas cuyas rutinas se reproducen al entrar en pantalla.