Como a Onyx Coffee Lab cria 3D interativo para o ecommerce

O café é uma experiência sensorial. Mas as compras online não são.

Para a Onyx Coffee Lab, a presença online dependia da capacidade de colmatar essa distância.

Numa categoria saturada, onde os grãos de café parecem todos iguais e as diferenças entre produtos estão no aroma, no sabor e na textura, contar uma história só com palavras tem os seus limites.

A Onyx precisava de uma experiência digital capaz de transmitir a mesma obsessão pelo ofício que se vê na torra, sem prejudicar o desempenho nem a conversão.

Por isso, foram mais longe: 3D interativo na web, criado com o Spline e lançado por uma equipa pequena.

Experiência 3D baseada no scroll para o Advent 2025 da Onyx Coffee Lab

Diferenciar a marca sem os sentidos

O branding de café é notoriamente difícil online:

• A maioria dos produtos é visualmente semelhante. Uma torra clara ao lado de uma torra escura continua a parecer grãos de café.

• Estás a vender comida sem cheiro nem sabor. Não há qualquer feedback sensorial.

• O mercado está saturado. "Ótimo café" já não é um fator de diferenciação.

O site da Onyx tinha de fazer mais do que ser bonito. Tinha de comunicar depressa. Caso contrário, o público-alvo perderia rapidamente o interesse e iria embora.

Transformar o rigor artesanal num sinal visível da marca

Michael Mahler, CTO da Onyx Coffee Lab, descreveu os dois pilares que definem a marca:

1. O café mais fresco possível O café é torrado por encomenda e enviado rapidamente. Muitas vezes, 24 a 48 horas do torrador até à porta.
2. Um abastecimento ético que muda os incentivos A Onyx paga aos produtores 4 a 6 vezes o preço de mercado, construindo relações de longo prazo que criam um ciclo essencial: os produtores querem vender à Onyx os seus melhores lotes, e as comunidades beneficiam com isso.

Essa mesma mentalidade estende-se à experiência web.

O nosso lema é "Nunca te contentes com o suficiente". É sempre: o que podemos fazer para melhorar? E essa mentalidade nunca para.

A página de produto Circadian da Onyx Coffee Lab, com uma cena 3D interativa

Design para prosumers

A Onyx não faz design para toda a gente. Faz design para pessoas que se importam com os detalhes.

Michael chama-lhes prosumers. Clientes que reparam quando uma marca facilita nos pormenores e que esperam experiências digitais coerentes, à altura da qualidade do produto.

Isto moldou uma abordagem de design deliberada: o site tem de ser imediatamente compreensível, mas também tem de estar mesmo no limite do que é "normal" no ecommerce.

A Onyx encontrou esse fator de diferenciação num só lugar: design 3D com o Spline.

Queríamos encontrar essa linha e andar o mais perto dela possível… e essa linha era a animação 3D.

Um site Shopify que tira partido do runtime do Spline

A Onyx funciona sobre o Shopify, mas a sua loja é um frontend totalmente personalizado, que leva o Shopify ao limite.

Em vez de exportar modelos ou depender de uma integração dedicada, a Onyx incorpora o Spline com o Spline Viewer e usa a Code API do Spline para controlar as cenas de forma programática.

Isto permite-lhes criar momentos interativos que se comportam como funcionalidades do produto. E não apenas elementos visuais estáticos.

Dos storyboards às interações no Spline

O fluxo de produção 3D da Onyx foi pensado para a rapidez, o alinhamento e a eficiência:

1. Renders de produto de alta qualidade Muitas vezes entregues ao design como PNGs recortados.
2. Storyboarding A equipa de design define os "keyframes" do movimento: o que se move, quando e porquê.
3. Animação no Spline A equipa recria esses storyboards como verdadeiras cenas interativas.
4. Entrega ao desenvolvimento As cenas do Spline incorporadas chegam ao site, controladas pela lógica do runtime.

Usar o 3D para explicar o que os clientes não esperam

A Circadian não é uma página de produto de café típica.

Em vez dos descritores habituais, como "torra clara vs. escura" ou "notas de prova", a Circadian apresenta variantes baseadas no nível de cafeína e inclui uma calculadora para ajudar os clientes a ajustar o consumo ao longo do dia.

A Onyx usa elementos visuais 3D como um sistema explicativo para ajudar a transmitir esta informação e torná-la mais envolvente:

• O fundo apresenta o conceito visualmente
• A cena responde à interação
• Clicar nas diferentes variantes aciona movimentos diferentes na cena do Spline

"As diferentes variantes são, para nós, literalmente a quantidade de cafeína no produto. O elemento no fundo move-se consoante a experiência que estão a ver."

E, crucialmente, a equipa da Onyx enquadrou os seus elementos interativos para se manterem discretos quando necessário ou passarem a ser interativos e protagonistas quando é preciso. Por exemplo, quando um texto importante atravessa a página, a iluminação dos elementos 3D incorporados é reduzida.

A maior vitória: o tempo até à publicação

Para a Onyx, a grande vantagem não é apenas a qualidade visual – é a viabilidade e a rapidez para a sua equipa.

Há cerca de 10 pessoas a trabalhar no código e na parte criativa do site. Contratar engenheiros e designers 3D dedicados é um grande compromisso e uma grande despesa para uma empresa de café.

O Spline reduz o risco ao encurtar os prazos e tornar o 3D acessível a todos.

A maior vantagem é o tempo até à publicação… O Spline reduz o risco de começar a fazer algumas destas coisas em 3D.

Começa a usar o Spline

A Onyx Coffee Lab não adotou o 3D para dar nas vistas. Usou-o para resolver um problema real de ecommerce:

Como fazer um produto sensorial parecer real online sem sacrificar a rapidez, a clareza ou a conversão?

Com o Spline, encontraram um fluxo de trabalho adequado a uma equipa pequena, que funciona sem problemas em mobile e permite lançar depressa narrativas interativas, ajudando-os a diferenciar a marca num mercado saturado.

Falar com a equipa comercial