Monolith

Monolith es una plantilla para estudios de arquitectura pensada para despachos que quieren que su obra se sienta inevitable. Nueve rutas cubren un home cinematográfico, un archivo vertical de trabajo, fichas de proyecto a sangre, páginas de estudio y método, un journal, contacto y 404. Todo el sitio gira en torno a un aparato de title-block, filas de specs en Space Mono con cliente, ubicación, superficie, coordenadas y materiales, que queda sticky junto a la narrativa de cada proyecto. El home pinnea un strip horizontal de proyectos destacados con un rail de índice numérico en vivo, y el hero se disuelve a través de doce tiles verticales antes de que el titular haga mask-up. Tres skins tokenizadas (Plaster, Dusk, Blueprint) se cambian desde el nav y persisten en localStorage. Incluye quince fotografías de arquitectura con licencia CC en AVIF, smooth scroll con Lenis y view transitions de elemento compartido entre el archivo y cada ficha de proyecto.

Qué incluye

• 9 rutas, Inicio, Archivo de trabajo, Ficha de proyecto, Estudio, Método, Journal, Post de journal, Contacto, 404
• Strip horizontal pinneado de proyectos destacados, pin de ScrollTrigger + scrub 0.6 con rail de índice 01–03 que sigue el progreso a lo largo de los proyectos destacados
• Hero con disolución en tiles, doce tiles verticales se retraen con stagger de 0.045s y las líneas del titular hacen mask-up con expo.out
• Aparato de title-block, filas de specs en Space Mono (cliente, ubicación, año, superficie, categoría, estado, coordenadas, materiales) sticky en cada página de proyecto
• 3 skins tokenizadas, Plaster (claro), Dusk (oscuro), Blueprint (azul técnico) conmutables desde el nav y persistidas en localStorage
• Cursor custom, punto de acento más etiqueta contextual (view / read / open / send) controlada por atributos data-cursor

La firma

El home pinnea el viewport y arrastra lateralmente un strip horizontal de proyectos destacados con un scrub de 0.6, mientras un rail vertical de numerales mono (01, 02, 03…) enciende en terracota el panel activo al pasar. Antes de eso, el hero se disuelve: doce tiles de altura completa se retraen desde arriba con stagger de 0.045s, destapando la fotografía que hay debajo, y luego las líneas del titular hacen mask-up desde wrappers con overflow-hidden. Al hacer clic en cualquier panel, su imagen se transforma directamente en el hero del proyecto mediante una view transition de elemento compartido.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/monolith/. 9 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.