Architecture Practices - Template

Architects think in section and plan, so the website does too. Section pins your photography on one side and draws each project's floor plan line by line as the visitor scrolls through it, then un-draws it on the way back up.

Signature interaction. A sticky diptych: the photograph crossfades while the project's plan draws itself in step with the scroll.

Features

• Scroll-drawn plans. Each project's plan draws line by line as its entry crosses the screen.
• Self-drawing elevation. A clean line elevation draws itself in the hero on load.
• Sticky photography. Photographs crossfade in a pinned half while the projects scroll.
• Practice in figures. Years, buildings, square metres and team size that count up.
• Approach and awards. Numbered approach rows, awards with counts and client quotes.
• Project pages. Wide hero, project facts, brief, a drawn plan and an image grid.

What's included

• A home page and 8 project case pages, generated from one content file
• Every word, image, link and colour in content.json, so no code changes are needed to make it yours
• README and a buyer guide for editing, building and deploying
• The Studio Engine: Vite, TypeScript, smooth scrolling and animation
• Self-hosted open licence (OFL) fonts and generated placeholder images
• QA notes with the test results

Built right

• Lighthouse mobile 97 to 100 performance, 100 accessibility, best practices and SEO
• Keyboard accessible, works without JavaScript and respects reduced motion
• About 60 KB of JavaScript gzipped
• Deploys as static files to any host