Overview
Alder & Stone is a one-page site for a fictional architecture and interiors studio. The whole page is a single scroll timeline: a preloader folds a ticking ruler into the studio mark, then the hero dives through a city block drawn as points in three.js while the headline and glass cards dissolve into a studio statement. Further down, Services presents two disciplines, Architecture and Design, with service lists that open from eye buttons and three alternative layouts to choose from. Projects is a draggable carousel of eight projects, Method stacks one block per stage as you scroll, Process is a 3D scene with hotspots that explain each step, and the footer closes with a hairline grid, a newsletter field and the studio mark. It is built with Vite 8 and three.js, with plain JavaScript and CSS split by area. Sizes scale from one unit tied to the window width, and the colours, easing curves and fonts live in a short block of tokens at the top of the stylesheet. Included: the complete source as a Vite project, a ready-built dist folder you can upload to any static host, the project and method images, a README with run, customize and deploy notes, AGENTS.md and CLAUDE.md for AI coding tools, and credits, packaged as a private member download.
Highlights
- Production-ready, documented source
- Clean, componentized architecture
- Drops into your stack with minimal setup
