Datum

Sobre Este Template

Datum es una plantilla medida, de luz fría, para estudios de arquitectura e interiorismo. Ocho rutas cubren home, un índice de obras con filtros, páginas de detalle de proyecto, la página de estudio, índice y artículo de journal, contacto y un 404. Su componente signature pinnea el hero y hace un clip-wipe del render arquitectónico hacia un dibujo de líneas de sí mismo: la sección SVG se dibuja vía stroke-dashoffset, una línea de datum se extiende de lado a lado y las cotas en mono entran midiendo, con la lectura de datum en teal. El mismo componente funciona en modo hover sobre todas las cards de proyecto —cada categoría con su propio set de líneas— e incluye un modo in-view para columnas altas. Las páginas de proyecto abren un recorrido horizontal pinneado con barra de progreso con scrub, y la grilla de obras se reordena con GSAP Flip en cada cambio de filtro. Construida sobre Astro 6, con cursor de crosshair de dibujante y botones magnéticos.

Firma

El hero pinnea todo el viewport y le cede el control del scroll a BlueprintReveal. Mientras haces scroll, un clip-path transforma el render arquitectónico en un dibujo de líneas del mismo edificio: la sección SVG — volumen a dos aguas, línea de forjado, ala acristalada, tabiquería interior — se traza sola mediante stroke-dashoffset, una línea de datum se extiende a todo el ancho del frame y las cotas en Space Mono entran midiendo, con la lectura de datum en teal. El mismo componente mueve todas las cards de proyecto en modo hover —cada categoría con su propio set de líneas— y deja disponible un modo in-view para columnas altas.

Características

• 8 rutas — Inicio, índice de Works, detalle de Proyecto, Studio, índice de Journal, artículo de Journal, Contacto, 404
• BlueprintReveal — un wipe con clip-path pinneado y con scrub que convierte el render del hero en un dibujo de líneas de sí mismo
• Sección SVG que se dibuja sola — los paths arquitectónicos se trazan vía stroke-dashoffset mientras una línea de datum se extiende de lado a lado del frame
• Cotas en mono (+0.000 DATUM, ↔ 14 200) que entran midiendo al completarse el dibujo, con la lectura de datum en teal
• Un componente, tres drivers — scrub pinnea el hero, hover mueve todas las cards de proyecto y un modo in-view queda listo para columnas altas
• Sets de líneas data-driven — cada categoría de proyecto define sus propios paths y cotas en un viewBox de 100×62
• Filtro de obras — All / Residential / Cultural / Commercial / Interiors con conteo por chip y reflow con GSAP Flip en cada cambio
• Recorrido horizontal pinneado en las páginas de proyecto — las estancias avanzan en horizontal con barra de progreso con scrub y se apilan en vertical en móvil
• 6 proyectos con captions de cotas estancia por estancia (↔ 12 400 mm, ↕ 4 200 mm) en lugar de texto de galería genérico
• Cursor crosshair de dibujante con labels contextuales — VIEW, DRAG, OPEN — leídos del data-cursor del elemento en hover
• Botones magnéticos con fuerza por elemento vía data-magnetic, enlazados globalmente desde el layout
• Primitivo Measure — líneas de cota reales con ticks en los extremos, horizontal o vertical, en tono neutro o de acento
• Headline con mask-up por líneas de SplitText que espera a document.fonts.ready para no dividir líneas contra una fuente fallback
• Colección de journal (3 posts) cargada con el glob loader de Astro, más formulario de consulta con selects de tipo, presupuesto y plazo y validación en cliente
• Fallbacks de reduced-motion y touch en todo — overlay de plano estático, filtrado instantáneo, cursor desactivado
• 35 imágenes optimizadas a AVIF/WebP con un pipeline de sharp ajustado, JSON-LD ArchitectFirm, URLs canónicas, prop noindex y @astrojs/sitemap, TypeScript estricto

Despliegue