Work · three examples

Whatwebuild.

Three example clients, three finished sites, each built as a live preview you can hover over and switch. They show the range: a product launch with a shop, a booking site and a portfolio.

01 · Product launch

Cairnlaw
Distillery

SectorDrinks · IslayScopeBrand, site, shopBuilt in4 weeksStackStatic + edge functions
cairnlaw.scot
Cairnlaw
CasksDistilleryVisitShop
Islay · 55.7°N
Batch 14 · 2,400 bottles
Single maltCairnlaw 12Aged in the weather

Aged
in the
weather.

Twelve winters on the Atlantic side of Islay. Nothing added except the Atlantic.

Reserve batch 14
Weather on the roof

The brief

A whisky that is entirely about its weather should have a website that is too. The distillery already logs wind, rain and temperature from a station on the still-house roof, so we asked for the feed.

The site should feel different on a wet Tuesday than on a still June evening, and the bottle should always be the last thing you look at.

What we built

A single-page launch with a shop attached. The hero grade, the fog and the copy line shift with live conditions on Islay, pulled every ten minutes through an edge function. Batch stock is read straight from the bonded warehouse spreadsheet.

Type is a condensed grotesk set in capitals, echoing the stencilled cask ends. The palette is bottle glass and cask oak, with one warm highlight for anything you can click.

Palette · glass, oak, safelight
Aa
Type · Archivo condensed
Batch 14 · 2,400Reserve
Component · reserve card
55.7°N
6.2°W
Detail · coordinates footer
02 · Booking

Orbita

SectorNear-space tourismScopeSite, booking, telemetryBuilt in5 weeksStackWebGL + Stripe + WebSocket
orbita.flights
Orbita
FlightsCapsuleCrewBook

Thirty
kilometresstraight up.

Six seats. Six hours. A balloon the size of a stadium, and a view most people only see in photographs.

Hold a seat · 2027
Launch window · Mar–Oct
Altitude31,240 mLive from Aurora 3
Move your cursor over the preview: the horizon follows. The altitude figure is a live counter.

The brief

Nobody books a £90,000 balloon flight from a brochure. They book it because they saw the curve of the Earth and could not stop looking. The site had to give them that view first and the price last.

What we built

A WebGL horizon that responds to the cursor, sitting under an extra-wide typeface that stretches right across the screen. When a capsule is in the air, the altitude readout is real, streamed from the flight computer.

Booking is a four-step flow that never leaves the horizon. Seat holds are taken with a card deposit and released automatically after 72 hours.

Palette · void, ionosphere, horizon
Aa
Type · Archivo expanded
Seat 4 of 6 · HeldConfirm
Component · seat hold
31,240 m
Detail · telemetry readout
03 · Portfolio

Vane Kessler
Architects

SectorArchitecture · LeithScopePortfolio, journal, CMSBuilt in3 weeksStackStatic + headless CMS
vanekessler.com
Vane Kessler
WorkStudioJournalContact
Practice · Est. Leith
Project 041 / Harbour house

Buildings that hold still in the wind.

Plan · Level 01 · 1:100

Coastal housing, civic spaces and one lighthouse. Fourteen people in an old sail loft.

View projects
The only light site of the three, on purpose. A drawing office works on paper.

The brief

Architects' websites usually hide the drawings behind glossy photography. This practice draws beautifully and wanted the drawings up front, indexed like a proper drawing register.

What we built

Bone paper, a visible 12-column grid, and a light grotesk with a heavy weight for emphasis. Every project carries a register number, a scale and a revision. Plans draw themselves as you scroll, using stroke animation on inline SVG exported from the practice's own CAD files.

The journal and projects are edited by the practice through a headless CMS; the site rebuilds in under a minute.

Palette · paper, pencil, ink, red-line
Aa
Type · Archivo light / bold
041 · Harbour houseRev C
Component · register entry
1:100
Detail · scale marker