· Kundenstory · KOJI

Wie Koji Studio mit Spline eine 3D-Produktpräsentation umgesetzt hat

Koji Studio hat mit Spline statische Produktbilder in eine scrollbasierte 3D-Produktpräsentation verwandelt – ein fesselnderes, einprägsameres Erlebnis, das die Innovation und Handwerkskunst seines Kunden in den Mittelpunkt stellt.

Als Ori, ein Medizintechnikunternehmen, eine Website für seinen neuen 3D-Dentalscanner launchen wollte, war die Herausforderung klar: Wie vermittelt man die Präzision und Innovation eines physischen Geräts online auf eine Weise, die ebenso innovativ wirkt?

Das Unternehmen wollte seinen neuen Ori Intraoral Scanner auf den Markt bringen – ein 3D-Dentalscanner, mit dem Zahnärzte hochpräzise digitale Modelle der Zähne ihrer Patienten in Echtzeit erfassen.

Um über statische Bilder und Videos hinauszugehen und den technischen Fortschritt des Produkts für die Kunden greifbar zu machen, holte sich Ori die KOJI Agency als Kreativteam für den Produktlaunch.

Das KOJI-Team entschied sich, die Spline-Integration in Webflow zu nutzen, um ein interaktives digitales 3D-Erlebnis zu schaffen, in dem sich der Scanner im Web so greifbar anfühlt wie in der Hand eines Zahnarztes.

Die scrollbasierte, interaktive 3D-Website von Ori Scan

Ein Full-Stack-Designteam, das neue Tools annimmt

Zum Team der KOJI Agency hinter dem Webauftritt von Ori Scan gehörten Pavel, Slava, Nikita und Liza – allesamt erfahrene Designer mit vielen Kundenprojekten.

Mit mehr als 20 Jahren Erfahrung in Branding, Corporate Identity und digitalen Erlebnissen haben sie alles gebaut, von modularen Werbesystemen bis zu immersiven Storytelling-Websites.

Ihre Stärke: Sie sind „Full-Stack-Designer“ und verbinden Produktdenken, visuelles Design, Interaktion und Code.

Wir recherchieren ständig und suchen immer nach neuen Tools. So sind wir auf Spline gestoßen.

Slava Sheykin, Full-Stack Designer at KOJI

Mit Spline Interaktivität freischalten

Die Führung von Ori Scan wollte nicht einfach noch eine Website für ein Medizinprodukt. Sie wollte ein Erlebnis, das bei ihrem Publikum aus Zahnärzten und Gesundheitsfachleuten heraussticht.

Das KOJI-Team sah in interaktivem 3D das beste Medium, um die Innovation des Scanners hervorzuheben – und auch die Wahl von Spline war bewusst.

Besucher drehen und erkunden den Scanner, während sie durch die Seite scrollen

Dem Team war klar, dass es die Flexibilität brauchte, schnell zu iterieren, die Performance zu optimieren und die Produktdesigns des Scanners auf allen Geräten interaktiv zu präsentieren.

Spline war in der Design-Community überall. Dieses Projekt war die perfekte Gelegenheit, es endlich einzusetzen – und die nahtlose Integration mit Webflow hat die Entscheidung noch leichter gemacht.

Pavel Dergachev, Founder & Creative Director at KOJI

Der Designprozess: von CAD und Polygonoptimierung zum ausgefeilten Weberlebnis

Der Prozess begann mit den technischen CAD-Dateien von Ori Scan, die die Agentur verfeinerte und optimierte, bevor sie in Spline kamen.

Der Workflow war iterativ: Polygonzahl, Materialien und Licht wurden austariert, um ein ansprechendes Ergebnis und flüssige Performance im Web in Einklang zu bringen.

Spline brachte die technische und die kreative Seite des Prozesses zusammen. Die Performance-Tools gaben dem Team klare Einblicke in die Modelloptimierung und sorgten für eine reibungslose Integration auf allen Geräten. Mit dem Event-System ließ sich interaktive Bewegung ganz einfach einrichten, und die vielseitigen Material- und Lichtwerkzeuge halfen, den Look des Produkts zu verfeinern, damit es im Web ausgefeilt und realistisch wirkt.

3D-Modelle und die finale mobile Umsetzung

Eines der herausragenden Details? Das 3D-Modell der Zähne. Um den Scanner in Aktion zu zeigen, modellierte das Team in Spline natürlich aussehende Zähne – ein entscheidender Feinschliff, der die Demo authentisch wirken ließ.

Diese Liebe zum Detail hob die Demo über eine rein technische Präsentation hinaus. Durch die Verbindung von Realismus und Interaktivität schuf das Team eine Produktgeschichte, die authentisch und fesselnd wirkte und direkt zeigte, wie Zahnärzte den Scanner tatsächlich nutzen würden.

Es hat Spaß gemacht, war aber auch entscheidend. Da der Scanner dazu dient, Zähne zu scannen, musste das 3D-Modell natürlich aussehen und wirken.

Liza Grin, Digital Producer at KOJI
Von oben nach unten: finale Umsetzung, ursprüngliche 3D-Modelle und erster Entwurf

Integration mit Webflow

Das KOJI-Team setzte auf Spline, um das Produkt Ori Scan zum Leben zu erwecken, und auf die native Webflow-Integration von Spline, um die 3D-Assets nahtlos in die Website einzubinden.

So ließen sich scrollbasierte Animationen mit interaktivem 3D kombinieren: Besucher können den Scanner drehen und erkunden, während sie durch die Seite scrollen.

Es ist sehr einfach und schnell. Der Einstieg ist leicht – selbst Junior-Designer können einsteigen und 3D in Webflow einbinden.

Pavel Dergachev, Founder & Creative Director at KOJI
Die native Webflow-Integration von Spline

Warum Interaktivität zählt

Für Ori Scan ging es bei einer interaktiven 3D-Produktpräsentation nicht nur um Ästhetik, sondern um Klarheit und Wirkung. Weil Kunden durch das Produkt scrollen, es drehen und seine Funktionen im Kontext erkunden können, entstand ein Erlebnis, das weit über das hinausgeht, was statische Fotos oder Videos leisten können.

Interaktivität verändert alles. Sie lässt das Produkt real wirken. Und vor allem hilft sie dem Kunden, seine Geschichte auf eine innovative Weise zu erzählen.

Pavel Dergachev, Founder & Creative Director at KOJI

Leg los mit Spline

Das KOJI-Team experimentiert weiter mit Spline. Für sie markierte dieses Projekt den Beginn eines neuen Kapitels, in dem 3D und interaktives Design nicht nur ein „Nice-to-have“ sind, sondern ein wesentlicher Teil des Erzählens von Produktgeschichten.

Ein visuell beeindruckendes Beispiel dafür, wie Interaktivität digitales Produktdesign in ein Erlebnis verwandeln kann, das sich real anfühlt.

Vertrieb kontaktieren

Weitere Kundenstorys