06/08

Pausilypon Retreat

Quiet luxury, by the sea.

Role

Designed and built the retreat’s bilingual site without a framework: parallax that follows the pointer or the phone’s tilt, a day-to-dusk scroll, a draggable gallery, and a page transition into booking.

In numbers

Lighthouse performance on desktop, 100 on SEO: 93
layout shift while its 12 photographs load: 0

Problem

A private residence on the Gulf of Naples needed a calm site that sells the place through photography and leads to booking, in Italian and English.

Constraints

Photography is the product, and it is heavy
It has to stay fast on phones
Italian first, English on a toggle

Decisions

Two HTML pages and two scripts of their own: no framework and no build step.
The browser loads plain HTML and CSS, the two scripts and Lenis for scrolling, so nothing stands between the files in the repository and the files served.
Not chosen: ~~A single-page app framework for a photography-led site.~~
The hero photographs load first; every other image loads as it comes near.
The page opens on its best pictures without waiting for the rest.
The aerial and the gallery declare their touch action.
Dragging the aerial or the gallery never steals vertical scrolling from the page.
Day to dusk is one gradient on its own layer, and only its opacity changes as the aerial scrolls past.
The evening gradient rises over the aerial photograph on the GPU, without repainting the photo.
Not chosen: ~~Cross-fading to a second, evening photograph of the aerial.~~
The aerial answers the pointer, the phone’s gyroscope or an idle drift, and the way into booking is a cross-document view transition.
The place moves like a place, and booking feels like the same site.