Jak Onyx Coffee Lab tvoří interaktivní 3D pro e-commerce

Káva je smyslový zážitek. Nakupování online ale ne.

Pro Onyx Coffee Lab záviselo jeho působení online na tom, jak dokáže tuto propast překlenout.

V přeplněné kategorii, kde kávová zrna vypadají stejně a rozdíly mezi produkty spočívají ve vůni, chuti a textuře, se se samotnými slovy daleko nedostanete.

Onyx potřeboval digitální zážitek, který ponese stejnou posedlost řemeslem, jaká se projevuje v jeho pražení – bez zpomalení výkonu nebo konverzí.

Posunul proto hranice: interaktivní 3D na webu, vytvořené ve Spline a dodané malým týmem.

3D zážitek řízený scrollováním pro adventní kalendář Onyx Coffee Lab 2025

Odlišení značky bez smyslů

Budovat kávovou značku online je notoricky těžké:

• Většina produktů vypadá podobně. Světle pražená káva vedle tmavě pražené pořád vypadá jako kávová zrna.

• Prodáváte potravinu bez vůně a chuti. Chybí smyslová zpětná vazba.

• Trh je nasycený. „Skvělá káva“ už není rozlišující znak.

Web Onyxu musel dělat víc než dobře vypadat. Musel sdělovat rychle. Jinak by jeho cílové publikum rychle ztratilo zájem a odešlo.

Řemeslo jako viditelný signál značky

Michael Mahler, CTO společnosti Onyx Coffee Lab, popsal dva pilíře, které značku definují:

1. Co nejčerstvější káva Káva se praží na objednávku a rychle odesílá. Často to od pražírny ke dveřím trvá 24–48 hodin.
2. Etické nákupy, které mění motivace Onyx platí pěstitelům 4–6× víc, než je komoditní tržní cena, a buduje dlouhodobé vztahy, které vytvářejí zásadní zpětnou vazbu: pěstitelé chtějí Onyxu prodávat své nejlepší šarže a komunity z toho mají prospěch.

Stejné smýšlení se promítá i do jeho webového zážitku.

Naše heslo zní ‚Nikdy se nespokoj s tím, co je jen dost dobré.‘ Pořád se ptáme: co můžeme zlepšit? A tohle smýšlení nikdy nekončí.

Produktová stránka Circadian od Onyx Coffee Lab s interaktivní 3D scénou

Design pro prosumery

Onyx nenavrhuje pro každého. Navrhuje pro lidi, kterým záleží na detailech.

Michael jim říká prosumeři. Zákazníci, kteří si všimnou, když značka šidí drobnosti, a kteří očekávají ucelené digitální zážitky odpovídající kvalitě produktu.

To formovalo promyšlený přístup k designu: web musí být okamžitě srozumitelný, ale zároveň se musí pohybovat přímo na hraně toho, co je v e-commerce „normální“.

Onyx našel tuto odlišující hranu na jednom místě: 3D design ve Spline.

Chtěli jsme tu hranici najít a držet se jí co nejblíž… a tou hranicí byla 3D animace.

Web na Shopify s runtimem Spline

Onyx běží na Shopify, ale jeho obchod má plně vlastní frontend, který Shopify posouvá na hranu možností.

Místo exportu modelů nebo spoléhání na speciální integraci Onyx vkládá Spline pomocí Spline Viewer a scény programově ovládá přes Code API Spline.

Díky tomu může stavět interaktivní momenty, které se chovají jako funkce produktu. Ne jen statické vizuály.

Od storyboardů k interakcím ve Spline

Produkční postup 3D v Onyxu je postavený na rychlosti, sladění a efektivitě:

1. Kvalitní produktové rendery Designérům se často předávají jako vyříznuté PNG.
2. Storyboard Designový tým rozvrhne pohyb do „klíčových snímků“: co se hýbe, kdy a proč.
3. Animace ve Spline Tým storyboardy znovu vytvoří jako skutečné interaktivní scény.
4. Předání vývoji Vložené scény ze Spline se dostanou na web, ovládané logikou v runtimu.

3D jako vysvětlení toho, co zákazníci nečekají

Circadian není typická produktová stránka kávy.

Místo běžných popisů kávy jako „světlé vs. tmavé pražení“ nebo „chuťové tóny“ přináší Circadian varianty podle obsahu kofeinu a obsahuje kalkulačku, která zákazníkům pomůže rozvrhnout příjem během dne.

Onyx používá 3D vizuály jako vysvětlující systém, který tyto informace pomáhá předat a dělá je poutavějšími:

• Pozadí koncept vizuálně představí
• Scéna reaguje na interakci
• Kliknutí na různé varianty spouští ve scéně Spline různé pohyby

„Jednotlivé varianty jsou u nás doslova o tom, kolik kofeinu produkt obsahuje. Asset v pozadí se pohybuje podle toho, na který zážitek se zákazník dívá.“

A co je zásadní, tým Onyxu navrhl interaktivní assety tak, aby podle potřeby ustoupily do pozadí, nebo se staly interaktivním středem pozornosti. Když například stránkou prochází důležitý text, osvětlení vložených 3D assetů se ztlumí.

Největší výhra: rychlost nasazení

Pro Onyx není hlavní výhodou jen vizuální kvalita – je to proveditelnost a rychlost pro jeho tým.

Na kódu webu a kreativě pracuje zhruba 10 lidí. Najmout specializované 3D inženýry a designéry je pro kávovou firmu velký závazek i výdaj.

Spline snižuje riziko tím, že zkracuje termíny a zpřístupňuje 3D všem.

Největší výhodou je rychlost nasazení… Spline snižuje riziko, které s sebou nese pustit se do takových věcí ve 3D.

Začněte se Spline

Onyx Coffee Lab nesáhl po 3D, aby se předváděl. Použil ho k vyřešení skutečného problému e-commerce:

Jak online zprostředkovat smyslový produkt, aniž byste obětovali rychlost, srozumitelnost nebo konverze?

Se Spline našel postup, který vyhovuje malému týmu, plynule běží na mobilu a umožňuje rychle dodávat interaktivní vyprávění – a odlišit tak značku na přeplněném trhu.

Kontaktovat obchodní oddělení