# Onyx Coffee Lab tạo 3D tương tác cho thương mại điện tử như thế nào - Spline customers (https://spline.design/vi/customers/onyx-coffee-lab)

> Onyx Coffee Lab dùng 3D tương tác trên Shopify để chuyển tải sự tinh tế của nghề rang và những khác biệt nhỏ của sản phẩm thành một trải nghiệm web nhanh, hiện đại, mà không đánh đổi hiệu năng hay tỷ lệ chuyển đổi.

[Khách hàng](https://spline.design/vi/customers)

2 tháng 3, 2026 · Câu chuyện khách hàng · Onyx Coffee Lab

# Onyx Coffee Lab tạo 3D tương tác cho thương mại điện tử như thế nào

Onyx Coffee Lab dùng 3D tương tác trên Shopify để chuyển tải sự tinh tế của nghề rang và những khác biệt nhỏ của sản phẩm thành một trải nghiệm web nhanh, hiện đại, mà không đánh đổi hiệu năng hay tỷ lệ chuyển đổi.

Cà phê là một trải nghiệm giác quan. Nhưng mua sắm trực tuyến thì không.

Với [Onyx Coffee Lab](https://onyxcoffeelab.com/), sự hiện diện trực tuyến của họ phụ thuộc vào cách họ thu hẹp khoảng cách đó.

Trong một thị trường đông đúc, nơi hạt cà phê trông giống hệt nhau và khác biệt sản phẩm nằm ở hương thơm, vị và cảm giác, chỉ kể chuyện bằng lời thì chỉ đi được đến một mức nào đó.

Onyx cần một trải nghiệm số mang được cùng niềm say mê với nghề như trong cách họ rang cà phê, mà không làm chậm hiệu năng hay giảm tỷ lệ chuyển đổi.

Vì vậy họ đã vượt qua giới hạn: 3D tương tác trên web, xây dựng bằng **Spline**, và được ra mắt bởi một đội ngũ nhỏ.

Trải nghiệm 3D theo thao tác cuộn cho [Onyx Coffee Lab's 2025 Advent](https://onyxcoffeelab.com/products/2025-advent-calendar)

## Tạo khác biệt thương hiệu khi không có giác quan

Xây dựng thương hiệu cà phê trên mạng nổi tiếng là khó:

- **Hầu hết sản phẩm trông giống nhau.**Cà phê rang nhạt đặt cạnh cà phê rang đậm vẫn chỉ trông như hạt cà phê.
- **Bạn bán đồ ăn uống mà không có mùi hay vị.**Không có vòng phản hồi giác quan nào.
- **Thị trường đã bão hòa.**"Cà phê ngon" không còn là điểm khác biệt nữa.

Website của Onyx không chỉ cần đẹp. Nó phải truyền tải thật nhanh. Nếu không, khách hàng mục tiêu sẽ nhanh chóng mất hứng thú và rời đi.

## Biến tay nghề thành tín hiệu thương hiệu hữu hình

Michael Mahler, CTO tại Onyx Coffee Lab, mô tả hai trụ cột định hình thương hiệu:

1. **Cà phê tươi nhất có thể**Cà phê được rang theo đơn và giao nhanh chóng. Thường chỉ 24-48 giờ từ lò rang đến tận cửa nhà.
2. **Nguồn cung có đạo đức, thay đổi cách tạo động lực**Onyx trả cho người sản xuất gấp 4-6 lần giá thị trường hàng hóa, xây dựng mối quan hệ lâu dài tạo nên một vòng phản hồi thiết yếu: người sản xuất muốn bán cho Onyx những lô tốt nhất, và cộng đồng cũng được hưởng lợi trong quá trình đó.

Chính tư duy đó cũng được mang vào trải nghiệm web của họ.

> Khẩu hiệu của chúng tôi là 'Never settle for good enough' (Đừng bao giờ hài lòng với "đủ tốt"). Chúng tôi luôn hỏi: mình có thể cải thiện điều gì, và tinh thần đó không bao giờ dừng lại.

**Michael Mahler**, CTO tại Onyx Coffee Lab

[Trang sản phẩm Circadian](https://onyxcoffeelab.com/products/circadian) của Onyx Coffee Lab với một cảnh 3D tương tác

## Thiết kế cho prosumer

Onyx không thiết kế cho tất cả mọi người. Họ thiết kế cho những người quan tâm đến chi tiết.

Michael gọi họ là prosumer. Những khách hàng nhận ra khi một thương hiệu làm qua loa những điều nhỏ nhặt, và kỳ vọng trải nghiệm số nhất quán phản ánh chất lượng sản phẩm.

Điều này định hình một cách tiếp cận thiết kế có chủ đích: website phải dễ hiểu ngay lập tức, nhưng cũng phải nằm ngay sát ranh giới của những gì "bình thường" với thương mại điện tử.

Onyx đã tìm thấy lợi thế khác biệt đó ở một nơi: **thiết kế 3D với Spline**.

> Chúng tôi muốn tìm ra ranh giới đó và bám sát nó hết mức có thể… ranh giới đó chính là hoạt ảnh 3D.

Chi tiết từ [trang sản phẩm Circadian](https://onyxcoffeelab.com/products/circadian) của Onyx Coffee Lab

## Website Shopify khai thác runtime của Spline

Onyx chạy trên Shopify, nhưng trải nghiệm cửa hàng của họ là một frontend tùy chỉnh hoàn toàn, đẩy Shopify đến giới hạn.

Thay vì xuất mô hình hay dựa vào một tích hợp chuyên dụng, Onyx nhúng Spline bằng Spline Viewer, và dùng Code API của Spline để điều khiển cảnh bằng lập trình.

Điều này cho phép họ xây dựng những khoảnh khắc tương tác hoạt động như tính năng sản phẩm. Không chỉ là hình ảnh tĩnh.

## Từ storyboard đến tương tác trong Spline

Quy trình sản xuất 3D của Onyx được xây dựng cho tốc độ, sự đồng bộ và hiệu quả:

1. **Hình render sản phẩm chất lượng cao**Thường được giao cho bộ phận thiết kế dưới dạng PNG đã tách nền.
2. **Storyboard**Đội ngũ thiết kế "đặt keyframe" cho chuyển động: cái gì chuyển động, khi nào và vì sao.
3. **Tạo hoạt ảnh trong Spline**Đội ngũ tái tạo các storyboard đó thành những cảnh tương tác thực sự.
4. **Bàn giao cho lập trình viên**Các bản nhúng Spline được đưa lên website, điều khiển bằng logic runtime.

Hoạt ảnh dựa trên trạng thái, vận hành bằng thay đổi biến

## Dùng 3D để giải thích những điều khách hàng không ngờ tới

[Circadian](https://onyxcoffeelab.com/products/circadian) không phải là một trang sản phẩm cà phê thông thường.

Thay vì những mô tả cà phê tiêu chuẩn như 'rang nhạt hay rang đậm' hay 'hương vị', Circadian giới thiệu các biến thể dựa trên hàm lượng caffeine và có một công cụ tính để giúp khách hàng điều chỉnh lượng tiêu thụ trong ngày.

Onyx dùng hình ảnh 3D như một hệ thống giải thích để truyền tải thông tin này và làm nó cuốn hút hơn:

- Hình nền giới thiệu khái niệm bằng hình ảnh
- Cảnh phản hồi theo tương tác
- Nhấp vào các biến thể khác nhau sẽ kích hoạt những chuyển động khác nhau trong cảnh Spline

"Với chúng tôi, các biến thể khác nhau chính là lượng caffeine có trong sản phẩm. Tài nguyên ở hình nền sẽ chuyển động tùy theo trải nghiệm mà khách hàng đang xem."

Và điều quan trọng là đội ngũ Onyx đã bố trí các tài nguyên tương tác để lùi lại khi cần, hoặc trở thành tâm điểm tương tác khi cần. Ví dụ, khi có đoạn văn bản quan trọng chạy qua trang, ánh sáng trên các tài nguyên 3D được nhúng sẽ dịu xuống.

Mức cà phê được giải thích nhờ một hình ảnh trực quan 3D tương tác

## Chiến thắng lớn nhất: thời gian triển khai

Với Onyx, lợi thế lớn nhất không chỉ là chất lượng hình ảnh, mà là tính khả thi và tốc độ cho đội ngũ của họ.

Có khoảng 10 người làm việc với code và nội dung sáng tạo của website. Tuyển kỹ sư và nhà thiết kế 3D chuyên trách là một cam kết và khoản chi lớn với một công ty cà phê.

Spline giảm rủi ro bằng cách rút ngắn tiến độ và giúp ai cũng có thể làm 3D.

> Lợi thế lớn nhất là thời gian triển khai… Spline giảm rủi ro khi bắt đầu làm một số thứ như thế này bằng 3D.

## Bắt đầu với Spline

Onyx Coffee Lab không dùng 3D để phô trương. Họ dùng nó để giải quyết một vấn đề thương mại điện tử thực sự:

**Làm sao để một sản phẩm thiên về giác quan trở nên chân thực trên mạng mà không đánh đổi tốc độ, sự rõ ràng hay tỷ lệ chuyển đổi?**

Với Spline, họ đã tìm được một quy trình phù hợp với đội ngũ nhỏ, chạy mượt trên di động và giúp kể chuyện tương tác được ra mắt nhanh chóng, cho phép họ tạo khác biệt cho thương hiệu trong một thị trường đông đúc.

[Liên hệ bộ phận kinh doanh](https://spline.design/vi/enterprise)

## Thêm câu chuyện khách hàng

[13 tháng 4, 2026 · Câu chuyện khách hàngLynksen đã thổi hồn vào website của một nền tảng B2B phức tạp bằng Spline như thế nào](https://spline.design/vi/customers/lynksen)[24 tháng 2, 2026 · Câu chuyện khách hàngHermetica đã nâng tầm thương hiệu fintech bằng thiết kế 3D như thế nào](https://spline.design/vi/customers/hermetica)[20 tháng 10, 2025 · Câu chuyện khách hàngOscilar xây dựng thương hiệu cho nền tảng rủi ro dựa trên AI bằng Spline như thế nào](https://spline.design/vi/customers/oscilar)

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

Trình chỉnh sửa 3D và 2D cho các nhóm và tác nhân AI của họ. Xuất bản lên web, iOS và Android.

#### Hỏi AI về Spline

#### Sản phẩm

- [Thiết kế 3D](https://spline.design/vi/3d-design)
- [Hana](https://spline.design/vi/hana)
- [Omma](https://omma.build)
- [Tạo 3D bằng AI](https://spline.design/vi/ai-generate)
- [Spline MCP](https://spline.design/vi/mcp)
- [Spline Arena](https://spline.design/vi/arena)
- [Bảng giá](https://spline.design/vi/pricing)
- [Doanh nghiệp](https://spline.design/vi/enterprise)

#### Runtime

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

#### Ứng dụng

- [Tải xuống](https://spline.design/vi/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Tải Spline Mirror](https://spline.design/download-mirror)

#### Học

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/vi/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Giải pháp](https://spline.design/solutions)

#### Cộng đồng

- [Cộng đồng Spline](https://community.spline.design)
- [Blog](https://spline.design/vi/blog)
- [Changelog](https://spline.design/vi/changelog)
- [Giáo dục](https://spline.design/vi/education)
- [Contra](https://spline.design/contra)
- [Tiếp thị liên kết](https://spline.design/vi/affiliate)

#### Công ty

- [Khách hàng](https://spline.design/vi/customers)
- [Tuyển dụng](https://www.ycombinator.com/companies/spline/jobs)
- [Bảo mật](https://spline.design/vi/security)

#### Pháp lý

- [Điều khoản & Điều kiện](https://spline.design/terms)
- [Quyền riêng tư](https://spline.design/privacy)

#### Liên hệ

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

© 2026 - Spline, Inc.