Architecture Studio Template Template
A complete one-page site for an architecture practice: a scroll-scrubbed blueprint hero that draws a building elevation in orange linework and crossfades into the finished photograph, plus a project index with live preview swaps, count-up stats, and a parallax featured project.
About This Template
A production-ready one-page site for architecture practices, engineers, and design studios, art-directed as a drawing office: cool concrete grey, ink, one drafting orange, and an expanded grotesk set in caps. The signature moment is a pinned hero where an SVG building elevation sketches itself line by line as you scroll, then crossfades into the photograph of the finished building with the linework settling over the top. Below it, a project index table swaps a fixed preview photograph as you hover or tab through the rows, stats count up, and a featured project drifts with soft parallax. Uses the stroke-dashoffset technique, so no DrawSVG plugin is needed. Swap the placeholder copy, drawing, and photography for your own and deploy anywhere as static files.
What's Included
- Complete deployable one-page site: nav, blueprint hero, practice statement, project index, featured project, people, journal, and contact sections
- Pinned scroll-scrubbed blueprint hero: the elevation draws stroke by stroke, then crossfades into the finished photograph
- No DrawSVG plugin required: shapes are auto-measured with getTotalLength() and drawn with stroke-dashoffset
- Project index table where hovering or focusing a row crossfades a fixed preview image beside it
- Count-up practice stats with suffix support
- Soft parallax drift on the featured project photograph
- Bundled placeholder photography as optimised WebP files with the cool slate grade baked in, plus solid colour fallbacks
- Lenis smooth scrolling wired in and fully optional
- Accessible: reduced motion and no-JS both get the complete static page with the drawing finished and photo visible
Perfect For
- Architecture and landscape practice websites
- Structural and civil engineering studio sites
- Interior design and conservation specialist portfolios
- Property developer and design-and-build one-pagers
- Any studio whose work deserves a drawing-office aesthetic
How It Works
One script initialises each section inside a single gsap.context with gsap.matchMedia. The hero pins with ScrollTrigger and scrubs a timeline that draws every SVG shape using the classic stroke-dasharray and stroke-dashoffset technique, with each stroke's duration proportional to its measured getTotalLength() so pen speed feels constant; the finished photograph then fades in beneath the linework on the same timeline. The project index stores one handler per row in a Map, mirrors mouseenter with focus, and crossfades absolutely stacked preview images with autoAlpha. Stats animate a proxy object with snapped values, and the featured photograph scrubs yPercent between triggers. A prefers-reduced-motion branch renders the whole page static with the drawing complete and all values final.