# Paano gumagawa ang Onyx Coffee Lab ng interactive 3D para sa ecommerce - Spline customers (https://spline.design/fil/customers/onyx-coffee-lab)

> Gumagamit ang Onyx Coffee Lab ng interactive 3D sa Shopify para isalin ang husay at mga detalye ng produkto sa isang mabilis at modernong web experience — nang hindi isinasakripisyo ang performance o conversion.

[Mga Customer](https://spline.design/fil/customers)

Marso 2, 2026 · Kuwento ng customer · Onyx Coffee Lab

# Paano gumagawa ang Onyx Coffee Lab ng interactive 3D para sa ecommerce

Gumagamit ang Onyx Coffee Lab ng interactive 3D sa Shopify para isalin ang husay at mga detalye ng produkto sa isang mabilis at modernong web experience — nang hindi isinasakripisyo ang performance o conversion.

Isang sensory na karanasan ang kape. Pero hindi ang online shopping.

Para sa [Onyx Coffee Lab](https://onyxcoffeelab.com/), nakasalalay ang online presence nila sa kung paano nila mapupunan ang puwang na iyon.

Sa isang masikip na kategorya kung saan magkakamukha ang mga butil ng kape at nasa amoy, lasa at texture ang pagkakaiba ng mga produkto, may hangganan ang pagkukuwento gamit lang ang mga salita.

Kailangan ng Onyx ng digital experience na dala ang parehong pagkahumaling sa husay na makikita sa kanilang roasting, nang hindi pinababagal ang performance o conversion.

Kaya itinulak nila ang hangganan: interactive 3D sa web, binuo gamit ang **Spline**, at in-ship ng isang maliit na team.

Scroll-based na 3D experience para sa [2025 Advent ng Onyx Coffee Lab](https://onyxcoffeelab.com/products/2025-advent-calendar)

## Pagkakaiba ng brand nang walang pandama

Kilalang mahirap ang coffee branding online:

- **Magkakamukha ang karamihan ng mga produkto.**Mukha pa ring butil ng kape ang light roast katabi ng dark roast.
- **Nagbebenta ka ng pagkain nang walang amoy o lasa.**Walang sensory na feedback loop.
- **Puno na ang market.**Hindi na nagpapaiba ang “masarap na kape”.

Kailangang higit pa sa maganda ang site ng Onyx. Kailangan nitong makipag-usap nang mabilis. Kung hindi, mabilis mawawalan ng interes ang target audience nila at aalis.

## Ginagawang nakikitang signal ng brand ang husay

Inilarawan ni Michael Mahler, CTO sa Onyx Coffee Lab, ang dalawang haligi na nagtatakda sa brand:

1. **Ang pinakasariwang kape hangga't maaari**Nire-roast ang kape kapag may order at mabilis na ipinapadala. Kadalasan, 24-48 oras mula roaster hanggang pintuan.
2. **Etikal na sourcing na nagbabago sa mga insentibo**Nagbabayad ang Onyx sa mga producer ng 4-6x ng presyo sa commodity market, bumubuo ng pangmatagalang relasyon na lumilikha ng mahalagang feedback loop: gustong ibenta ng mga producer sa Onyx ang pinakamahuhusay nilang lot, at nakikinabang ang mga komunidad sa proseso.

Dala rin ang parehong pananaw na iyon sa kanilang web experience.

> Ang slogan namin ay ‘Never settle for good enough.’ Palagi itong: ano ang magagawa namin para gumaling, at hindi kailanman tumitigil ang mentalidad na iyon.

**Michael Mahler**, CTO sa Onyx Coffee Lab

Ang [Circadian product page](https://onyxcoffeelab.com/products/circadian) ng Onyx Coffee Lab na may interactive na 3D scene

## Pagdidisenyo para sa mga prosumer

Hindi para sa lahat nagdidisenyo ang Onyx. Para sa mga taong nagpapahalaga sa detalye sila nagdidisenyo.

Tinatawag sila ni Michael na mga prosumer. Mga customer na napapansin kapag nagtitipid ang isang brand sa maliliit na bagay, at umaasang ipapakita ng magkakaugnay na digital experience ang kalidad ng produkto.

Hinubog nito ang isang sinadyang design approach kung saan kailangang agad na maunawaan ang site, pero kailangan din itong nasa mismong gilid ng itinuturing na “normal” sa ecommerce.

Natagpuan ng Onyx ang gilid na nagpapaiba sa kanila sa iisang lugar: **3D Design gamit ang Spline**.

> Gusto naming hanapin ang linyang iyon at sakyan ito nang pinakamalapit hangga't kaya namin… ang linyang iyon ay ang 3D animation.

Mga detalye mula sa [Circadian product page](https://onyxcoffeelab.com/products/circadian) ng Onyx Coffee Lab

## Isang Shopify site na gumagamit ng runtime ng Spline

Tumatakbo ang Onyx sa Shopify, pero ganap na custom na frontend ang storefront experience nila, na itinutulak ang Shopify hanggang sa limitasyon nito.

Sa halip na mag-export ng mga model o umasa sa isang dedikadong integration, ine-embed ng Onyx ang Spline gamit ang Spline Viewer, at ang Code API ng Spline para kontrolin ang mga scene sa pamamagitan ng code.

Dahil dito, nakakagawa sila ng mga interactive na sandali na kumikilos na parang mga feature ng produkto. Hindi lang mga static na visual.

## Mula storyboard hanggang mga interaction sa Spline

Ginawa ang 3D production flow ng Onyx para sa bilis, pagkakaisa at episyensya:

1. **High-quality na mga product rendering**Kadalasang ibinibigay sa design bilang mga cut-out na PNG.
2. **Storyboarding**Ini-“keyframe” ng design team ang galaw: ano ang gumagalaw, kailan at bakit.
3. **Pag-animate sa Spline**Ginagawang muli ng team ang mga storyboard na iyon bilang totoong mga interactive na scene.
4. **Handoff sa dev**Napupunta sa site ang mga Spline embed, kinokontrol sa pamamagitan ng runtime logic.

State-based na animation na pinapagana ng mga pagbabago sa variable

## Paggamit ng 3D para ipaliwanag ang hindi inaasahan ng mga customer

Hindi karaniwang product page ng kape ang [Circadian](https://onyxcoffeelab.com/products/circadian).

Sa halip na mga karaniwang paglalarawan ng kape gaya ng ‘light vs. dark roast’ o ‘tasting notes,’ nagpapakilala ang Circadian ng mga variant batay sa dami ng caffeine at may calculator para matulungan ang mga customer na iangkop ang pag-inom nila sa buong araw.

Ginagamit ng Onyx ang mga 3D visual bilang sistemang nagpapaliwanag para maipalaganap ang impormasyong ito at gawin itong mas engaging:

- Biswal na ipinapakilala ng background ang konsepto
- Tumutugon ang scene sa interaction
- Nagti-trigger ng iba't ibang galaw sa Spline scene ang pag-click sa iba't ibang variant

“Para sa amin, ang iba't ibang variant ay literal na kung gaano karaming caffeine ang nasa produkto. Gagalaw ang asset sa background depende sa experience na tinitingnan nila.”

At higit sa lahat, inayos ng team ng Onyx ang mga interactive asset nila para hindi makasagabal kapag kailangan, o maging interactive at nasa gitna kapag kailangan. Halimbawa, kapag may mahalagang text na dumadaan sa page, hinihinaan ang ilaw sa mga naka-embed na 3D asset.

Mga antas ng kape na ipinaliwanag sa tulong ng isang interactive na 3D visualization

## Ang pinakamalaking panalo: Bilis ng deployment

Para sa Onyx, hindi lang visual na kalidad ang pangunahing bentahe – kundi ang pagiging posible at bilis para sa team nila.

Mga 10 tao lang ang humahawak sa code at creative ng site. Malaking commitment at gastos para sa isang coffee company ang pag-hire ng mga dedikadong 3D engineer at designer.

Pinabababa ng Spline ang panganib sa pagpapaikli ng mga timeline at pagiging abot-kamay ng 3D para sa lahat.

> Ang pinakamalaking bentahe ay ang bilis ng deployment… Pinabababa ng Spline ang panganib sa pagsisimulang gawin ang ilan sa mga bagay na ito sa 3D.

## Magsimula sa Spline

Hindi ginamit ng Onyx Coffee Lab ang 3D para magpasikat. Ginamit nila ito para lutasin ang isang totoong problema sa ecommerce:

**Paano mo gagawing totoo ang pakiramdam ng isang sensory na produkto online nang hindi isinasakripisyo ang bilis, linaw o conversion?**

Sa Spline, nakahanap sila ng workflow na bagay sa maliit na team, maayos na tumatakbo sa mobile, at nagpapabilis sa pag-ship ng interactive na pagkukuwento, kaya naiiba nila ang brand nila sa masikip na market.

[Kausapin ang sales](https://spline.design/fil/enterprise)

## Iba pang kuwento ng customer

[Abril 13, 2026 · Kuwento ng customerPaano binigyang-buhay ng Lynksen ang website ng isang komplikadong B2B platform gamit ang Spline](https://spline.design/fil/customers/lynksen)[Pebrero 24, 2026 · Kuwento ng customerPaano iniangat ng Hermetica ang fintech brand nito gamit ang 3D Design](https://spline.design/fil/customers/hermetica)[Oktubre 20, 2025 · Kuwento ng customerPaano binubuo ng Oscilar ang brand ng AI risk platform nila gamit ang Spline](https://spline.design/fil/customers/oscilar)

[Spline](https://spline.design/fil)

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

- [Web](https://spline.design/fil/web)
- [iOS](https://spline.design/fil/ios)
- [Android](https://spline.design/fil/android)

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/fil/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Mga Solusyon](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.