Datum

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.

Qué incluye

• 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

La 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.

Verlo en vivo

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