Comment Koji Studio a utilisé Spline pour créer une vitrine produit en 3D

Quand Ori, une entreprise de technologie médicale, a voulu lancer le site web de son nouveau scanner dentaire 3D, le défi était clair : comment communiquer la précision et l’innovation d’un appareil physique d’une manière tout aussi innovante en ligne ?

L’entreprise cherchait à lancer sur le marché son nouveau scanner intra-oral Ori, un appareil de scan dentaire 3D conçu pour aider les dentistes à capturer en temps réel des modèles numériques très précis des dents de leurs patients.

Pour aller au-delà des images et des vidéos statiques et montrer à ses clients l’avancée technique de ce produit, elle a fait appel à l’agence KOJI comme équipe créative pour le lancement.

L’équipe de KOJI a alors choisi de s’appuyer sur l’intégration de Spline dans Webflow pour concevoir une expérience numérique 3D interactive qui rende le scanner aussi tangible sur le web qu’entre les mains d’un dentiste.

Une équipe de design full-stack qui adopte de nouveaux outils

L’équipe de l’agence KOJI derrière la présence web d’Ori Scan comptait Pavel, Slava, Nikita et Liza, des designers chevronnés qui ont de nombreux projets clients à leur actif.

Forts de plus de 20 ans d’expérience en branding, en identité et en expériences numériques, ils ont tout conçu, des systèmes publicitaires modulaires aux sites narratifs immersifs.

Leur force : être des « designers full-stack », qui mêlent réflexion produit, design visuel, interaction et code.

Nous sommes toujours en veille, toujours à la recherche de nouveaux outils. C’est comme ça que nous sommes arrivés à Spline.

Miser sur Spline pour libérer l’interactivité

La direction d’Ori Scan ne voulait pas d’un énième site de produit médical. Elle voulait une expérience qui se démarque auprès de son public de dentistes et de professionnels de santé.

L’équipe de KOJI voyait dans la 3D interactive le meilleur moyen de mettre en valeur l’innovation du scanner, et le choix de Spline était tout aussi réfléchi.

L’équipe savait qu’elle aurait besoin de flexibilité pour itérer vite, optimiser les performances et présenter le design du scanner de façon interactive sur tous les appareils.

Spline était partout dans la communauté du design. Ce projet était l’occasion idéale de l’utiliser enfin, et l’intégration fluide avec Webflow a rendu la décision encore plus simple.

Le processus de design : de la CAO et de l’optimisation des polygones à une expérience web aboutie

Le processus a commencé avec les fichiers CAO techniques d’Ori Scan, que l’agence a affinés et optimisés avant de les importer dans Spline.

Le workflow était itératif : il fallait doser le nombre de polygones, les matériaux et l’éclairage pour trouver l’équilibre entre un rendu visuellement séduisant et des performances fluides sur le web.

Spline a réuni les aspects techniques et créatifs du processus. Ses outils de performance ont donné à l’équipe une vision claire de l’optimisation des modèles, pour une intégration fluide sur tous les appareils. Le système d’événements a simplifié la mise en place des mouvements interactifs, tandis que des outils polyvalents de matériaux et d’éclairage ont permis d’affiner l’apparence du produit pour qu’il paraisse abouti et réaliste sur le web.

L’un des détails marquants ? Le modèle 3D des dents. Pour montrer le scanner en action, l’équipe a modélisé dans Spline des dents d’apparence naturelle, une touche essentielle qui rendait la démo authentique.

Ce souci du détail a fait de la démo bien plus qu’une vitrine technique. En alliant réalisme et interactivité, l’équipe a créé un récit produit authentique, engageant et directement lié à la façon dont les dentistes utiliseraient réellement le scanner.

C’était amusant, mais aussi crucial. Comme le scanner sert à scanner des dents, le modèle 3D devait avoir l’air naturel.

L’intégration avec Webflow

L’équipe de KOJI s’est appuyée sur Spline pour donner vie au produit Ori Scan, et sur l’intégration native de Spline avec Webflow pour intégrer les ressources 3D au site sans friction.

Il est ainsi devenu possible d’associer des animations au défilement à de la 3D interactive, pour que les visiteurs puissent faire pivoter et explorer le scanner en parcourant la page.

C’est très simple et rapide. La courbe d’apprentissage est faible : même des designers juniors peuvent intervenir et intégrer de la 3D dans Webflow.

Pourquoi l’interactivité compte

Pour Ori Scan, une vitrine produit 3D interactive n’était pas qu’une question d’esthétique. C’était une question de clarté et d’impact. En laissant les clients faire défiler le produit, le faire pivoter et explorer ses fonctionnalités en contexte, l’équipe a créé une expérience qui allait bien au-delà de ce que la photo ou la vidéo statique pouvaient offrir.

L’interactivité change tout. Elle rend le produit réel. Et surtout, elle aide le client à raconter son histoire d’une manière qui paraît innovante.

Lancez-vous avec Spline

L’équipe de KOJI continue d’expérimenter avec Spline. Pour elle, ce projet a ouvert un nouveau chapitre, où la 3D et le design interactif ne sont plus un simple « plus », mais un élément essentiel pour raconter l’histoire d’un produit.

C’est un exemple visuellement saisissant de la façon dont l’interactivité peut transformer le design de produits numériques en une expérience qui paraît réelle.

Contacter les ventes