Monolith

Sobre Este Template

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.

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.

Características

• 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
• View transitions de elemento compartido — la miniatura del proyecto se transforma en el hero de detalle vía view-transition-name
• 2 colecciones de contenido — proyectos (6 entradas Markdown) y journal (3 entradas) con schemas Zod tipados
• Archivo de trabajo en zigzag con revelados clip-path mask-up y dirección de imagen alternada izquierda/derecha
• Enlace al siguiente proyecto a sangre al cierre de cada ficha, recorriendo todo el archivo
• Los reveals en scroll usan animation-timeline: view() nativo donde está soportado, con fallback a IntersectionObserver
• Smooth scroll con Lenis (duration 1.15) + ScrollTrigger, destruidos y reinicializados en cada navegación de ClientRouter
• 15 fotografías de arquitectura con licencia CC, servidas en AVIF con pipeline sharp afinado (quality 62, effort 6)
• Overlay de grano SVG fractalNoise, edge fades fijos y tipografía de fondo con contorno de 1px
• Formulario de contacto con validación en cliente y estado de éxito — conecta PUBLIC_FORM_ENDPOINT (Formspree/Resend) para activarlo
• prefers-reduced-motion respetado en todo el sitio, sin pin en punteros coarse, sitemap + canonical + OG + robots.txt + llms.txt, TypeScript strict

Despliegue