Este sitio: papel por arriba, color por debajo y un único lienzo WebGL que dibuja cada imagen en el lugar que le da la página.
Este es el sitio que estás leyendo. Su idea cabe en una frase: diseño la superficie y construyo lo que corre por debajo. Por eso tiene dos capas. Arriba, papel, con cada imagen impresa a dos tintas. Debajo, un fondo oscuro con vetas encendidas y las mismas imágenes a todo color.
El puntero deja un rastro de fluido que abre una capa sobre la otra, y el control de la esquina lleva la página entera al otro lado. Lo diseñé y lo construí todo: el lienzo, las páginas en inglés y en español, el CV y el monograma.
- 32páginas, en dos idiomas
- 1lienzo detrás de todas las páginas
- 5colores que puede usar un componente
- 2hojas A4 para el CV
El lienzo
Un texto que siempre es el inverso
La página se dibuja en blanco y se mezcla por diferencia con el lienzo, así que cada letra es el inverso de lo que tiene detrás, también a lo largo de un borde en movimiento. Por eso un componente solo puede usar cinco colores neutros: uno saturado cambiaría de tono con lo que le pasara por detrás.
Las imágenes siguen a la página
Una imagen es un img normal en una caja, para la maquetación, el texto alternativo y el foco. Con el lienzo encendido se vuelve transparente y el lienzo dibuja la imagen en esa misma caja, que lee en cada fotograma. El lienzo nunca coloca nada.
Una sola función dibuja el borde
Una única función del shader decide, píxel a píxel, qué capa se ve. Las imágenes, sus halos y la composición final la llaman todas, así que el borde no puede salir desplazado un píxel entre unas y otras.
El índice
Una columna que se vuelve rueda
En la superficie las portadas van en una columna recta. Por debajo, las mismas portadas cuelgan de una rueda vista desde su canto, cada una un doceavo de vuelta más allá, más pequeña y más hundida en la bruma. Las cajas de la página no se mueven: la postura la pone el shader.
Un caso de estudio desemboca en el siguiente
Un caso de estudio termina con la cabecera del siguiente. Si sigues empujando al llegar al final, la dirección cambia sin que nada se mueva en pantalla: la página nueva encuentra la misma cabecera en el mismo sitio y continúa con lo que quedaba del impulso.
Nada pesado en la entrada
Los shaders se compilan en cuanto existe una imagen y cada textura se envía a la tarjeta gráfica en el mismo fotograma en que se decodifica, así que la entrada no pierde ni un fotograma.
Dos idiomas
Escrito, no traducido
El español es un texto propio con los mismos hechos, tendido sobre la estructura del inglés bloque a bloque. Si un bloque, una cifra o un pie de foto está en un idioma y no en el otro, la compilación se detiene y dice dónde.
Sin proxy ni detección
Cada visitante recibe el idioma de la dirección que abrió. Cada página nombra a su gemela, y las direcciones en español están en español.
Una tipografía que aguanta los dos
Los textos grandes se desplazan lo que mide la tinta de la letra con la que empieza cada línea, para que caigan exactamente sobre el margen, y cada máscara deja sitio para una mayúscula acentuada.
El CV
Un CV para personas y para programas
Sigue el formato de Oxford, en una sola columna y en orden de lectura, sin tablas, imágenes ni iconos, y se imprime en dos hojas en cada idioma.
Se lee antes de publicarse
El script que imprime el PDF lo vuelve a leer como texto y se detiene si el nombre no es la primera línea, si falta un encabezado o está fuera de orden, o si se pasa a una tercera hoja.
Tipografía llana sobre el papel
En papel el texto va sin tracking ni kerning: con ellos el navegador escribe cada letra por separado y un programa lee P R O F I L E.
Identidad
La O y la A en una sola línea
El monograma es un anillo y una A cuya pata izquierda sale del anillo por una tangente, de modo que el trazo de la O continúa como el de la A.
Dibujado, no generado
Un solo script guarda los cinco números de los que está hecho y escribe todos los archivos a partir del mismo contorno: la marca de la barra, los iconos del navegador y los archivos de marca.
El mismo contorno en acero
La versión en metal es ese contorno extruido y biselado en three.js, iluminado por un estudio escrito con números. Sin modelos de imagen y sin mapas de entorno.
Detalles
Completo sin el lienzo
Sin WebGL, o si el visitante prefiere menos movimiento, el lienzo no se carga y el sitio es una página normal que lo dice todo.
Tarjetas que cambian de dirección
El archivo de cada tarjeta para compartir lleva en el nombre un hash de su imagen, porque las redes guardan una tarjeta por su dirección y no vuelven a mirarla.
Descripciones a medida
Cada página tiene una descripción escrita para caber en un resultado de búsqueda, y la compilación rechaza la que se pasa.
