Architecture Studio 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.
Read the full template overview
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
Structure
One script initialises each section inside a single gsap.context with gsap.matchMedia.
The drawn blueprint
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 and parallax
Stats animate a proxy object with snapped values, and the featured photograph scrubs yPercent between triggers.
Reduced motion
A prefers-reduced-motion branch renders the whole page static with the drawing complete and all values final.
Questions about this template
Do I need my own building drawings for the blueprint hero?
You need an SVG line drawing of something. The hero scrubs an elevation stroke by stroke and then crossfades to the photograph, so the drawing and the photo should be the same building. If you do not have CAD output, tracing the elevation from a photo in Illustrator is a couple of hours and is what the effect is built to accept.
Does the drawing animation need the DrawSVG plugin?
No. It measures each path with getTotalLength() and animates stroke-dashoffset directly, so there is no Club plugin dependency and nothing extra to load. Any SVG with stroke paths will draw.
What does someone see if the scroll animation never runs?
The finished state. Under reduced motion and with JavaScript off, the hero renders with the drawing complete and the photograph visible rather than a blank frame, so the page is never mid-animation for someone who will not see it animate.
Can I use it for interiors or engineering rather than architecture?
Yes. The drawing-office aesthetic reads as technical rather than specifically architectural, and the project index, stats and people sections are practice-agnostic. Interior designers, structural engineers and conservation specialists are all in scope; what matters is having linework worth drawing.
How does the project index preview work if someone is using a keyboard?
The same way. Hovering a row crossfades the preview image beside it, and focusing a row with the keyboard does exactly the same thing, so a keyboard user gets the whole index rather than a list of names.
