Monolith

About This Template

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.

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.

Features

• 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
• Shared-element view transitions — the project thumbnail morphs into the detail hero via view-transition-name
• 2 content collections — projects (6 Markdown entries) and journal (3 entries) with typed Zod schemas
• Zigzag work archive with clip-path mask-up reveals and alternating left/right image direction
• Full-bleed next-project link closing every project file, cycling through the whole archive
• Scroll reveals use native CSS animation-timeline: view() where supported, with an IntersectionObserver fallback
• Lenis smooth scroll (duration 1.15) + ScrollTrigger, destroyed and re-initialised on every ClientRouter navigation
• 15 CC-licensed architecture photographs, served as AVIF through a tuned sharp pipeline (quality 62, effort 6)
• SVG fractalNoise grain overlay, fixed edge fades and hairline outlined background typography
• Contact form with client-side validation and a success state — wire PUBLIC_FORM_ENDPOINT (Formspree/Resend) to go live
• prefers-reduced-motion honoured everywhere, no pinning on coarse pointers, sitemap + canonical + OG + robots.txt + llms.txt, TypeScript strict

Deployment