Hamiti Alpine

Hamiti Alpine Service is a family business in Zermatt with around 30 years of experience: cleaning, care for holiday apartments and chalets, housekeeping for hotels, concierge and rental. The site addresses hotels and owners and was not supposed to look like a cleaning company, but calm and refined: alpine blue, plenty of white space, a fine serif typeface and the Matterhorn as its imagery.

The intro lives with the place. The same image of the Matterhorn exists in four seasons and three light levels (night, first light, day). The site picks it by month and time of day in Zermatt and cross-fades between the levels on a canvas. When it snows or rains in the village, snow or rain falls in the image too, and in autumn larch needles drift through it. A small strip adds local time, temperature and wind. On the first visit the logo briefly draws itself before the page appears.

The centrepiece is the quote calculator. It leads to the enquiry in six steps (property, size, services, details, period, contact) and shows a running guide price along the way, even for several properties in one enquiry. Type in an address or a house name and there is hardly anything left to fill in: the site fetches the public data from the Swiss Federal Register of Buildings and Dwellings (year built, floors, apartments, rooms, area) and pre-fills property type and size. Hotels, restaurants and shops are found as you type through a custom name index built from OpenStreetMap data.

For the recognised address the site builds a 3D scene: the real elevation model around Zermatt, the swisstopo aerial image on top, plus every house in the village and the forest on the slopes. The camera flies from high up into the valley, the houses grow out of the ground, and in the end the house you searched for stands there, in its real position, orientation and size, floor by floor. Every apartment is its own body and can be selected right in the model or in the list next to it, and selected apartments glow violet. Three.js is loaded for this scene only, and only once an address has actually been recognised. Without WebGL a flat map appears instead.

Next to the quote calculator there are two more, all in one place. In the concierge calculator you put together services such as shopping before arrival, key handover or airport transfer, or take a ready-made package, and the transfer shows its route on a map of Switzerland. The rental calculator estimates the income of an apartment in three models. A property recognised once applies to all calculators, and nothing you entered is lost when switching. On the phone the guide price stays as a bar at the bottom of the screen.

Built with React 19, Vite, TypeScript and Tailwind, without a UI kit: a small custom router, typed dictionaries, page changes via the View Transitions API. Each of the more than 200 pages is statically pre-rendered in eight languages (German, English, French, Italian, Portuguese, Albanian, Japanese, Chinese) and only hydrated in the browser. GSAP and Lenis load after the first paint. Scroll effects run with mouse or trackpad only, touch devices scroll natively, and reduced motion is respected everywhere.

Findability comes from a guide with its own articles on holiday apartments and Zermatt, an FAQ page, a job application portal, plus structured data, hreflang and a dedicated preview image per page and language.

Privacy and security are part of the concept: no cookies, no trackers, self-hosted fonts and a strict Content Security Policy without inline scripts. The browser only talks to its own domain, and even the federal register lookup and the weather run through the site’s own server. The maps are drawn in-house from open data, without a map service. The forms are protected by proof of work instead of reCAPTCHA, and the confirmation email never echoes free text, so the form cannot be abused to send spam.