Fallstudie
Dub@i Möbel
Ausgangslage
Dub@i Möbel hatte keinen Online-Auftritt. Wer nicht zufällig vorbeikam, wusste kaum, dass es den Laden gibt. Das Sortiment war nicht zu sehen, nicht zu finden.
Was wir gebaut haben
- ✦Next.js 14 Website mit Louvre-Intro, cinematischem Hero und einem Lighthouse Score nahe 100
- ✦KI-Einrichtungsberater: Raumbild hochladen, OpenAI Vision empfiehlt passende Produkte
- ✦Dreisprachig in DE, EN und TR für Hagens türkischstämmige Kundschaft
- ✦Sanity CMS, damit der Kunde Produkte selbst pflegen kann
Kapitel 01
Die Louvre-Intro
So beginnt die Website — einmal pro Session
12 Slats, 3D rotiert
Jeder der 12 Slats dreht sich einzeln um die Y-Achse, gestaffelt mit 55ms Abstand. Mit perspective: 800px entsteht echte räumliche Tiefe.
Einmal pro Session
Die Louvre-Intro spielt sich nur beim ersten Besuch ab. Wer zurückkommt, startet sofort ins Erlebnis ohne Wartezeit.
Kapitel 02
Hero-Design
Cinematische erste Seite — Eindruck vor Inhalt
Wort für Wort
Die Headline baut sich Wort für Wort mit einem leichten rotateX-Drehen auf. Dramatisch, ohne laut zu sein.
Ken Burns Zoom
Das Hintergrundbild zoomt langsam in einem 20-Sekunden-Loop. Der Effekt ist so subtil, dass man ihn kaum bemerkt — aber trotzdem spürt.
Logo im Zentrum
Navigation im Apothekerstil: Logo mittig, Funktionen symmetrisch verteilt. Louis Vuitton, Chanel und Hermès setzen auf dasselbe Prinzip.
Kapitel 03
Produkt-Showcase
Editorial-Layout mit Clip-Path-Animationen
Clip-Path Reveal
Jedes Produktbild entfaltet sich von links nach rechts, wie ein Vorhang. Das folgt der natürlichen Leserichtung und macht jeden Reveal zu einem kleinen Moment.
Abwechselnde Seiten
Bild links, dann rechts, dann wieder links. Das Auge bewegt sich beim Scrollen und die Seite fühlt sich weniger wie eine Liste an.
Kapitel 04
KI-Einrichtungsberater
OpenAI Vision als Conversion-Hebel
Raum hochladen, Sofa finden
Nutzer laden ein Foto ihres Zimmers hoch. GPT-4 Vision liest Raumstil, Farbpalette und Einrichtung — und schlägt passende Produkte aus dem Sortiment vor.
Kostendeckel ohne Login
Supabase begrenzt die API-Anfragen pro IP auf täglich. Kein Nutzer-Account nötig, trotzdem bleibt die Nutzung kontrollierbar.
Ziele und Projektionen
Was wir erreichen.
In finaler Entwicklung. Die Zahlen sind projektierte Zielwerte.