Wie Onyx Coffee Lab interaktives 3D für E-Commerce gestaltet

Kaffee ist ein Erlebnis für die Sinne. Online-Shopping nicht.

Für Onyx Coffee Lab hing der Onlineauftritt davon ab, diese Lücke zu überbrücken.

In einer überfüllten Kategorie, in der Kaffeebohnen alle gleich aussehen und Produktunterschiede in Aroma, Geschmack und Textur stecken, kommt man mit Worten allein nur begrenzt weit.

Onyx brauchte ein digitales Erlebnis, das dieselbe Hingabe ans Handwerk transportiert wie die eigene Röstung – ohne Performance oder Conversion auszubremsen.

Also gingen sie an die Grenze: interaktives 3D im Web, gebaut mit Spline und ausgeliefert von einem kleinen Team.

Scrollbasiertes 3D-Erlebnis für den Adventskalender 2025 von Onyx Coffee Lab

Markendifferenzierung ohne die Sinne

Kaffee als Marke online zu inszenieren, ist bekanntermaßen schwer:

• Die meisten Produkte sehen ähnlich aus. Eine helle Röstung neben einer dunklen sieht immer noch nach Kaffeebohnen aus.

• Du verkaufst Lebensmittel ohne Geruch und Geschmack. Es gibt kein sinnliches Feedback.

• Der Markt ist gesättigt. „Großartiger Kaffee“ ist kein Unterscheidungsmerkmal mehr.

Die Website von Onyx musste mehr können als gut aussehen. Sie musste schnell kommunizieren – sonst würde die Zielgruppe schnell das Interesse verlieren und gehen.

Handwerk in ein sichtbares Markensignal verwandeln

Michael Mahler, CTO bei Onyx Coffee Lab, beschreibt zwei Säulen, die die Marke ausmachen:

1. Der frischeste Kaffee, der möglich ist Kaffee wird auf Bestellung geröstet und schnell verschickt – oft in 24–48 Stunden vom Röster bis zur Haustür.
2. Ethische Beschaffung, die die Anreize verändert Onyx zahlt Produzenten das 4- bis 6-Fache des Weltmarktpreises und baut langfristige Beziehungen auf, die einen wichtigen Kreislauf schaffen: Die Produzenten wollen Onyx ihre besten Partien verkaufen, und die Gemeinschaften profitieren davon.

Dieselbe Haltung prägt auch ihr Weberlebnis.

Unser Motto lautet: ‚Never settle for good enough.‘ Es geht immer darum, was wir verbessern können – und diese Haltung hört nie auf.

Die Produktseite von Circadian bei Onyx Coffee Lab mit einer interaktiven 3D-Szene

Design für Prosumer

Onyx gestaltet nicht für alle. Sondern für Menschen, denen Details wichtig sind.

Michael nennt sie Prosumer: Kunden, die merken, wenn eine Marke bei Kleinigkeiten schludert, und die erwarten, dass ein stimmiges digitales Erlebnis die Produktqualität widerspiegelt.

Daraus entstand ein bewusster Designansatz: Die Website muss sofort verständlich sein, aber zugleich direkt an der Grenze dessen liegen, was im E-Commerce „normal“ ist.

Diesen Vorsprung fand Onyx an einer Stelle: 3D-Design mit Spline.

Wir wollten diese Grenze finden und so nah wie möglich an ihr entlangfahren … und diese Grenze war 3D-Animation.

Ein Shopify-Shop, der die Runtime von Spline nutzt

Onyx läuft auf Shopify, doch das Shop-Erlebnis ist ein komplett eigenes Frontend, das Shopify an seine Grenzen bringt.

Statt Modelle zu exportieren oder sich auf eine eigene Integration zu verlassen, bettet Onyx Spline mit dem Spline Viewer ein und steuert die Szenen programmatisch über die Code-API von Spline.

So entstehen interaktive Momente, die sich wie Produktfunktionen verhalten – nicht nur statische Visuals.

Von Storyboards zu Interaktionen in Spline

Der 3D-Produktionsablauf von Onyx ist auf Tempo, Abstimmung und Effizienz ausgelegt:

1. Hochwertige Produktrenderings Meist als freigestellte PNGs an das Design geliefert.
2. Storyboarding Das Designteam legt die Bewegung in „Keyframes“ fest: was sich bewegt, wann und warum.
3. Animation in Spline Das Team setzt diese Storyboards als echte interaktive Szenen um.
4. Übergabe an die Entwicklung Spline-Embeds landen auf der Website, gesteuert über Runtime-Logik.

Mit 3D erklären, was Kunden nicht erwarten

Circadian ist keine typische Kaffee-Produktseite.

Statt üblicher Beschreibungen wie „helle vs. dunkle Röstung“ oder „Geschmacksnoten“ bietet Circadian Varianten nach Koffeingehalt und einen Rechner, mit dem Kunden ihre Koffeinzufuhr über den Tag abstimmen können.

Onyx nutzt 3D-Visuals als Erklärsystem, um diese Informationen zu vermitteln und ansprechender zu machen:

• Der Hintergrund führt das Konzept visuell ein
• Die Szene reagiert auf Interaktion
• Ein Klick auf verschiedene Varianten löst unterschiedliche Bewegungen in der Spline-Szene aus

„Die verschiedenen Varianten stehen bei uns buchstäblich dafür, wie viel Koffein im Produkt steckt. Das Asset im Hintergrund bewegt sich je nachdem, welches Erlebnis man sich gerade ansieht.“

Und ganz entscheidend: Das Team von Onyx hat seine interaktiven Assets so gestaltet, dass sie sich bei Bedarf zurücknehmen oder bei Bedarf interaktiv in den Mittelpunkt rücken. Läuft zum Beispiel wichtiger Text über die Seite, wird das Licht auf den eingebetteten 3D-Assets gedimmt.

Der größte Gewinn: Zeit bis zum Deployment

Für Onyx liegt der größte Vorteil nicht nur in der visuellen Qualität, sondern darin, was für ihr Team machbar ist – und wie schnell.

Rund 10 Personen arbeiten am Code und an den Kreativinhalten der Website. Eigene 3D-Entwickler und -Designer einzustellen, ist für eine Kaffeefirma eine große Verpflichtung und ein hoher Kostenfaktor.

Spline senkt das Risiko, indem es Zeitpläne verkürzt und 3D für alle erreichbar macht.

Der größte Vorteil ist die Zeit bis zum Deployment … Spline senkt das Risiko, mit solchen Dingen in 3D überhaupt anzufangen.

Leg los mit Spline

Onyx Coffee Lab hat 3D nicht eingeführt, um aufzufallen, sondern um ein echtes E-Commerce-Problem zu lösen:

Wie lässt du ein sinnliches Produkt online real wirken, ohne Abstriche bei Tempo, Klarheit oder Conversion?

Mit Spline fand Onyx einen Workflow, der zu einem kleinen Team passt, auf Mobilgeräten flüssig läuft und interaktives Storytelling schnell ausliefert – und so die Marke in einem vollen Markt abhebt.

Vertrieb kontaktieren