Monolith

Monolith is an architecture-studio template built for practices that want their body of work to feel inevitable. Nine routes cover a cinematic home, a vertical work archive, full-bleed project files, studio and approach pages, a journal, contact and 404. The whole site is organised around a title-block apparatus, Space Mono spec rows listing client, location, area, coordinates and materials, that sits sticky beside every project narrative. The home page pins a horizontal featured strip with a live numeric index rail, and the hero dissolves through twelve vertical tiles before the headline masks up. Three tokenised skins (Plaster, Dusk, Blueprint) switch from the nav and persist in localStorage. Fifteen CC-licensed architecture photographs ship in AVIF, with Lenis smooth scroll and shared-element view transitions between the archive and each project file.

What’s inside

• 9 routes, Home, Work archive, Project file, Studio, Approach, Journal, Journal post, Contact, 404
• Pinned horizontal featured strip, ScrollTrigger pin + scrub 0.6 with a live 01–03 index rail that tracks progress across the featured projects
• Tile-dissolve hero, twelve vertical tiles scale away with a 0.045s stagger, then headline lines mask up on expo.out
• Title-block apparatus, Space Mono spec rows (client, location, year, area, category, status, coords, materials) sticky on every project page
• 3 tokenised skins, Plaster (light), Dusk (dark), Blueprint (navy) switched from the nav and persisted to localStorage
• Custom cursor, accent dot plus a contextual label tag (view / read / open / send) driven by data-cursor attributes

The signature

The home page pins the viewport and drags a horizontal strip of featured projects sideways with a scrub of 0.6, while a docked vertical rail of mono numerals (01, 02, 03…) lights the active panel in terracotta as you pass it. Before that, the hero dissolves: twelve full-height tiles of background colour retract from the top with a 0.045s stagger, uncovering the photograph beneath, then the headline lines mask up from overflow-hidden wrappers. Clicking any panel morphs its image straight into the project hero through a shared-element view transition.

See it live

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