Datum

Datum is a measured, cool-light template for architecture and interior design studios. Eight routes cover home, a filtered works index, project detail pages, the studio page, a journal index and article, contact, and a 404. Its signature component pins the hero and clip-wipes the architectural render toward a paper line-drawing of itself: the SVG section draws on via stroke-dashoffset, a datum reference line extends across the full width, and mono dimension labels tick in with the datum readout set in teal. The same component runs in hover mode on every project card, each category with its own line set, and ships an in-view mode for tall columns. Project pages open a pinned horizontal walkthrough with a scrubbing progress rail, and the works grid reflows through GSAP Flip on every filter change. Built on Astro 6 with a draftsman crosshair cursor and magnetic buttons.

What’s inside

• 8 routes, Home, Works index, Project detail, Studio, Journal index, Journal article, Contact, 404
• BlueprintReveal, a pinned, scrubbed clip-path wipe that turns the hero render into a line drawing of itself
• Self-drawing SVG section, architectural paths draw on via stroke-dashoffset while a full-width datum line extends across the frame
• Mono dimension labels (+0.000 DATUM, ↔ 14 200) tick in as the drawing completes, with the datum readout set in teal
• One component, three drivers, scrub pins the hero, hover drives every project card, and an in-view mode is ready for tall columns
• Data-driven line sets, each project category defines its own paths and dimension labels in a 100×62 viewBox

The signature

The hero pins the entire viewport and hands scroll control to BlueprintReveal. As you scroll, a clip-path wipes the architectural render toward a paper line-drawing of the same building: the SVG section, pitched mass, slab line, glazed wing, interior partitions, draws itself on through stroke-dashoffset, a datum reference line extends the full width of the frame, and Space Mono dimension labels tick in, the datum readout set in teal. The same component powers every project card in hover mode, each category with its own authored line set, with an in-view mode available for tall columns.

See it live

The demo is public: https://fpsjago.github.io/Datum/. 8 pages, built with Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.