Fable 13 · Guide 02 · Real estate
The brief: a real-estate agency with property listings, filters, and a virtual-tour embed. The idea: a small studio that sells only modernist houses — so the site borrows the language of the architecture it sells: plaster field, hard grids, expanded caps, one pool-water accent.
The "virtual tour" is not an embedded service: it is a procedural three.js panorama built from primitives — a gradient sky dome, a sun disc and halo, plaster walls with warm glass, a pool with a light glint, loungers, pergola shadow stripes, contact shadows, scattered boulders and a distant ridge. Three tours (desert, coast, upstate) recolour the same courtyard the way a light study would. Drag to look; it drifts slowly on its own until you take the wheel. Everything loads lazily — three.js is only imported the first time a tour opens.
Archivo set wide (wdth 122, weight 800) gives the poster-caps voice —
the hero alternates solid, stroked and pool-teal lines. Albert Sans carries copy,
Fragment Mono does specs and labels like a plan annotation.
Six houses render from a data array. Region chips and a price-direction toggle re-render the
grid, and Motion staggers the cards back in
(stagger(0.06), expo-out). Card layout patterns were sanity-checked against listing
cards on 21st.dev; the badge/spec/price anatomy is
rebuilt in TERRENO's own voice. Photography is from Unsplash (free license), self-hosted.
Process — three passes
.hero .meta div
also matched the nested number/label divs; scoped to a child selector. Removed a dead
mullion loop with an invalid colour string.