# Onyx Coffee Lab, e-ticaret için etkileşimli 3D’yi nasıl tasarlıyor - Spline customers (https://spline.design/tr/customers/onyx-coffee-lab)

> Onyx Coffee Lab, ustalığı ve ürün inceliklerini performanstan ya da dönüşümlerden ödün vermeden hızlı ve modern bir web deneyimine taşımak için Shopify’da etkileşimli 3D kullanıyor.

[Müşteriler](https://spline.design/tr/customers)

2 Mart 2026 · Müşteri hikâyesi · Onyx Coffee Lab

# Onyx Coffee Lab, e-ticaret için etkileşimli 3D’yi nasıl tasarlıyor

Onyx Coffee Lab, ustalığı ve ürün inceliklerini performanstan ya da dönüşümlerden ödün vermeden hızlı ve modern bir web deneyimine taşımak için Shopify’da etkileşimli 3D kullanıyor.

Kahve duyusal bir deneyim. Ama online alışveriş öyle değil.

[Onyx Coffee Lab](https://onyxcoffeelab.com/) için online varlıkları, bu boşluğu nasıl kapatabileceklerine bağlıydı.

Kahve çekirdeklerinin birbirinin aynısı göründüğü ve ürün farklarının koku, tat ve dokuda yattığı kalabalık bir kategoride, yalnızca kelimelerle hikâye anlatmak bir yere kadar götürür.

Onyx’in, kavurmalarında görülen ustalık tutkusunu performansı ya da dönüşümü yavaşlatmadan taşıyabilecek bir dijital deneyime ihtiyacı vardı.

Bu yüzden sınırı zorladılar: **Spline** ile oluşturulmuş ve küçük bir ekip tarafından yayına alınmış, web’de etkileşimli 3D.

[Onyx Coffee Lab’in 2025 Advent takvimi](https://onyxcoffeelab.com/products/2025-advent-calendar) için kaydırmayla ilerleyen 3D deneyim

## Duyular olmadan marka farklılaşması

Kahve markalaması online ortamda bilinen bir zorluk:

- **Çoğu ürün görsel olarak birbirine benzer.**Koyu kavrumun yanındaki açık kavrum da yine kahve çekirdeğine benzer.
- **Kokusu ve tadı olmayan bir yiyecek satıyorsun.**Duyusal bir geri bildirim döngüsü yok.
- **Pazar doymuş durumda.**“Harika kahve” artık bir fark yaratmıyor.

Onyx’in sitesinin iyi görünmekten fazlasını yapması gerekiyordu. Hızlı iletişim kurmalıydı. Yoksa hedef kitlesi çabucak ilgisini kaybedip ayrılırdı.

## Ustalığı görünür bir marka sinyaline dönüştürmek

Onyx Coffee Lab’in CTO’su Michael Mahler, markayı tanımlayan iki temel direği anlattı:

1. **Mümkün olan en taze kahve**Kahve siparişe göre kavruluyor ve hızla gönderiliyor. Çoğu zaman kavurucudan kapıya 24-48 saat.
2. **Teşvikleri değiştiren etik tedarik**Onyx üreticilere emtia piyasası fiyatının 4-6 katını ödüyor ve vazgeçilmez bir geri bildirim döngüsü yaratan uzun vadeli ilişkiler kuruyor: üreticiler en iyi partilerini Onyx’e satmak istiyor, topluluklar da bu süreçten faydalanıyor.

Aynı zihniyet web deneyimlerine de taşınıyor.

> Sloganımız ‘Asla yeterince iyiyle yetinme.’ Hep şu soru var: neyi daha iyi yapabiliriz? Ve bu zihniyet hiç durmuyor.

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

Onyx Coffee Lab’in etkileşimli 3D sahneli [Circadian ürün sayfası](https://onyxcoffeelab.com/products/circadian)

## Prosumer’lar için tasarlamak

Onyx herkes için tasarlamıyor. Ayrıntıları önemseyen insanlar için tasarlıyor.

Michael onlara prosumer diyor: bir markanın küçük şeylerde kestirmeden gittiğini fark eden ve tutarlı dijital deneyimlerin ürün kalitesini yansıtmasını bekleyen müşteriler.

Bu da bilinçli bir tasarım yaklaşımını şekillendirdi: site anında anlaşılır olmalı, ama aynı zamanda e-ticaret için “normal” olanın tam sınırında durmalı.

Onyx bu farklılaştırıcı sınırı tek bir yerde buldu: **Spline ile 3D tasarım**.

> O sınırı bulup ona olabildiğince yakından gitmek istedik… o sınır da 3D animasyondu.

Onyx Coffee Lab’in [Circadian ürün sayfasından](https://onyxcoffeelab.com/products/circadian) ayrıntılar

## Spline’ın runtime’ından yararlanan bir Shopify sitesi

Onyx Shopify üzerinde çalışıyor, ama mağaza deneyimleri Shopify’ı sınırlarına kadar zorlayan, tamamen özel bir ön yüz.

Onyx, modelleri dışa aktarmak ya da özel bir entegrasyona güvenmek yerine Spline’ı Spline Viewer ile gömüyor ve sahneleri programatik olarak kontrol etmek için Spline’ın Code API’sini kullanıyor.

Bu sayede yalnızca statik görseller değil, ürün özellikleri gibi davranan etkileşimli anlar oluşturabiliyorlar.

## Storyboard’lardan Spline etkileşimlerine

Onyx’in 3D üretim akışı hız, uyum ve verimlilik için kurulmuş:

1. **Yüksek kaliteli ürün render’ları**Genellikle tasarım ekibine dekupe edilmiş PNG’ler olarak teslim ediliyor.
2. **Storyboard**Tasarım ekibi hareketin “keyframe”lerini belirliyor: ne, ne zaman ve neden hareket ediyor.
3. **Spline’da canlandırma**Ekip bu storyboard’ları gerçek etkileşimli sahneler olarak yeniden oluşturuyor.
4. **Geliştiricilere aktarım**Spline gömmeleri, runtime mantığıyla kontrol edilerek siteye yerleşiyor.

Değişken değişiklikleriyle çalışan state tabanlı animasyon

## Müşterilerin beklemediğini anlatmak için 3D kullanmak

[Circadian](https://onyxcoffeelab.com/products/circadian) tipik bir kahve ürün sayfası değil.

Circadian, ‘açık ya da koyu kavrum’ veya ‘tadım notları’ gibi standart kahve tanımlayıcıları yerine kafein seviyelerine dayalı varyantlar sunuyor ve müşterilerin gün boyu alımlarını ayarlamalarına yardımcı olan bir hesaplayıcı içeriyor.

Onyx, bu bilgiyi aktarmaya ve daha ilgi çekici hale getirmeye yardımcı olan bir anlatım sistemi olarak 3D görseller kullanıyor:

- Arka plan konsepti görsel olarak tanıtıyor
- Sahne etkileşime tepki veriyor
- Farklı varyantlara tıklamak Spline sahnesinde farklı hareketleri tetikliyor

“Bizim için farklı varyantlar kelimenin tam anlamıyla üründe ne kadar kafein olduğu. Arka plandaki öğe, kullanıcının hangi deneyime baktığına göre hareket ediyor.”

Daha da önemlisi Onyx ekibi, etkileşimli öğelerini gerektiğinde geri planda kalacak, gerektiğinde de etkileşimli olarak ön plana çıkacak şekilde kurguladı. Örneğin sayfada önemli bir metin geçerken gömülü 3D öğelerin ışığı kısılıyor.

Etkileşimli bir 3D görselleştirme yardımıyla anlatılan kahve seviyeleri

## En büyük kazanım: yayına alma süresi

Onyx için en büyük avantaj yalnızca görsel kalite değil; ekipleri için uygulanabilirlik ve hız.

Site koduna ve kreatif işlere dokunan yaklaşık 10 kişi var. Özel 3D mühendisleri ve tasarımcıları işe almak bir kahve şirketi için büyük bir taahhüt ve masraf.

Spline, takvimleri kısaltarak ve 3D’yi herkes için ulaşılabilir kılarak riski azaltıyor.

> En büyük avantaj yayına alma süresi… Spline, bu tür şeyleri 3D’de yapmaya başlamanın riskini azaltıyor.

## Spline’a başla

Onyx Coffee Lab 3D’yi gösteriş olsun diye benimsemedi. Onu gerçek bir e-ticaret sorununu çözmek için kullandı:

**Duyusal bir ürünü hızdan, netlikten ya da dönüşümden ödün vermeden online ortamda nasıl gerçek hissettirirsin?**

Spline ile küçük bir ekibe uyan, mobilde akıcı çalışan ve etkileşimli hikâye anlatımının hızla yayına girmesini sağlayan bir iş akışı buldular; bu da markalarını kalabalık bir pazarda farklılaştırmalarına olanak tanıdı.

[Satış ekibiyle görüş](https://spline.design/tr/enterprise)

## Daha fazla müşteri hikâyesi

[13 Nisan 2026 · Müşteri hikâyesiLynksen, karmaşık bir B2B platformunun web sitesine Spline ile nasıl hayat verdi](https://spline.design/tr/customers/lynksen)[24 Şubat 2026 · Müşteri hikâyesiHermetica, fintech markasını 3D tasarımla nasıl bir üst seviyeye taşıdı](https://spline.design/tr/customers/hermetica)[20 Ekim 2025 · Müşteri hikâyesiOscilar, yapay zeka risk platformunu Spline ile nasıl markalıyor](https://spline.design/tr/customers/oscilar)

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

Ekipler ve ajanları için 3D ve 2D editör. Web’de, iOS’ta ve Android’de yayınla.

#### Spline’ı yapay zekaya sor

#### Ürünler

- [3D Tasarım](https://spline.design/tr/3d-design)
- [Hana](https://spline.design/tr/hana)
- [Omma](https://omma.build)
- [Yapay Zekayla 3D Üretim](https://spline.design/tr/ai-generate)
- [Spline MCP](https://spline.design/tr/mcp)
- [Spline Arena](https://spline.design/tr/arena)
- [Fiyatlandırma](https://spline.design/tr/pricing)
- [Kurumsal](https://spline.design/tr/enterprise)

#### Runtime’lar

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

#### Uygulamalar

- [İndir](https://spline.design/tr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror’ı indir](https://spline.design/download-mirror)

#### Öğren

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/tr/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Çözümler](https://spline.design/solutions)

#### Topluluk

- [Spline Topluluğu](https://community.spline.design)
- [Blog](https://spline.design/tr/blog)
- [Sürüm Notları](https://spline.design/tr/changelog)
- [Eğitim](https://spline.design/tr/education)
- [Contra](https://spline.design/contra)
- [Ortaklık](https://spline.design/tr/affiliate)

#### Şirket

- [Müşteriler](https://spline.design/tr/customers)
- [Kariyer](https://www.ycombinator.com/companies/spline/jobs)
- [Güvenlik](https://spline.design/tr/security)

#### Yasal

- [Şartlar ve Koşullar](https://spline.design/terms)
- [Gizlilik](https://spline.design/privacy)

#### İletişim

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

© 2026 - Spline, Inc.