Cómo Onyx Coffee Lab crea 3D interactivo para su ecommerce

El café es una experiencia sensorial. Comprar por internet, no.

Para Onyx Coffee Lab, su presencia online dependía de cómo pudieran salvar esa distancia.

En una categoría saturada, donde los granos de café se parecen todos y las diferencias entre productos están en el aroma, el sabor y la textura, contar una historia solo con palabras tiene un límite.

Onyx necesitaba una experiencia digital que transmitiera la misma obsesión por el oficio que se nota en su tueste, sin perjudicar el rendimiento ni la conversión.

Así que fueron más allá: 3D interactivo en la web, creado con Spline y lanzado por un equipo pequeño.

Experiencia 3D con scroll para el calendario de Adviento 2025 de Onyx Coffee Lab

Diferenciar la marca sin los sentidos

Hacer branding de café en internet es notoriamente difícil:

• La mayoría de los productos se parecen visualmente. Un tueste claro al lado de uno oscuro sigue pareciendo granos de café.

• Vendes comida sin olor ni sabor. No hay ninguna respuesta sensorial.

• El mercado está saturado. "Un café buenísimo" ya no es un diferenciador.

La web de Onyx tenía que hacer algo más que verse bien. Tenía que comunicar rápido. Si no, su público objetivo perdería el interés enseguida y se iría.

Convertir el oficio en una señal de marca visible

Michael Mahler, CTO de Onyx Coffee Lab, describe los dos pilares que definen la marca:

1. El café más fresco posible El café se tuesta bajo pedido y se envía rápido. A menudo pasan solo 24-48 horas del tostador a la puerta de casa.
2. Un abastecimiento ético que cambia los incentivos Onyx paga a los productores entre 4 y 6 veces el precio de mercado de la materia prima y construye relaciones a largo plazo que crean un círculo esencial: los productores quieren venderle a Onyx sus mejores lotes, y las comunidades se benefician en el proceso.

Esa misma mentalidad se traslada a su experiencia web.

Nuestro lema es "No te conformes nunca con lo suficientemente bueno". Siempre nos preguntamos qué podemos mejorar, y esa mentalidad no se detiene nunca.

La página de producto de Circadian de Onyx Coffee Lab, con una escena 3D interactiva

Diseñar para prosumidores

Onyx no diseña para todo el mundo. Diseña para personas a las que les importan los detalles.

Michael los llama prosumidores: clientes que notan cuándo una marca recorta en las cosas pequeñas y que esperan que una experiencia digital coherente refleje la calidad del producto.

Esto dio forma a un enfoque de diseño deliberado: la web tiene que entenderse al instante, pero también situarse justo en el límite de lo "normal" en ecommerce.

Onyx encontró ese límite diferenciador en un lugar: el diseño 3D con Spline.

Queríamos encontrar esa línea y movernos lo más cerca posible de ella… y esa línea era la animación 3D.

Una web en Shopify que aprovecha el runtime de Spline

Onyx funciona sobre Shopify, pero la experiencia de su tienda es un frontend totalmente personalizado que lleva Shopify al límite.

En lugar de exportar modelos o depender de una integración específica, Onyx inserta Spline con Spline Viewer y usa la Code API de Spline para controlar las escenas mediante código.

Esto les permite crear momentos interactivos que se comportan como funciones del producto, no solo como visuales estáticos.

De los storyboards a las interacciones en Spline

El flujo de producción 3D de Onyx está pensado para la velocidad, la alineación y la eficiencia:

1. Renders de producto de alta calidad Normalmente se entregan a diseño como PNG recortados.
2. Storyboarding El equipo de diseño marca los "keyframes" del movimiento: qué se mueve, cuándo y por qué.
3. Animación en Spline El equipo recrea esos storyboards como escenas interactivas reales.
4. Entrega a desarrollo Las escenas de Spline se insertan en la web y se controlan con lógica en el runtime.

Usar el 3D para explicar lo que los clientes no esperan

Circadian no es la típica página de producto de café.

En lugar de los descriptores habituales, como "tueste claro u oscuro" o "notas de cata", Circadian presenta variantes según su nivel de cafeína e incluye una calculadora para ayudar a los clientes a ajustar su consumo a lo largo del día.

Onyx usa los visuales 3D como un sistema explicativo que ayuda a transmitir esta información y la hace más atractiva:

• El fondo presenta el concepto visualmente
• La escena responde a la interacción
• Al hacer clic en las distintas variantes, se lanzan movimientos distintos en la escena de Spline

"Para nosotros, las distintas variantes son literalmente la cantidad de cafeína que tiene el producto. El recurso del fondo se mueve según la experiencia que estén viendo".

Y, algo crucial, el equipo de Onyx diseñó sus recursos interactivos para que se aparten cuando hace falta o pasen a primer plano, interactivos, cuando toca. Por ejemplo, cuando un texto importante cruza la página, se baja la iluminación de los recursos 3D insertados.

La gran victoria: el tiempo hasta el despliegue

Para Onyx, la gran ventaja no es solo la calidad visual: es la viabilidad y la velocidad para su equipo.

Unas 10 personas tocan el código y la parte creativa de la web. Contratar ingenieros y diseñadores 3D dedicados es un compromiso y un gasto enormes para una empresa de café.

Spline reduce el riesgo al acortar los plazos y hacer el 3D accesible para todos.

La mayor ventaja es el tiempo hasta el despliegue… Spline reduce el riesgo de empezar a hacer algunas de estas cosas en 3D.

Empieza con Spline

Onyx Coffee Lab no adoptó el 3D para llamar la atención. Lo usó para resolver un problema real de ecommerce:

¿Cómo haces que un producto sensorial se sienta real en internet sin sacrificar la velocidad, la claridad ni la conversión?

Con Spline encontraron un flujo de trabajo que encaja con un equipo pequeño, funciona con fluidez en móvil y permite lanzar rápido narrativas interactivas, lo que les ayuda a diferenciar su marca en un mercado saturado.

Habla con ventas