02
Referenzprojekt · ROAST / RITUAL

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.

Umfang
Scrollytelling-Website, Shop, Checkout
Leistungen
Konzept, Design, 3D, Entwicklung
Technik
React, three.js, GSAP, Stripe
01 — Herkunft

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.

02 — Röstung

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.

03 — Mahlen

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.

04 — Brühen

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.

05 — Sorten

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.

roast-ritual-bnd.pages.dev
Startseite von ROAST / RITUAL mit der 3D-KaffeebohneKapitel Röstung mit RöstkurveKapitel Mahlen mit Kaffeepartikeln und MahlgradenKapitel Brühen mit Partikeln, die ins Glas fließenÜbersicht der drei Kaffeesorten im Shop
Handy-Ansicht von ROAST / RITUAL
sync_alt

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.

bolt

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.

shopping_bag

Shop mit sicherem Checkout

Produktseiten, Warenkorb und Bezahlung über Stripe. Preise prüft der Server – im Browser lässt sich nichts manipulieren.

accessibility_new

Für alle zugänglich

Wer im System „weniger Bewegung“ eingestellt hat, bekommt eine ruhige Version ohne Animationen – mit allen Inhalten.

Gebaut mit
React
TypeScript
Vite
three.js
React Three Fiber
GSAP ScrollTrigger
Lenis
Stripe
Cloudflare Pages

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 Projekten
Und jetzt Du

Was 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.