El sitio de la línea de seguridad de Kavaliero: una portada de cristal en WebGPU y un objeto cromado para cada servicio.
Kavaliero Systems es la línea del estudio dedicada a proteger a personas y empresas: blindaje digital para ejecutivos, auditorías de seguridad, control remoto del negocio, software a medida, un agente de WhatsApp y webs que siguen funcionando cuando falla la conexión.
El sitio está pensado para dueños de negocios en Venezuela, incluidos los que dirigen su empresa desde el extranjero. Lo diseñé y lo construí en español e inglés.
- 34páginas localizadas
- 19módulos de escena 3D escritos a mano
- 545.280triángulos en el modelo precalculado más grande
- 6servicios, cada uno con su objeto cromado
Escenas
Un cristal que se atraviesa
La portada es una pila de shaders en WebGPU: un remolino, un flujo de color, cristal estriado y grano de película, con máscaras guiadas por el scroll. Sin WebGPU, o con el movimiento reducido, recurre a un fondo liso.
Un logotipo fundido en cromo
La intro construye el logotipo a partir de un campo de distancias con signo en WebGL2 y después lo deshace en un vórtice de partículas, en unos tres segundos.
Un objeto por servicio
Cada página de servicio cuenta su historia alrededor de un único objeto cromado: un candado, una torre de control, una bóveda, un teléfono. El texto se mueve a su alrededor a medida que la página avanza.
Pipeline
Modelos precalculados al compilar
La geometría procedural se precalcula y se guarda en búferes comprimidos antes de compilar. El navegador los recibe en streaming y los descomprime en un worker, así que el hilo principal nunca tiene que analizar un modelo.
De 190 mallas a 18
El modelo más grande fusiona 190 mallas de origen en 18 llamadas de dibujo: 545.280 triángulos, 9.901 segmentos de alambre y 7.800 partículas.
Una transición en el compositor
La transición de cristal entre páginas corre sobre la Web Animations API y no sobre una línea de tiempo por script, después de medir un bloqueo de 285 ms en la versión por script.
Detalles
PDF sin librerías
Los artículos se descargan como documentos A4 que genera un pequeño módulo propio del sitio, sin ninguna dependencia de PDF.
Un juego en la página de contacto
Se puede arrugar un presupuesto hasta hacerlo una bola de papel y lanzarlo a una caja. También funciona con el teclado.
Una prueba de humo para todo el sitio
Un script comprueba las 34 URL del sitemap: paridad entre idiomas, un único h1, enlaces canonical y hreflang, el 404 y la imagen para compartir.
Diseñé y programé el sitio yo mismo.
