Alle Projekte

Hamiti Alpine Service, Zermatt2026

Hamiti Alpine

Auftritt für einen Familienbetrieb in Zermatt für Reinigung, Betreuung und Concierge: drei Rechner, das eigene Haus als 3D-Modell und acht Sprachen.

Hamiti Alpine Service ist ein Familienbetrieb in Zermatt mit rund 30 Jahren Erfahrung: Reinigung, Betreuung von Ferienwohnungen und Chalets, Housekeeping für Hotels, Concierge und Vermietung. Der Auftritt richtet sich an Hotels und an Eigentümer und sollte nicht nach Reinigungsfirma aussehen, sondern ruhig und edel wirken: alpines Blau, viel Weissraum, eine feine Serifenschrift und das Matterhorn als Bildwelt.

Das Intro lebt mit dem Ort. Dasselbe Bild des Matterhorns gibt es in vier Jahreszeiten und drei Lichtstufen (Nacht, erstes Licht, Tag). Die Site wählt es nach Monat und Uhrzeit in Zermatt und blendet auf einem Canvas zwischen den Stufen über. Schneit oder regnet es im Dorf, fällt auch im Bild Schnee oder Regen, im Herbst treiben Lärchennadeln durchs Bild. Eine kleine Leiste zeigt dazu Ortszeit, Temperatur und Wind. Beim ersten Besuch zeichnet sich das Logo kurz selbst, bevor die Seite erscheint.

Das Herzstück ist der Offertenrechner. Er führt in sechs Schritten zur Anfrage (Objekt, Grösse, Leistungen, Details, Zeitraum, Kontakt) und zeigt dabei laufend einen Richtpreis, auch für mehrere Objekte in einer Anfrage. Wer eine Adresse oder einen Hausnamen eintippt, muss fast nichts mehr ausfüllen: Die Site holt die öffentlichen Angaben aus dem Gebäude- und Wohnungsregister des Bundes (Baujahr, Geschosse, Wohnungen, Zimmer, Fläche) und belegt Objektart und Grösse vor. Hotels, Restaurants und Geschäfte findet die Suche über einen eigenen Namensindex aus OpenStreetMap-Daten schon beim Tippen.

Zur erkannten Adresse baut die Site eine 3D-Szene: das echte Höhenmodell rund um Zermatt, darüber das Luftbild von swisstopo, dazu alle Häuser des Dorfs und der Wald an den Hängen. Die Kamera fliegt aus der Höhe ins Tal, die Häuser wachsen aus dem Boden, und am Schluss steht das gesuchte Haus da, in echter Lage, Ausrichtung und Grösse, Geschoss für Geschoss. Jede Wohnung ist ein eigener Körper und lässt sich direkt im Modell oder in der Liste daneben wählen, gewählte Wohnungen leuchten violett. Three.js wird nur für diese Szene geladen und erst, wenn wirklich eine Adresse erkannt ist. Ohne WebGL erscheint eine flache Karte.

Neben dem Offertenrechner gibt es zwei weitere, alle an einem Ort. Im Concierge-Rechner stellt man Leistungen wie Einkauf vor der Anreise, Schlüsselübergabe oder Flughafentransfer zusammen oder nimmt ein fertiges Paket, der Transfer zeigt die Strecke auf einer Karte der Schweiz. Der Vermietungsrechner schätzt den Ertrag einer Wohnung in drei Modellen. Ein einmal erkanntes Objekt gilt für alle Rechner, Eingaben gehen beim Wechsel nicht verloren. Auf dem Handy bleibt der Richtpreis als Leiste am unteren Rand stehen.

Gebaut mit React 19, Vite, TypeScript und Tailwind, ohne UI-Baukasten: eigener kleiner Router, typisierte Wörterbücher, Seitenwechsel über die View Transitions API. Jede der über 200 Seiten wird in acht Sprachen (Deutsch, Englisch, Französisch, Italienisch, Portugiesisch, Albanisch, Japanisch, Chinesisch) statisch vorgerendert und im Browser nur noch belebt. GSAP und Lenis laden erst nach dem ersten Bild. Scroll-Effekte laufen nur mit Maus oder Trackpad, auf Touch-Geräten scrollt der Browser ungestört, und reduzierte Bewegung wird überall respektiert.

Für die Auffindbarkeit sorgen ein Ratgeber mit eigenen Artikeln rund um Ferienwohnung und Zermatt, eine Fragen-Seite, ein Bewerbungsportal sowie strukturierte Daten, hreflang und ein eigenes Vorschaubild pro Seite und Sprache.

Datenschutz und Sicherheit sind Teil des Konzepts: keine Cookies, keine Tracker, selbst gehostete Schriften und eine strenge Content Security Policy ohne Inline-Skripte. Der Browser spricht nur mit der eigenen Domain, auch die Abfrage beim Bund und das Wetter laufen über den eigenen Server. Die Karten sind aus offenen Daten selbst gezeichnet, ohne Kartendienst. Die Formulare schützt ein Proof of Work statt reCAPTCHA, und die Bestätigungsmail übernimmt nie frei eingegebenen Text, damit sich das Formular nicht als Spam-Schleuder missbrauchen lässt.

  • React 19
  • Vite
  • Three.js
  • GSAP
  • i18n · 8 Sprachen
Live ansehen