# Como a Onyx Coffee Lab cria 3D interativo para o ecommerce - Spline customers (https://spline.design/pt-pt/customers/onyx-coffee-lab) > A Onyx Coffee Lab usa 3D interativo no Shopify para traduzir o rigor artesanal e as nuances dos produtos numa experiência web rápida e moderna — sem sacrificar o desempenho nem as conversões. [Clientes](https://spline.design/pt-pt/customers) 2 de março de 2026 · História de cliente · Onyx Coffee Lab # Como a Onyx Coffee Lab cria 3D interativo para o ecommerce A Onyx Coffee Lab usa 3D interativo no Shopify para traduzir o rigor artesanal e as nuances dos produtos numa experiência web rápida e moderna — sem sacrificar o desempenho nem as conversões. O café é uma experiência sensorial. Mas as compras online não são. Para a [Onyx Coffee Lab](https://onyxcoffeelab.com/), 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](https://onyxcoffeelab.com/products/2025-advent-calendar) ## 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. **Michael Mahler**, CTO da Onyx Coffee Lab A [página de produto Circadian](https://onyxcoffeelab.com/products/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. Detalhes da [página de produto Circadian](https://onyxcoffeelab.com/products/circadian) da Onyx Coffee Lab ## 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. Animação baseada em estados, movida por alterações de variáveis ## Usar o 3D para explicar o que os clientes não esperam A [Circadian](https://onyxcoffeelab.com/products/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. Os níveis de cafeína explicados com a ajuda de uma visualização 3D interativa ## 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](https://spline.design/pt-pt/enterprise) ## Mais histórias de clientes [13 de abril de 2026 · História de clienteComo a Lynksen deu vida ao site de uma plataforma B2B complexa com o Spline](https://spline.design/pt-pt/customers/lynksen)[24 de fevereiro de 2026 · História de clienteComo a Hermetica elevou a sua marca fintech com design 3D](https://spline.design/pt-pt/customers/hermetica)[20 de outubro de 2025 · História de clienteComo a Oscilar dá forma à marca da sua plataforma de risco com IA com o Spline](https://spline.design/pt-pt/customers/oscilar) [Spline](https://spline.design/pt-pt) O editor 3D e 2D para equipas e os seus agentes. Publica na web, em iOS e em Android. #### Pergunta à IA sobre o Spline #### Produtos - [Design 3D](https://spline.design/pt-pt/3d-design) - [Hana](https://spline.design/pt-pt/hana) - [Omma](https://omma.build) - [Geração 3D com IA](https://spline.design/pt-pt/ai-generate) - [Spline MCP](https://spline.design/pt-pt/mcp) - [Spline Arena](https://spline.design/pt-pt/arena) - [Preços](https://spline.design/pt-pt/pricing) - [Empresas](https://spline.design/pt-pt/enterprise) #### Runtimes - [Web](https://spline.design/pt-pt/web) - [iOS](https://spline.design/pt-pt/ios) - [Android](https://spline.design/pt-pt/android) #### Apps - [Transferir](https://spline.design/pt-pt/download) - [Spline Mirror](https://spline.design/spline-mirror) - [Transferir o Spline Mirror](https://spline.design/download-mirror) #### Aprender - [Docs](https://docs.spline.design/) - [Academy](https://spline.design/pt-pt/academy) - [API do Spline](https://www.npmjs.com/package/@splinetool/runtime) - [Soluções](https://spline.design/solutions) #### Comunidade - [Comunidade Spline](https://community.spline.design) - [Blog](https://spline.design/pt-pt/blog) - [Novidades](https://spline.design/pt-pt/changelog) - [Educação](https://spline.design/pt-pt/education) - [Contra](https://spline.design/contra) - [Afiliados](https://spline.design/pt-pt/affiliate) #### Empresa - [Clientes](https://spline.design/pt-pt/customers) - [Carreiras](https://www.ycombinator.com/companies/spline/jobs) - [Segurança](https://spline.design/pt-pt/security) #### Informação legal - [Termos e condições](https://spline.design/terms) - [Privacidade](https://spline.design/privacy) #### Contacto - [help@spline.design](mailto:help@spline.design) - [jobs@spline.design](mailto:jobs@spline.design) © 2026 - Spline, Inc.