Kaffeerösterei
Von der Bohne zur Tasse.
Eine Website, die eine Geschichte erzählt: Eine 3D-Kaffeebohne begleitet die Besucher durch Herkunft, Röstung, Mahlen und Brühen – jede Bewegung hängt am Scrollen. Am Ende wartet ein echter Shop mit Warenkorb und Checkout.
Die Bohne als Hauptfigur
Statt Stockfotos steht eine 3D-Kaffeebohne im Mittelpunkt. Sie dreht sich, wandert durchs Bild und führt durch jedes Kapitel der Seite.
Röstung zum Zuschauen
Beim Scrollen färbt sich die Bohne, die Röstkurve zeichnet sich mit und klettert auf 212 °C. Was sonst in der Trommel passiert, wird sichtbar.
Aus einer Bohne werden hunderte Partikel
Die Bohne zerfällt in Partikel – und je nach Mahlgrad von Espresso bis Cold Brew ändert sich die Körnung live.
Der Moment in der Tasse
Die Partikel fließen ins Glas, daneben das Rezept: 18 g Kaffee, 300 ml Wasser, 4 Minuten. Erzählung und Information in einem Bild.
Vom Erlebnis zum Einkauf
Drei Sorten mit eigenen Produktseiten, Warenkorb und Bezahlung über Stripe. Die Preise kommen ausschließlich vom Server. In der Demo läuft alles im Testmodus.






Vorwärts wie rückwärts
Jede Animation hängt direkt an der Scrollposition. Wer zurückscrollt, sieht exakt dasselbe Bild – nichts springt, nichts ruckelt.
Schnell trotz 3D
Der Text ist sofort da, die 3D-Szene lädt erst, wenn der Browser Luft hat. Auf dem Handy rechnet sie mit weniger Partikeln.
Shop mit sicherem Checkout
Produktseiten, Warenkorb und Bezahlung über Stripe. Preise prüft der Server – im Browser lässt sich nichts manipulieren.
Für alle zugänglich
Wer im System „weniger Bewegung“ eingestellt hat, bekommt eine ruhige Version ohne Animationen – mit allen Inhalten.
ROAST / RITUAL ist eine fiktive Rösterei. Das Projekt haben wir als Referenz umgesetzt, um zu zeigen, was technisch möglich ist.
← Zurück zu allen ProjektenWas bauen wir als Nächstes?
Ob Terminbuchung, Shop oder eine Website, die im Kopf bleibt: Erzähl uns, was Du vorhast – wir melden uns mit einer ehrlichen Einschätzung.