Cuatro formas de construir la misma página. La pregunta es cuál necesita tu negocio.

Tipografía, espacio y contención. Sin librerías, sin efectos de scroll, sin nada que tenga que cargar antes de que la página sirva. Todo lo que da este nivel son decisiones de diseño, no código.

Entregado a este nivel: 18 páginas — las cinco páginas de servicio de un salón de dos casas, tres conceptos de negocio local, cuatro maquetas de muestra y casi todo este sitio. Contadas sobre los sitios publicados, no sobre los archivos: esta semana dos portadas subieron de nivel y esta cifra se movió con ellas.

La misma contención, más el movimiento que el navegador hace de forma nativa: contenido que aparece según llegas a él, con tiempos y curvas sacados de un sistema documentado en vez de inventados en cada proyecto.

Entregado a este nivel: una portada — un salón de dos casas en Barcelona. Hasta esta semana era nivel 1, y esta página lo decía. Ahora su contenido llega según bajas, con animation-timeline: view() — CSS, ni una librería, así que los 17 KB de arriba compran todavía menos de lo que creíamos.

El scroll conduce la página: una sección que se queda quieta mientras su historia avanza, una galería que arrastras con peso e inercia, una portada pintada fotograma a fotograma. El mensaje sigue viviendo en HTML normal por debajo — esa regla no se dobla a este nivel.

Entregado a este nivel: seis componentes repartidos en dos portadas — la de este sitio (portada con shader, sección fijada, galería de arrastre, el logo que se dibuja solo y la luz que cruza el titular) y la de un salón (una fila de arrastre). En total hay nueve construidos, cada uno como demo aislada con sus propias cifras y su propio plan B. Los cinco que no están entregados no han encontrado todavía un proyecto que los necesitara, y preferimos decirlo a inventarnos uno.

WebGL completo — el nivel en el que la página entera se dibuja en vez de maquetarse. Es el nivel del que todo el mundo hace captura y que casi nadie necesita.

Demostración de nivel 4: una escena WebGL en tiempo real con el faro de Faro de noche. Su haz barre el encuadre y va encendiendo tres palabras a su paso, y con el ratón encima el haz sigue al cursor, así que quien mira decide qué palabra se ilumina — tus reseñas, tu horario, tus precios. Esas tres palabras son texto real de la página, no píxeles dibujados dentro del lienzo: se pueden seleccionar y se pueden buscar. Son la misma idea que vende Faro, hacer visible lo que un negocio ya tiene. La escena se dibuja en un lienzo con unas 120 líneas de WebGL escrito a mano, sin ninguna librería de 3D, y está confinada a una caja en vez de cubrir la página, así que el resto de esta página sigue siendo rápida. Todo lo que dice la escena está también escrito aquí en texto, que es la condición que hace que el nivel 4 sea utilizable siquiera.

Entregado a este nivel: una escena, en dos sitios. Esta, y el hero de la portada — solo a partir de 1100 px de ancho. Por debajo ni se monta ni se descarga: una página que tiene que convertir a alguien que llega de Google desde el móvil no paga un shader que allí no arregla nada. Y es el mismo archivo en los dos, no una copia. Seguimos sin venderte un sitio construido así salvo que el trabajo de tu sitio sea una reputación y no un cliente — pero «no lo hacemos» y «no lo recomendamos» son frases distintas, y solo la segunda fue verdad alguna vez.