El proyecto
La página presenta todo su catálogo: compresión de modelos, seguridad, orquestación, su modelo más grande y la plataforma para desplegarlos.
Cada idea técnica tiene su imagen: una esfera que se comprime, una matriz que conserva un tercio de sus datos, un modelo que viaja de la nube al dispositivo sin desaparecer.
El reto
Explicar compresión de modelos a quien firma la factura del cálculo, con evidencia técnica y sin perder a nadie por el camino. Todo en una sola página, oscura, seria y con el rojo de la marca como único acento.
Cómo la construimos
Dirección
24 rondas de diseño, con las notas de revisión dejadas sobre la propia página. Cada decisión rechazada pasó a una lista de 73 reglas que no vuelven.
Sistema
Recortado a lo imprescindible: dos fuentes, un solo rojo, solo tema oscuro y dos radios (había ocho). Titulares equilibrados con text-wrap y alturas en lvh y dvh.
Ilustración
Quince ilustraciones isométricas generadas por código con un script propio: se dibujan a línea y luego se rellenan, como un plano que se construye.
Movimiento
GSAP y ScrollTrigger con Lenis al mando del reloj. Nada rebota: lo que cae, cae con gravedad y se asienta.
Medición
Antes de optimizar, se midió con la rueda real y en pares intercalados. Tres optimizaciones «obvias» empeoraban el resultado y se descartaron.
Los detalles
Color
La paleta de Quantus, por lo que se usa en la web entregada. Pasa por encima de cada color.
Uso medido en las grabaciones de la web entregada: cada píxel cuenta para el color más cercano; fotos y degradados aparte.
Tipografía
Medido en la web, a 1440 px.
Espaciado
- Paso base
- Fluido
- Entre secciones
- 158 px
- Contenedor
- 1325 px
- 7entre elementos, 38 veces
- 8entre elementos, 100 veces
- 10entre elementos, 108 veces
- 12entre elementos, 50 veces
- 16entre elementos, 58 veces
- 18relleno, 88 veces
- 20relleno, 57 veces
- 22relleno, 41 veces
- 28relleno, 41 veces
Los rellenos, márgenes y huecos que más se repiten en la web entregada, a 1440 px y a escala real; tamaños fluidos (cambian con el ancho de la ventana), sin un paso fijo.
Movimiento
Todo bucle se pausa fuera de pantalla y Lenis manda en el reloj de GSAP.
La esfera que se comprime
3.000 puntos atados al scroll forman el isotipo mientras el tamaño baja del 100 % al 5 %.
Un plano que se construye
Cada sitio donde corre el modelo es una ilustración isométrica que se traza a línea y después se rellena.
La pila
Los productos caen con gravedad al entrar y lo de debajo cede 3,2 px al recibirlos.
Por dentro
Herramientas
- HTML y CSS a medida
- GSAP + ScrollTrigger
- Lenis
- Canvas 2D
- Vercel
Cómo está hecha
- Un único HTML escrito a mano, autocontenido, de unos 440 KB
- La esfera, el perfilador y el tensor, en Canvas 2D; las ilustraciones, SVG en línea
- Todo bucle se pausa fuera de pantalla y Lenis manda en el reloj de GSAP
- La ronda contra los tirones del scroll bajó el trabajo del hilo principal de 40,1 s a 26,4 s, y los fotogramas de más de 20 ms, del 2,5 % al 0,9 %
- Movimiento reducido respetado: sin bucles, con el logotipo ya formado
- Publicada en Vercel con caché inmutable para los recursos
En cifras
- 11 secciones
- 15 ilustraciones isométricas
- 512 cubos en el tensor del pie
- 24 rondas de diseño
- 87 herramientas de medida escritas
Lo que se descartó
- Un cubo de Rubik en CSS 3D para el pie: lo sustituyó el tensor en canvas
- Los rebotes elásticos y el «estirar y encoger»: la marca pedía seriedad
- El tema claro: la página es oscura de principio a fin
- Quitar el desenfoque de la cabecera para ganar velocidad: medido, empeoraba (3,32 → 3,63 s)
Conclusión
Una sola página explica el catálogo entero sin pedir conocimientos técnicos: cada idea tiene su imagen, y la esfera del hero resume el producto antes de leer nada.
Se cerró en 24 rondas de diseño, con 73 reglas de lo que no vuelve, y se midió antes de optimizar: el trabajo del hilo principal bajó de 40,1 s a 26,4 s.
«Aquí va el testimonio del cliente sobre este proyecto: dos o tres líneas, con su retrato al carboncillo. Marcador para Eric.»