Как Onyx Coffee Lab создаёт интерактивное 3D для электронной коммерции

Кофе — это чувственный опыт. А онлайн-покупки — нет.

Для Onyx Coffee Lab присутствие в сети зависело от того, удастся ли преодолеть этот разрыв.

В переполненной категории, где кофейные зёрна выглядят одинаково, а различия продуктов кроются в аромате, вкусе и текстуре, одними словами историю далеко не расскажешь.

Onyx нужен был цифровой опыт, в котором чувствовалась бы та же одержимость мастерством, что и в их обжарке, — без потерь в производительности и конверсии.

И они раздвинули границы: интерактивное 3D в вебе, созданное в Spline и выпущенное небольшой командой.

3D-опыт со скроллом для адвент-календаря Onyx Coffee Lab 2025

Как выделить бренд, когда нет вкуса и запаха

Брендинг кофе в онлайне — известная головная боль:

• Большинство продуктов выглядят похоже. Светлая обжарка рядом с тёмной — всё равно кофейные зёрна.

• Вы продаёте еду без запаха и вкуса. Нет никакой сенсорной обратной связи.

• Рынок перенасыщен. «Отличный кофе» уже не отличительная черта.

Сайт Onyx должен был не просто хорошо выглядеть. Он должен был быстро доносить суть. Иначе целевая аудитория быстро потеряла бы интерес и ушла.

Как превратить мастерство в заметный сигнал бренда

Майкл Малер, технический директор Onyx Coffee Lab, назвал две опоры бренда:

1. Максимально свежий кофе Кофе обжаривают под заказ и быстро отправляют. Часто от ростера до двери проходит 24–48 часов.
2. Этичные закупки, которые меняют стимулы Onyx платит производителям в 4–6 раз больше биржевой цены и выстраивает долгосрочные отношения, создающие важную обратную связь: производители хотят продавать Onyx свои лучшие лоты, а их сообщества от этого выигрывают.

Тот же подход переносится и на веб-опыт.

Наш девиз — «Никогда не довольствуйся просто хорошим». Мы всегда думаем, что можно улучшить, и этот настрой никогда не выключается.

Страница продукта Circadian от Onyx Coffee Lab с интерактивной 3D-сценой

Дизайн для просьюмеров

Onyx проектирует не для всех. Они проектируют для тех, кому важны детали.

Майкл называет их просьюмерами. Это покупатели, которые замечают, когда бренд экономит на мелочах, и ждут, что цельный цифровой опыт будет отражать качество продукта.

Отсюда и осознанный подход к дизайну: сайт должен быть понятен с первого взгляда, но при этом находиться на самой грани того, что считается «нормальным» для электронной коммерции.

Onyx нашла эту отличительную грань в одном месте — в 3D-дизайне в Spline.

Мы хотели найти эту грань и пройти по ней как можно ближе… и этой гранью стала 3D-анимация.

Сайт на Shopify на рантайме Spline

Onyx работает на Shopify, но витрина магазина — полностью собственный фронтенд, который выжимает из Shopify максимум.

Вместо экспорта моделей или отдельной интеграции Onyx встраивает Spline через Spline Viewer и управляет сценами программно через Code API Spline.

Это позволяет создавать интерактивные моменты, которые работают как функции продукта, а не просто статичные визуалы.

От раскадровок к взаимодействиям в Spline

Процесс 3D-производства в Onyx построен ради скорости, согласованности и эффективности:

1. Качественные рендеры продукта Обычно передаются дизайнерам в виде вырезанных PNG.
2. Раскадровка Дизайн-команда расставляет «ключевые кадры» движения: что движется, когда и зачем.
3. Анимация в Spline Команда воссоздаёт раскадровки в виде настоящих интерактивных сцен.
4. Передача в разработку Встраивания Spline появляются на сайте и управляются логикой рантайма.

3D объясняет то, чего покупатели не ожидают

Circadian — не типичная страница кофейного продукта.

Вместо привычных описаний вроде «светлая или тёмная обжарка» или «вкусовые ноты» Circadian предлагает варианты по уровню кофеина и калькулятор, который помогает покупателям распределить потребление в течение дня.

Onyx использует 3D-визуалы как систему объяснения, чтобы донести эту информацию и сделать её увлекательнее:

• Фон визуально вводит в концепцию
• Сцена реагирует на взаимодействие
• Клик по разным вариантам запускает разное движение в сцене Spline

«Разные варианты для нас — это буквально количество кофеина в продукте. Объект на фоне двигается в зависимости от того, какой вариант смотрит пользователь».

И что особенно важно, команда Onyx выстроила интерактивные ассеты так, чтобы они уходили на второй план, когда нужно, и выходили на первый, становясь интерактивными, когда это уместно. Например, когда по странице проходит важный текст, освещение встроенных 3D-ассетов приглушается.

Главный выигрыш: время до запуска

Для Onyx главное преимущество — не только качество визуала, но и реализуемость и скорость для их команды.

С кодом сайта и креативом работают примерно 10 человек. Нанимать отдельных 3D-инженеров и дизайнеров — серьёзное обязательство и большие расходы для кофейной компании.

Spline снижает риск: сокращает сроки и делает 3D доступным для всех.

Самое большое преимущество — время до запуска… Spline снижает риск, на который приходится идти, чтобы начать делать такие вещи в 3D.

Начните работать со Spline

Onyx Coffee Lab взялась за 3D не ради эффектности. Компания использовала его, чтобы решить реальную задачу электронной коммерции:

Как сделать так, чтобы чувственный продукт ощущался настоящим онлайн, не жертвуя скоростью, ясностью или конверсией?

В Spline они нашли процесс, который подходит небольшой команде, плавно работает на мобильных и позволяет быстро выпускать интерактивные истории, — и это помогает им выделить бренд на переполненном рынке.

Связаться с отделом продаж