# Wie Onyx Coffee Lab interaktives 3D für E-Commerce gestaltet - Spline customers (https://spline.design/de/customers/onyx-coffee-lab) > Onyx Coffee Lab nutzt interaktives 3D auf Shopify, um Handwerk und feine Produktunterschiede in ein schnelles, modernes Weberlebnis zu übersetzen – ohne Abstriche bei Performance oder Conversions. [Kunden](https://spline.design/de/customers) 2\. März 2026 · Kundenstory · Onyx Coffee Lab # Wie Onyx Coffee Lab interaktives 3D für E-Commerce gestaltet Onyx Coffee Lab nutzt interaktives 3D auf Shopify, um Handwerk und feine Produktunterschiede in ein schnelles, modernes Weberlebnis zu übersetzen – ohne Abstriche bei Performance oder Conversions. Kaffee ist ein Erlebnis für die Sinne. Online-Shopping nicht. Für [Onyx Coffee Lab](https://onyxcoffeelab.com/) 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](https://onyxcoffeelab.com/products/2025-advent-calendar) ## 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. **Michael Mahler**, CTO at Onyx Coffee Lab Die [Produktseite von Circadian](https://onyxcoffeelab.com/products/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. Details der [Produktseite von Circadian](https://onyxcoffeelab.com/products/circadian) bei Onyx Coffee Lab ## 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. State-basierte Animation, gesteuert über Variablenänderungen ## Mit 3D erklären, was Kunden nicht erwarten [Circadian](https://onyxcoffeelab.com/products/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. Koffeinstufen, erklärt mithilfe einer interaktiven 3D-Visualisierung ## 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](https://spline.design/de/enterprise) ## Weitere Kundenstorys [13\. April 2026 · KundenstoryWie Lynksen mit Spline die Website einer komplexen B2B-Plattform zum Leben erweckt hat](https://spline.design/de/customers/lynksen)[24\. Februar 2026 · KundenstoryWie Hermetica seine Fintech-Marke mit 3D-Design aufgewertet hat](https://spline.design/de/customers/hermetica)[20\. Oktober 2025 · KundenstoryWie Oscilar seine KI-Risikoplattform mit Spline als Marke inszeniert](https://spline.design/de/customers/oscilar) [Spline](https://spline.design/de) Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android. #### Frag die KI zu Spline #### Produkte - [3D-Design](https://spline.design/de/3d-design) - [Hana](https://spline.design/de/hana) - [Omma](https://omma.build) - [KI-3D-Generierung](https://spline.design/de/ai-generate) - [Spline MCP](https://spline.design/de/mcp) - [Spline Arena](https://spline.design/de/arena) - [Preise](https://spline.design/de/pricing) - [Enterprise](https://spline.design/de/enterprise) #### Runtimes - [Web](https://spline.design/de/web) - [iOS](https://spline.design/de/ios) - [Android](https://spline.design/de/android) #### Apps - [Download](https://spline.design/de/download) - [Spline Mirror](https://spline.design/spline-mirror) - [Spline Mirror herunterladen](https://spline.design/download-mirror) #### Lernen - [Docs](https://docs.spline.design/) - [Academy](https://spline.design/de/academy) - [Spline API](https://www.npmjs.com/package/@splinetool/runtime) - [Lösungen](https://spline.design/solutions) #### Community - [Spline Community](https://community.spline.design) - [Blog](https://spline.design/de/blog) - [Changelog](https://spline.design/de/changelog) - [Bildung](https://spline.design/de/education) - [Contra](https://spline.design/contra) - [Affiliate](https://spline.design/de/affiliate) #### Unternehmen - [Kunden](https://spline.design/de/customers) - [Karriere](https://www.ycombinator.com/companies/spline/jobs) - [Sicherheit](https://spline.design/de/security) #### Rechtliches - [AGB](https://spline.design/terms) - [Datenschutz](https://spline.design/privacy) #### Kontakt - [help@spline.design](mailto:help@spline.design) - [jobs@spline.design](mailto:jobs@spline.design) © 2026 - Spline, Inc.