Comment Onyx Coffee Lab crée de la 3D interactive pour l’e-commerce

Le café est une expérience sensorielle. Les achats en ligne, non.

Pour Onyx Coffee Lab, toute sa présence en ligne dépendait de sa capacité à combler cet écart.

Dans une catégorie saturée, où les grains de café se ressemblent tous et où les différences entre produits tiennent à l’arôme, au goût et à la texture, raconter une histoire avec des mots seulement a ses limites.

Onyx avait besoin d’une expérience numérique capable de porter la même obsession du savoir-faire que celle qui guide sa torréfaction, sans pénaliser les performances ni les conversions.

L’entreprise a donc repoussé les limites : de la 3D interactive sur le web, créée avec Spline et livrée par une petite équipe.

Expérience 3D au défilement pour le calendrier de l’Avent 2025 d’Onyx Coffee Lab

Se différencier sans les sens

Le branding du café est notoirement difficile en ligne :

• La plupart des produits se ressemblent visuellement. Une torréfaction claire à côté d’une torréfaction foncée, ça reste des grains de café.

• Vous vendez un aliment sans odeur ni goût. Il n’y a aucun retour sensoriel.

• Le marché est saturé. « Un excellent café » n’est plus un argument différenciant.

Le site d’Onyx devait faire plus que d’être beau. Il devait communiquer vite. Sinon, son public cible perdrait rapidement tout intérêt et partirait.

Faire du savoir-faire un signal de marque visible

Michael Mahler, CTO d’Onyx Coffee Lab, décrit les deux piliers qui définissent la marque :

1. Le café le plus frais possible Le café est torréfié à la commande et expédié rapidement, souvent en 24 à 48 heures entre la torréfaction et la livraison.
2. Un approvisionnement éthique qui change les incitations Onyx paie les producteurs 4 à 6 fois le prix du marché, et noue des relations de long terme qui créent un cercle vertueux essentiel : les producteurs veulent vendre leurs meilleurs lots à Onyx, et les communautés en profitent.

Ce même état d’esprit se retrouve dans son expérience web.

Notre slogan, c’est « Ne jamais se contenter de l’à-peu-près ». La question est toujours : que pouvons-nous améliorer ? Et cet état d’esprit ne s’arrête jamais.

La page produit Circadian d’Onyx Coffee Lab, avec une scène 3D interactive

Concevoir pour les « prosumers »

Onyx ne conçoit pas pour tout le monde. Elle conçoit pour les gens attentifs aux détails.

Michael les appelle des « prosumers » : des clients qui remarquent quand une marque bâcle les petites choses, et qui attendent des expériences numériques cohérentes, à la hauteur de la qualité du produit.

Cela a façonné une approche de design délibérée : le site doit être immédiatement compréhensible, mais aussi se tenir juste à la limite de ce qui est « normal » pour l’e-commerce.

Onyx a trouvé cet avantage différenciant à un endroit précis : le design 3D avec Spline.

Nous voulions trouver cette limite et la suivre d’aussi près que possible… et cette limite, c’était l’animation 3D.

Un site Shopify qui exploite le runtime de Spline

Onyx fonctionne sur Shopify, mais l’expérience de sa boutique repose sur un frontend entièrement personnalisé, qui pousse Shopify dans ses retranchements.

Au lieu d’exporter des modèles ou de dépendre d’une intégration dédiée, Onyx intègre Spline avec Spline Viewer et pilote les scènes par programmation grâce à la Code API de Spline.

L’équipe peut ainsi créer des moments interactifs qui se comportent comme des fonctionnalités produit, et pas seulement comme des visuels statiques.

Des storyboards aux interactions Spline

Le flux de production 3D d’Onyx est pensé pour la rapidité, l’alignement et l’efficacité :

1. Des rendus produit de haute qualité Souvent livrés à l’équipe de design sous forme de PNG détourés.
2. Le storyboard L’équipe de design définit les « images clés » du mouvement : ce qui bouge, quand et pourquoi.
3. L’animation dans Spline L’équipe recrée ces storyboards sous forme de véritables scènes interactives.
4. La passation aux développeurs Les intégrations Spline arrivent sur le site, pilotées par la logique du runtime.

Utiliser la 3D pour expliquer ce que les clients n’attendent pas

Circadian n’est pas une page produit de café comme les autres.

Au lieu des descripteurs habituels comme « torréfaction claire ou foncée » ou « notes de dégustation », Circadian propose des variantes selon le taux de caféine et inclut un calculateur pour aider les clients à doser leur consommation au fil de la journée.

Onyx utilise des visuels 3D comme système explicatif, pour diffuser cette information et la rendre plus engageante :

• L’arrière-plan introduit le concept visuellement
• La scène réagit aux interactions
• Cliquer sur les différentes variantes déclenche différents mouvements dans la scène Spline

« Pour nous, les différentes variantes correspondent littéralement à la quantité de caféine dans le produit. L’élément en arrière-plan bouge selon l’expérience que les visiteurs consultent. »

Point crucial : l’équipe d’Onyx a conçu ses éléments interactifs pour qu’ils s’effacent quand il le faut, ou passent au premier plan quand il le faut. Par exemple, quand un texte important traverse la page, l’éclairage des éléments 3D intégrés baisse.

Le plus grand gain : le délai de mise en production

Pour Onyx, l’avantage principal n’est pas seulement la qualité visuelle : c’est la faisabilité et la rapidité pour son équipe.

Une dizaine de personnes environ interviennent sur le code et la création du site. Recruter des ingénieurs et des designers 3D dédiés représente un engagement et une dépense importants pour une entreprise de café.

Spline réduit le risque en raccourcissant les délais et en rendant la 3D accessible à tous.

Le plus grand avantage, c’est le délai de mise en production… Spline réduit le risque qu’il y a à se lancer dans ce genre de choses en 3D.

Lancez-vous avec Spline

Onyx Coffee Lab n’a pas adopté la 3D pour en mettre plein la vue. Elle s’en est servie pour résoudre un vrai problème d’e-commerce :

Comment rendre un produit sensoriel tangible en ligne sans sacrifier la rapidité, la clarté ni les conversions ?

Avec Spline, elle a trouvé un workflow adapté à une petite équipe, fluide sur mobile, qui permet de livrer vite des récits interactifs et de différencier la marque sur un marché saturé.

Contacter les ventes