# Como a Onyx Coffee Lab cria 3D interativo para e-commerce - Spline customers (https://spline.design/pt-br/customers/onyx-coffee-lab) > A Onyx Coffee Lab usa 3D interativo na Shopify para traduzir o capricho 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-br/customers) 2 de março de 2026 · História de cliente · Onyx Coffee Lab # Como a Onyx Coffee Lab cria 3D interativo para e-commerce A Onyx Coffee Lab usa 3D interativo na Shopify para traduzir o capricho artesanal e as nuances dos produtos numa experiência web rápida e moderna — sem sacrificar o desempenho nem as conversões. Café é uma experiência sensorial. Mas comprar online não é. Para a [Onyx Coffee Lab](https://onyxcoffeelab.com/), a presença online dependia de como ela conseguiria superar essa distância. Numa categoria lotada, em que 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 limite. A Onyx precisava de uma experiência digital que carregasse a mesma obsessão pelo ofício que aparece na torra, sem prejudicar o desempenho nem a conversão. Então a empresa foi além: 3D interativo na web, criado com o **Spline** e entregue por uma equipe pequena. Experiência 3D com rolagem para o [Advent 2025 da Onyx Coffee Lab](https://onyxcoffeelab.com/products/2025-advent-calendar) ## Diferenciação de marca sem os sentidos Construir uma marca de café online é notoriamente difícil: - **A maioria dos produtos é visualmente parecida.**Uma torra clara ao lado de uma torra escura continua parecendo grãos de café. - **Você vende comida sem cheiro nem sabor.**Não há retorno sensorial. - **O mercado está saturado.**“Café excelente” já não é um diferencial. O site da Onyx precisava fazer mais do que ser bonito. Tinha que comunicar rápido. Senão, o público-alvo perderia o interesse logo e iria embora. ## Transformando o ofício 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 sob encomenda e enviado rapidamente. Muitas vezes, são 24-48 horas da torrefação até a porta do cliente. 2. **Compra ética que muda os incentivos**A Onyx paga aos produtores de 4 a 6 vezes o preço do mercado de commodities, construindo relações de longo prazo que criam um ciclo essencial: os produtores querem vender à Onyx seus melhores lotes, e as comunidades se beneficiam no processo. Essa mesma mentalidade se estende à experiência web. > Nosso lema é ‘Nunca se contente com o bom o bastante’. É sempre: o que podemos fazer para melhorar? E essa mentalidade nunca para. **Michael Mahler**, CTO, Onyx Coffee Lab A [página de produto do 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 todo mundo. Faz design para quem se importa com os detalhes. Michael os chama de prosumers. Clientes que percebem quando uma marca economiza nos pequenos detalhes e que esperam experiências digitais coesas, à altura da qualidade do produto. Isso moldou uma abordagem de design deliberada: o site tem que ser compreensível na hora, mas também tem que ficar bem no limite do que é “normal” no e-commerce. A Onyx encontrou esse diferencial num lugar: **design 3D com o Spline**. > Queríamos encontrar essa linha e chegar o mais perto possível dela… e essa linha era a animação 3D. Detalhes da [página de produto do Circadian](https://onyxcoffeelab.com/products/circadian) da Onyx Coffee Lab ## Um site na Shopify aproveitando o runtime do Spline A Onyx roda na Shopify, mas sua loja é um frontend totalmente personalizado, que leva a Shopify ao limite. Em vez de exportar modelos ou depender de uma integração dedicada, a Onyx incorpora o Spline usando o Spline Viewer e a Code API do Spline para controlar as cenas por código. Assim, eles criam momentos interativos que se comportam como recursos do produto. Não só visuais estáticos. ## Dos storyboards às interações no Spline O fluxo de produção 3D da Onyx foi pensado para velocidade, alinhamento e eficiência: 1. **Renderizações de produto em alta qualidade**Geralmente entregues ao design como PNGs recortados. 2. **Storyboard**A equipe de design define os “keyframes” do movimento: o que se move, quando e por quê. 3. **Animação no Spline**A equipe recria esses storyboards como cenas interativas de verdade. 4. **Handoff para o desenvolvimento**As cenas incorporadas do Spline vão para o site, controladas por lógica no runtime. Animação baseada em estados, movida por mudanças de variáveis ## Usando o 3D para explicar o que os clientes não esperam O [Circadian](https://onyxcoffeelab.com/products/circadian) não é uma página de produto de café comum. Em vez dos descritores tradicionais, como ‘torra clara vs. escura’ ou ‘notas de degustação’, o 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 visuais 3D como um sistema explicativo para transmitir essas informações e deixá-las mais envolventes: - O fundo apresenta o conceito visualmente - A cena responde à interação - Clicar em variantes diferentes dispara movimentos diferentes na cena do Spline “Para nós, as diferentes variantes são literalmente a quantidade de cafeína no produto. O asset no fundo se move conforme a experiência que a pessoa está vendo.” E, o mais importante, a equipe da Onyx pensou seus assets interativos para saírem do caminho quando necessário ou para virarem protagonistas quando necessário. Por exemplo, quando um texto importante atravessa a página, a iluminação dos assets 3D incorporados diminui. Os níveis de cafeína explicados com a ajuda de uma visualização 3D interativa ## A maior vitória: o tempo até a publicação Para a Onyx, a principal vantagem não é só a qualidade visual – é a viabilidade e a velocidade para a equipe. Cerca de 10 pessoas mexem no código e no criativo do site. Contratar engenheiros e designers 3D dedicados é um compromisso e um custo enormes para uma empresa de café. O Spline reduz o risco, encurtando os prazos e tornando o 3D acessível para todos. > A maior vantagem é o tempo até a publicação… O Spline reduz o risco de começar a fazer algumas dessas coisas em 3D. ## Comece a usar o Spline A Onyx Coffee Lab não adotou o 3D para aparecer. Ela o usou para resolver um problema real de e-commerce: **Como fazer um produto sensorial parecer real online sem sacrificar a velocidade, a clareza ou a conversão?** Com o Spline, eles encontraram um fluxo que cabe numa equipe pequena, roda bem no mobile e permite lançar narrativas interativas rapidamente, diferenciando a marca num mercado lotado. [Fale com vendas](https://spline.design/pt-br/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-br/customers/lynksen)[24 de fevereiro de 2026 · História de clienteComo a Hermetica elevou sua marca de fintech com design 3D](https://spline.design/pt-br/customers/hermetica)[20 de outubro de 2025 · História de clienteComo a Oscilar constrói a marca da sua plataforma de risco com IA usando o Spline](https://spline.design/pt-br/customers/oscilar) [Spline](https://spline.design/pt-br) O editor 3D e 2D para equipes e seus agentes. Publique na web, no iOS e no Android. #### Pergunte à IA sobre o Spline #### Produtos - [Design 3D](https://spline.design/pt-br/3d-design) - [Hana](https://spline.design/pt-br/hana) - [Omma](https://omma.build) - [Geração 3D com IA](https://spline.design/pt-br/ai-generate) - [Spline MCP](https://spline.design/pt-br/mcp) - [Spline Arena](https://spline.design/pt-br/arena) - [Preços](https://spline.design/pt-br/pricing) - [Empresas](https://spline.design/pt-br/enterprise) #### Runtimes - [Web](https://spline.design/pt-br/web) - [iOS](https://spline.design/pt-br/ios) - [Android](https://spline.design/pt-br/android) #### Apps - [Download](https://spline.design/pt-br/download) - [Spline Mirror](https://spline.design/spline-mirror) - [Baixar o Spline Mirror](https://spline.design/download-mirror) #### Aprenda - [Docs](https://docs.spline.design/) - [Academy](https://spline.design/pt-br/academy) - [API do Spline](https://www.npmjs.com/package/@splinetool/runtime) - [Soluções](https://spline.design/solutions) #### Comunidade - [Comunidade do Spline](https://community.spline.design) - [Blog](https://spline.design/pt-br/blog) - [Novidades](https://spline.design/pt-br/changelog) - [Educação](https://spline.design/pt-br/education) - [Contra](https://spline.design/contra) - [Afiliados](https://spline.design/pt-br/affiliate) #### Empresa - [Clientes](https://spline.design/pt-br/customers) - [Carreiras](https://www.ycombinator.com/companies/spline/jobs) - [Segurança](https://spline.design/pt-br/security) #### Jurídico - [Termos e condições](https://spline.design/terms) - [Privacidade](https://spline.design/privacy) #### Contato - [help@spline.design](mailto:help@spline.design) - [jobs@spline.design](mailto:jobs@spline.design) © 2026 - Spline, Inc.