The task
A buyer of an unbuilt home is asked to trust a plan. The usual answer is a folder of renders and a floor plan, which shows the result and says nothing about how it gets there.
So the site was built around the construction itself. Five stages from excavation to keys, the structure explained where it is actually visible, the finished building shown from every side, and the layouts and the location on the same page. Three languages, because the buyer is often not local.
What we built
The build shown as a film in five stages
The first screen is the plot itself, and scrolling runs the build forward: excavation, foundation, structure, envelope, handover. Each stage names what happens, in one line, with two figures beside it, and a strip of five steps at the bottom says where you are.
Over the frame sit hotspots. Open one and it explains a piece of the construction where that piece is visible: the sheet piling around the pit, the bored piles into rock, the climbing formwork, the stair cast into the cliff.
A building you can turn with your hand
After the film the finished building stands alone and turns a full circle. It is ninety-six stills flown at one height and one distance, and you drag them with the mouse or a finger. Left alone, the building keeps turning on its own.
A buyer wants the side facing away from the sea as much as the one on the poster. Frames answer that better than a video, because they stop exactly where the hand stops.
Floors, layouts and what is inside
The building is cut open on the page: seven storeys of homes around one core with two lifts and a stair, and two levels of parking carved into the rock beneath. Each level is labelled, so the section reads without an architect next to you.
Four homes per floor, and the core sits in the middle so every one of them gets a corner and a sea-facing living room. A table lists them side by side with rooms, area and orientation, and under it come the shared spaces: lobby, gym, playroom, coworking, the roof pool.
Generated visuals and three languages
Nothing on the page was photographed. Every frame of the film, every still of the turntable and every interior is generated, which is how a building that does not exist yet keeps one light and one season throughout.
The page runs in English, Portuguese and Russian from one switcher in the header, and the layout is checked in each language before it goes out.
Under the hood
A page this heavy on pictures usually crawls and jumps about while it loads. This one was measured instead: here are the numbers and what holds them up.
Speed
Performance 96 on desktop
Lighthouse measures the desktop page at 96 for performance, with the largest thing on screen drawn in about one second.
Nothing jumps while loading
The measured layout shift on mobile is 0.002, which is as close to nothing as the metric goes.
Pictures
Images cached for a year
The image files are sent with a year-long cache header, so a second visit does not download them again.
Every picture in webp
All twenty-one images on the page are webp, and each one is offered in several sizes, so a phone downloads a phone-sized file and a large screen gets the large one.
Search and accessibility
Accessibility 99 on mobile
The accessibility check comes back at 99 on mobile and 94 on desktop: contrast, heading order, image descriptions and the names of controls.
Full marks for search and practices
Lighthouse gives the page 100 for SEO and 100 for best practices, on mobile and on desktop alike, with nothing failing in either section.
Reliability
HTTPS with no way back
The insecure address redirects to HTTPS, and the server sends an HSTS header with preload, so the browser stops trying the insecure one.
One static build, no CMS
The site is hand-written HTML, CSS and JavaScript with nothing to log into and nothing to keep updated.
Mobile
Fitted to the whole phone screen
On a 390 pixel screen the page is exactly 390 pixels wide, so there is no sideways scroll to catch by accident.
On a phone
What came out of it
- Twenty-nine months of construction fit on one screen.
- The finished building turns a full circle on ninety-six stills, dragged by hand.
- Every image on the page is generated, and the page runs in three languages.
The site does the job a brochure used to do, and does more of it. A buyer who has never been to the headland sees how the building goes up, walks around it, finds the layout that faces the way they want, and sends an enquiry from the last screen.
