005
AI ready

Architecture Firm Template

£20 or the whole Vault, £79.20

One-page site for any practice that shows built or made work: architects, engineers, landscape and interiors. The hero draws a blueprint elevation in linework as you scroll and crossfades into the photograph, over a project index with live preview swaps, count-up stats and a parallax featured project.

ScrollTrigger Lenis intermediate
7 more details
svg-line-drawscrubpinningscroll-revealhover-effectcount-upparallax

This template reads better at your own screen size than in the frame below:

Open the template in a new tab
Open Architecture Firm Template template in new tab

Updated

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.

Draws its linework without the DrawSVG plugin, so that is one less script to load. Swap the placeholder copy, drawing, and photography for your own and deploy anywhere as static files.

Architecture Firm Template - website template preview

What's included

9 items
  • 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: every shape is timed from its own line length and draws itself
  • 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

5 use cases
  • 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

4 sections

Structure

One script initialises every section with a single setup and teardown path and one motion branch.

The drawn blueprint

The hero pins with ScrollTrigger while the SVG elevation draws itself line by line as you scroll, each stroke taking time in proportion to its own length so the pen speed stays constant; the finished photograph then fades in beneath the linework on the same timeline. The project index crossfades a fixed preview photograph as you move down the rows, driven from keyboard focus as well as hover, so tabbing through the index shows the same thing hovering does.

Stats and parallax

Stats count up to their final figures, and the featured photograph drifts at its own pace against the scroll.

Reduced motion

A prefers-reduced-motion branch renders the whole page static with the drawing complete and all values final.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

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. The linework is drawn by the template itself, so there is no extra plugin to load or license. Any SVG made of stroke paths will draw, so you can swap in your own elevation without touching the animation code.

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.

Paid template

Purchase to unlock the code.

Buying Architecture Firm Template opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£20 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

What's Included

Code snippet omitted: it ships with the download.

Quick Start

1. Open index.html in a browser. The template is fully self-contained; GSAP, ScrollTrigger, and Lenis load from CDN, and all photography is bundled locally in assets/img/. It works offline apart from the fonts and GSAP scripts.

2. Make it yours:

  • Replace the text content in index.html (practice name, projects, people, contact details)
  • Swap the blueprint drawing: the hero SVG (.bp-svg) is a hand-drawn elevation made of plain line, rect, and circle elements. Replace it with your own building drawn in the same viewBox (or export simplified linework from CAD as SVG strokes). Any path, line, polyline, polygon, circle, ellipse, or rect inside it is measured and drawn automatically
  • Swap the photography (see below)
  • Change the palette by editing the custom properties at the top of assets/style.css: --drafting (the orange), --concrete, --ink

3. Deploy. Static files, no build step. Any host works: Netlify, Vercel, GitHub Pages, or a plain server.

Optional: minify before you go live

assets/script.js is the readable source and is what index.html loads. It is around 14KB, which is fine to ship as-is. If you would rather serve it minified, produce it yourself once your edits are done:

Code snippet omitted: it ships with the download.

Then point the last <script> tag in index.html at assets/script.min.js. Keep script.js as the file you edit and re-run the command after each change, otherwise the two quietly drift apart.

Photography

All photographs ship in the template as optimised WebP files in assets/img/, already cropped to their display sizes and totalling under 1 MB for the whole set. They are art-directed derivatives, not originals: the practice's cool slate grade (partial desaturation, a slate tint, and a slight brightness lift to sit on the light concrete ground) is baked into the pixels, so photographs from different sources read as one body of work. The originals are royalty-free Unsplash photos; see the credits below.

  • To swap a photo: the simplest route is to drop your own WebP over the matching file in assets/img/ (hero .stage-photo, index .preview-imgs, featured and people images), or point the <img> src at your own file and update its width/height attributes
  • To regenerate the set: assets/img-manifest.json records every source URL, output name, size, quality, and the grade recipe. Edit the src entries (or the grade), then from the GSAP Vault repo root run bun scripts/build-template-assets.ts architecture-studio-template --force. The build downloads each source, crops it cover-style to the manifest dimensions, bakes the grade, and writes the WebP files. The grade used throughout is saturation 0.4, brightness 1.05, tint #8E99A8; the tint is what pulls warm and cool photos onto the same slate
  • The order of .preview-img elements must match the order of .index-row elements; row N fades in image N
  • Legibility overlays: each image wrapper layers a soft cool gradient (rgba(56, 66, 78, ...)) so the orange linework and captions stay readable, plus a solid background fallback so a missing image never leaves a hole. Keep these even with your own photography; the colour grade itself lives in the image files, not the CSS
  • If your photography is already graded: skip the manifest grade block (or loosen it) when regenerating, and the build will only resize and compress

