Datum: Astro Architecture Studio Template

About This Template

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.

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.

Features

• 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
• Works filter — All / Residential / Cultural / Commercial / Interiors with per-chip counts and a GSAP Flip reflow on every change
• Pinned horizontal walkthrough on project pages — rooms scroll sideways with a scrubbing progress rail, stacking vertically on mobile
• 6 projects with room-by-room dimension captions (↔ 12 400 mm, ↕ 4 200 mm) instead of generic gallery text
• Draftsman crosshair cursor with contextual labels — VIEW, DRAG, OPEN — read from data-cursor on the hovered element
• Magnetic buttons with per-element strength via data-magnetic, bound globally in the layout
• Measure primitive — real drafting dimension lines with end ticks, horizontal or vertical, in default or accent tone
• SplitText line mask-up headline that waits on document.fonts.ready so lines never split against a fallback font
• Journal collection (3 posts) loaded with the Astro glob loader, plus a project inquiry form with type, budget and timeline selects and client-side validation
• Reduced-motion and touch fallbacks everywhere — static blueprint overlay, instant filtering, cursor disabled
• 35 images optimized to AVIF/WebP through a tuned sharp pipeline, JSON-LD ArchitectFirm schema, canonical URLs, noindex prop and @astrojs/sitemap, TypeScript strict

Need a CMS?

Every template can be delivered on EmDash, Cloudflare's open-source CMS and our main one, or as a WordPress or Sanity build. Your content team edits copy and images without touching code. Tell us which one you need and we will quote the conversion.

SanityGet in touch

Deployment