The Glasshouse
Box Hill, Surrey
- Concept. A fictional day spa and estate; nothing here can be booked.
- Mark, wordmark and lockup, eight generated stills, a synthesised soundscape, copy and prices, a one-page website with a four-step reservation.
- 7 November 2026. This is version 1.
- Next.js 16, React 19, Tailwind 4, GSAP, Lenis, Three.js, Framer Motion, Leaflet; Higgsfield (GPT Image 2.6); HarfBuzz and fontTools.
A glasshouse spa set into forty acres of chalk downland above Dorking: thermal water drawn from the chalk, a walled garden, an apothecary, and a kitchen that cooks what the garden gives.
One idea per screen, no cards.
The brief named the palette, the type, four photographs and the headline, and asked for a luxury day-spa site at award standard. The benchmarks it pointed to (Heckfield Place, Beaverbrook, Aman) share a grammar: serif display at a light weight, tracked capitals for metadata, chalk, sage and clay, generous space and one idea per screen. The estate plan and the treatment list are hairline-ruled rows, not grids of boxes. No component kits, no gradients, no glass panels, and one easing curve for every state change.
One line was used as written and disagreed with: the headline, "Where the Surrey Wilderness Meets Deep Restorative Science." It is the weakest line on the site, a "Where X meets Y" construction that could sit above any wellness brand, and a replacement went into the hand-over notes.
An oak leaf, wrapped by a rose.
The mark is an oak leaf with three rounded lobes each side, a midrib and veins, wrapped by a rose stem that crosses it twice and ends in two hips with their sepals, and one thorn. It is generated from geometry in a Python script so the crossings break the leaf outline cleanly. It took three rounds: the first lobes were too sharp and the stem read as an arrow; the second stem looped into a balloon; the third kept.
The wordmark is THE GLASSHOUSE tracked at 0.24em with Surrey Hills in italic, shaped with HarfBuzz and outlined with fontTools. In the header it is outlined paths, so it never waits on a webfont.
Chalk, sandstone, sage, clay, ink.
Five tokens, exactly as the brief set them, with tints derived for text and rules. Chalk and sandstone carry most of the page, sage takes the footer, and clay is the accent.
- Chalk#F9F7F2
- Sandstone#EFECE4
- Sage#2D3A31
- Clay#9E6B55
- Ink#1E2220
Cormorant Garamond and Plus Jakarta Sans.
Cormorant Garamond at 300 and 400, with italics, for display; Plus Jakarta Sans, variable, for text and interface, with metadata tracked at 0.15em. Both are self-hosted under the SIL Open Font Licence. The brief suggested Satoshi, which is not open-licensed for self-hosting through npm, so it was not used.
Forty acres
Plus Jakarta Sans 500, caps, +0.15em
Plus Jakarta Sans 400
Cormorant Garamond 300
Eight stills, and a soundscape with no files.
Eight stills through Higgsfield with GPT Image 2.6 at 2K: the four prompts from the brief with a short art-direction suffix (late autumn, slender black glazing bars, muted sage, parchment and wet clay, film grain, no people, no text), plus a treatment suite, the apothecary, the walled garden and the hero again at golden hour. One prompt was refused by the provider's filter and re-written as a still life of hands pouring oil. About 25 credits in all.
The sound is synthesised in the browser with the Web Audio API: a filtered pink-noise wind bed with a slow drift, swept chirps across the stereo field and an occasional wood-pigeon figure. Nothing plays until the visitor presses the toggle.
A shader hero, an estate plan and a four-step booking.
Next.js with React, Tailwind and TypeScript. The hero is drawn through a Three.js fragment shader: pointer-driven ripples that decay, a soft lens under the resting pointer, grain, and a crossfade from the daytime still to golden hour as the pinned hero scrolls. The suites gallery pins and scrolls sideways, with drag on a desktop and a native scroller on touch. Lines and words reveal through masks. A difference-blend cursor turns into a labelled pill over DRAG, EXPLORE and BOOK.
Treatments are twelve rituals in four tabs with four length filters; a name opens a drawer with the full description, and a plus adds it to an itinerary that the header counts. The reservation is a four-step overlay that ends in a reference number. Reduced motion turns off smooth scroll, the cursor, the shader, the pins and the reveals, and the page reads as a normal document.
The original ran on next start with two server routes that validated the booking and the enquiry. For this site it is a static export served from /glasshouse/: the same validation runs in the browser and returns the same answers, and nothing is sent anywhere. The footer map uses CARTO's label-free dark tiles over OpenStreetMap, tinted to sage with a CSS filter.
- 01Header: hides on the way down, returns on the way up, sound toggle, Reserve Experience with an itinerary count.
- 02Hero: the shader, the headline from the brief, two actions, four facts (two on phones).
- 03Manifesto: landscape and title moving at different speeds.
- 04Estate: an SVG plan with contours, woodland and the Mole, four hotspots.
- 05Treatment rituals: tabs, filters, a drawer, add to itinerary.
- 06Suites: pinned horizontal gallery.
- 07Spa kitchen: elixir teas, raw bowls, cold-pressed juices.
- 08Footer: the map, address, hours and an enquiry form.
Type, code and what is invented.
Cormorant Garamond by Christian Thalmann and Plus Jakarta Sans by Tokotype, both SIL OFL 1.1, via Fontsource. GSAP, Lenis, Three.js, Framer Motion and Leaflet. Map tiles © OpenStreetMap contributors, © CARTO.
The estate, the treatments, the prices, the people and the telephone number are invented; the number is from Ofcom's drama range and the email domain is .example, so neither reaches anyone. The address is the National Trust's Box Hill address, used as the brief supplied it. The photography is generated, and the site's footer says so.