Photo credits

Original photographs from Unsplash, used under the Unsplash license:

Full source URLs with crop parameters are in assets/img-manifest.json.

Sections & Options

Every section can be removed independently; the script skips anything it doesn't find.

Blueprint Hero ([data-hero] + [data-blueprint])

The hero pins and a scrubbed timeline draws every shape inside .bp-svg using stroke-dashoffset, each stroke paced by its measured length, then crossfades in the .stage-photo. Scroll distance is set by end: '+=170%' in initBlueprintHero() in assets/script.js; raise it for a slower draw. Delete the <img> to keep the drawing alone, or delete the whole <figure> for a plain hero.

Practice Statement + Stats ([data-count-group])

Attribute Values Default Description
data-count-group Any number 0.12 Delay between stats (seconds)
data-count-to Any number 0 Target value
data-count-duration Any number 1.6 Count duration (seconds)
data-count-prefix / data-count-suffix Any string none e.g. % or +

Project Index ([data-index])

Hovering or focusing an .index-row crossfades the matching .preview-img in the sticky panel and updates the caption from the row's data-caption. Add rows and images in matching order. The preview panel hides below 900px, where the table stays fully readable. Rows also stagger in once on scroll.

Featured Project ([data-parallax])

Attribute Values Default Description
data-parallax Any number 10 Vertical drift in percent

Works on any absolutely positioned image inside an overflow: hidden container that is taller than its frame.

Reveals ([data-fade-up], [data-hero-intro])

Gentle one-time rises. data-hero-intro elements play on load; data-fade-up elements play when scrolled into view. Add either attribute to any element.

Smooth Scrolling

Lenis is included and optional. To remove it, delete the Lenis <script> tag from index.html; the template detects its absence and falls back to native scrolling.

Accessibility

  • Reduced motion: prefers-reduced-motion: reduce renders the entire page static, with the elevation fully drawn, the photograph visible beneath it, and stats at final values. The index preview still swaps, just without the tween
  • No JavaScript: the page renders complete, with the finished drawing over the photograph; initial hidden states only apply once the script adds .mf-ready to the root element
  • Keyboard navigation: focus mirrors hover on nav links, index rows, and journal rows; tabbing through the project index swaps the preview exactly like the mouse
  • Semantic HTML: nav/main/section/article/footer landmarks, definition lists for stats and facts, real <a> elements for all interactions
  • Screen readers: the preview panel duplicates row information and is aria-hidden; the drawing SVG is decorative and hidden
  • Decorative type: the oversized footer wordmark (.contact-wordmark) is not text. Its string lives on the element's data-mark attribute and is painted by .contact-wordmark::before { content: attr(data-mark); }, so it never enters the accessibility tree or a contrast audit. Change the word by editing data-mark

Customisation Notes

  • Fonts: Anybody (expanded grotesk display, variable width axis), Public Sans (body), Martian Mono (labels and figures) load from Google Fonts. Swap the <link> in index.html and the --font-display / --font-body / --font-mono variables in style.css to rebrand. The expanded feel comes from font-stretch / font-variation-settings 'wdth' on display elements
  • Section order: sections are independent; reorder them in index.html without touching the script
  • Drawing style: stroke weight and colour live on the .bp-svg element selectors in style.css; vector-effect: non-scaling-stroke keeps lines crisp at every size

Dependencies

Required:

  • GSAP 3.12+
  • ScrollTrigger plugin

Optional:

  • Lenis (smooth scroll, included by default)

No DrawSVG or other Club plugins; the line draw uses the stroke-dasharray / stroke-dashoffset technique with getTotalLength().

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.