# Come Onyx Coffee Lab crea 3D interattivo per l’e-commerce - Spline customers (https://spline.design/it/customers/onyx-coffee-lab) > Onyx Coffee Lab usa il 3D interattivo su Shopify per tradurre la cura artigianale e le sfumature dei suoi prodotti in un’esperienza web veloce e moderna, senza sacrificare prestazioni o conversioni. [Clienti](https://spline.design/it/customers) 2 marzo 2026 · Storia di un cliente · Onyx Coffee Lab # Come Onyx Coffee Lab crea 3D interattivo per l’e-commerce Onyx Coffee Lab usa il 3D interattivo su Shopify per tradurre la cura artigianale e le sfumature dei suoi prodotti in un’esperienza web veloce e moderna, senza sacrificare prestazioni o conversioni. Il caffè è un’esperienza sensoriale. Lo shopping online no. Per [Onyx Coffee Lab](https://onyxcoffeelab.com/), la presenza online dipendeva dalla capacità di colmare questa distanza. In una categoria affollata, in cui i chicchi di caffè sembrano tutti uguali e le differenze tra i prodotti stanno nell’aroma, nel gusto e nella consistenza, raccontare una storia solo con le parole ti porta fino a un certo punto. Onyx aveva bisogno di un’esperienza digitale capace di trasmettere la stessa ossessione per il mestiere che mette nella tostatura, senza penalizzare prestazioni e conversioni. Così ha spinto più in là il limite: 3D interattivo sul web, costruito con **Spline** e realizzato da un piccolo team. Esperienza 3D guidata dallo scroll per il [calendario dell’Avvento 2025 di Onyx Coffee Lab](https://onyxcoffeelab.com/products/2025-advent-calendar) ## Differenziare il brand senza i sensi Il branding del caffè online è notoriamente difficile: - **La maggior parte dei prodotti è visivamente simile.**Una tostatura chiara accanto a una scura sembra sempre caffè in chicchi. - **Vendi cibo senza odore né sapore.**Non c’è alcun riscontro sensoriale. - **Il mercato è saturo.**“Un ottimo caffè” non è più un elemento distintivo. Il sito di Onyx doveva fare più che essere bello. Doveva comunicare in fretta. Altrimenti il suo pubblico avrebbe perso rapidamente interesse e se ne sarebbe andato. ## Trasformare la cura artigianale in un segnale visibile del brand Michael Mahler, CTO di Onyx Coffee Lab, ha descritto i due pilastri che definiscono il brand: 1. **Il caffè più fresco possibile**Il caffè viene tostato su ordinazione e spedito rapidamente. Spesso passano 24-48 ore dalla tostatrice alla porta di casa. 2. **Un approvvigionamento etico che cambia gli incentivi**Onyx paga i produttori 4-6 volte il prezzo di mercato della materia prima e costruisce relazioni di lungo periodo che creano un circolo virtuoso fondamentale: i produttori vogliono vendere a Onyx i loro lotti migliori e le comunità ne traggono beneficio. Lo stesso approccio si ritrova nella sua esperienza web. > Il nostro slogan è ‘Mai accontentarsi del sufficiente’. Ci chiediamo sempre cosa possiamo fare per migliorare, e questa mentalità non si ferma mai. **Michael Mahler**, CTO di Onyx Coffee Lab La [pagina di prodotto di Circadian](https://onyxcoffeelab.com/products/circadian) di Onyx Coffee Lab con una scena 3D interattiva ## Progettare per i prosumer Onyx non progetta per tutti. Progetta per le persone che tengono ai dettagli. Michael li chiama prosumer: clienti che si accorgono quando un brand trascura le piccole cose e che si aspettano esperienze digitali coerenti, all’altezza della qualità del prodotto. Questo ha dato forma a un approccio di design preciso: il sito deve essere immediatamente comprensibile, ma deve anche spingersi fino al limite di ciò che è “normale” per l’e-commerce. Onyx ha trovato quel margine di differenziazione in un unico punto: **il design 3D con Spline**. > Volevamo trovare quel limite e restarci il più vicino possibile… e quel limite era l’animazione 3D. Dettagli dalla [pagina di prodotto di Circadian](https://onyxcoffeelab.com/products/circadian) di Onyx Coffee Lab ## Un sito Shopify che sfrutta il runtime di Spline Onyx usa Shopify, ma l’esperienza del suo negozio è un frontend completamente personalizzato, che spinge Shopify al limite. Invece di esportare modelli o affidarsi a un’integrazione dedicata, Onyx incorpora Spline con Spline Viewer e usa la Code API di Spline per controllare le scene in modo programmatico. Così può costruire momenti interattivi che si comportano come funzionalità del prodotto, non semplici immagini statiche. ## Dagli storyboard alle interazioni in Spline Il flusso di produzione 3D di Onyx è pensato per velocità, allineamento ed efficienza: 1. **Render di prodotto di alta qualità**Spesso consegnati al design come PNG scontornati. 2. **Storyboard**Il team di design definisce i “keyframe” del movimento: cosa si muove, quando e perché. 3. **Animazione in Spline**Il team ricrea gli storyboard come vere scene interattive. 4. **Passaggio agli sviluppatori**Gli embed di Spline arrivano sul sito, controllati dalla logica del runtime. Animazione basata sugli stati, guidata dal cambiamento delle variabili ## Usare il 3D per spiegare ciò che i clienti non si aspettano [Circadian](https://onyxcoffeelab.com/products/circadian) non è la classica pagina di prodotto di un caffè. Invece dei soliti descrittori come ‘tostatura chiara o scura’ o ‘note di degustazione’, Circadian propone varianti basate sul livello di caffeina e include un calcolatore per aiutare i clienti a distribuire l’assunzione nel corso della giornata. Onyx usa le immagini 3D come sistema esplicativo per trasmettere queste informazioni e renderle più coinvolgenti: - Lo sfondo introduce visivamente il concetto - La scena risponde all’interazione - Cliccando sulle diverse varianti si attivano movimenti diversi nella scena Spline “Per noi le diverse varianti indicano letteralmente quanta caffeina c’è nel prodotto. L’elemento sullo sfondo si muove a seconda dell’esperienza che si sta guardando.” E, aspetto cruciale, il team di Onyx ha impostato i suoi elementi interattivi in modo che restino in disparte quando serve o passino in primo piano quando serve. Ad esempio, quando un testo importante attraversa la pagina, l’illuminazione degli elementi 3D incorporati si abbassa. I livelli di caffeina spiegati con l’aiuto di una visualizzazione 3D interattiva ## Il vantaggio più grande: i tempi di rilascio Per Onyx il vantaggio principale non è solo la qualità visiva, ma la fattibilità e la velocità per il suo team. Sono circa 10 le persone che lavorano sul codice e sulla parte creativa del sito. Assumere ingegneri e designer 3D dedicati è un impegno e una spesa importanti per un’azienda di caffè. Spline riduce il rischio comprimendo le tempistiche e rendendo il 3D accessibile a tutti. > Il vantaggio più grande sono i tempi di rilascio… Spline riduce il rischio di iniziare a fare alcune di queste cose in 3D. ## Inizia con Spline Onyx Coffee Lab non ha adottato il 3D per fare scena. Lo ha usato per risolvere un vero problema dell’e-commerce: **Come rendere reale online un prodotto sensoriale senza sacrificare velocità, chiarezza o conversioni?** Con Spline ha trovato un flusso di lavoro adatto a un piccolo team, che funziona in modo fluido su mobile e permette di pubblicare rapidamente racconti interattivi, aiutandolo a distinguere il brand in un mercato affollato. [Contatta le vendite](https://spline.design/it/enterprise) ## Altre storie dei clienti [13 aprile 2026 · Storia di un clienteCome Lynksen ha dato vita al sito di una complessa piattaforma B2B con Spline](https://spline.design/it/customers/lynksen)[24 febbraio 2026 · Storia di un clienteCome Hermetica ha dato una marcia in più al suo brand fintech con il design 3D](https://spline.design/it/customers/hermetica)[20 ottobre 2025 · Storia di un clienteCome Oscilar costruisce il brand della sua piattaforma di rischio basata sull’IA con Spline](https://spline.design/it/customers/oscilar) [Spline](https://spline.design/it) L’editor 3D e 2D per i team e i loro agenti. Pubblica sul web, su iOS e su Android. #### Chiedi all’IA informazioni su Spline #### Prodotti - [Design 3D](https://spline.design/it/3d-design) - [Hana](https://spline.design/it/hana) - [Omma](https://omma.build) - [Generazione 3D con IA](https://spline.design/it/ai-generate) - [Spline MCP](https://spline.design/it/mcp) - [Spline Arena](https://spline.design/it/arena) - [Prezzi](https://spline.design/it/pricing) - [Enterprise](https://spline.design/it/enterprise) #### Runtime - [Web](https://spline.design/it/web) - [iOS](https://spline.design/it/ios) - [Android](https://spline.design/it/android) #### App - [Download](https://spline.design/it/download) - [Spline Mirror](https://spline.design/spline-mirror) - [Scarica Spline Mirror](https://spline.design/download-mirror) #### Impara - [Docs](https://docs.spline.design/) - [Academy](https://spline.design/it/academy) - [API di Spline](https://www.npmjs.com/package/@splinetool/runtime) - [Soluzioni](https://spline.design/solutions) #### Community - [Community di Spline](https://community.spline.design) - [Blog](https://spline.design/it/blog) - [Novità](https://spline.design/it/changelog) - [Istruzione](https://spline.design/it/education) - [Contra](https://spline.design/contra) - [Affiliazione](https://spline.design/it/affiliate) #### Azienda - [Clienti](https://spline.design/it/customers) - [Lavora con noi](https://www.ycombinator.com/companies/spline/jobs) - [Sicurezza](https://spline.design/it/security) #### Note legali - [Termini e condizioni](https://spline.design/terms) - [Privacy](https://spline.design/privacy) #### Contatti - [help@spline.design](mailto:help@spline.design) - [jobs@spline.design](mailto:jobs@spline.design) © 2026 - Spline, Inc.