Mar 2, 2026

How Onyx Coffee Lab crafts interactive 3D for ecommerce

Onyx Coffee Lab uses interactive 3D on Shopify to translate craft and product nuance into a fast, modern web experience — without sacrificing performance or conversions.

Coffee is a sensory experience. But online shopping isn’t.

For Onyx Coffee Lab, their online presence depended on how they could bridge the gap.

In a crowded category where coffee beans look the same and product differences live in aroma, taste, and texture, telling a story with words alone can only get you so far.

Onyx needed a digital experience that could carry the same obsession for the craft that shows up in their roasting without slowing down performance or conversion.

So they pushed the boundary: interactive 3D on the web, built with Spline, and shipped by a small team.

Coffee is a sensory experience. But online shopping isn’t.

For Onyx Coffee Lab, their online presence depended on how they could bridge the gap.

In a crowded category where coffee beans look the same and product differences live in aroma, taste, and texture, telling a story with words alone can only get you so far.

Onyx needed a digital experience that could carry the same obsession for the craft that shows up in their roasting without slowing down performance or conversion.

So they pushed the boundary: interactive 3D on the web, built with Spline, and shipped by a small team.

Scroll-based 3D experience for Onyx Coffee Lab's 2025 Advent

Brand differentiation without the senses

Coffee branding is notoriously hard online:

Most products are visually similar.
A light roast next to a dark roast still looks like coffee beans.
You’re selling food without smell or taste.
There’s no sensory feedback loop.

The market is saturated.
“Great coffee” isn’t a differentiator anymore.

Onyx’s site needed to do more than look good. It had to communicate fast. Otherwise, their target audience would quickly lose interest and leave.

Coffee branding is notoriously hard online:

Most products are visually similar.
A light roast next to a dark roast still looks like coffee beans.
You’re selling food without smell or taste.
There’s no sensory feedback loop.

The market is saturated.
“Great coffee” isn’t a differentiator anymore.

Onyx’s site needed to do more than look good. It had to communicate fast. Otherwise, their target audience would quickly lose interest and leave.

Turning craft into a visible brand signal

Michael Mahler, CTO at Onyx Coffee Lab, described two pillars that define the brand:

The freshest coffee possible
Coffee is roasted to order and shipped quickly. Often, 24-48 hours from roaster to doorstep.
Ethical sourcing that changes the incentives
Onyx pays producers 4-6x the commodity market price, building long-term relationships that create an essential feedback loop: producers want to sell Onyx their best lots, and communities benefit in the process.

That same mindset carries into their web experience.

Michael Mahler, CTO at Onyx Coffee Lab, described two pillars that define the brand:

The freshest coffee possible
Coffee is roasted to order and shipped quickly. Often, 24-48 hours from roaster to doorstep.
Ethical sourcing that changes the incentives
Onyx pays producers 4-6x the commodity market price, building long-term relationships that create an essential feedback loop: producers want to sell Onyx their best lots, and communities benefit in the process.

That same mindset carries into their web experience.

"Our slogan is ‘Never settle for good enough.’ It’s always: what can we do to improve, and that mentality never stops."

Michael Mahler

—

CTO at Onyx Coffee Lab

Onyx Coffee Lab's Circadian product page with an interactive 3D scene

Designing for prosumers

Onyx isn’t designing for everyone. They’re designing for people who care about details.

Michael calls them prosumers. Customers who notice when a brand cuts corners on the small stuff, and who expect cohesive digital experiences to reflect product quality.

This shaped a deliberate design approach where the site has to be immediately understandable but it also has to sit right on the edge of what’s “normal” for ecommerce.

Onyx found that differentiating edge in one place: 3D Design with Spline.

Onyx isn’t designing for everyone. They’re designing for people who care about details.

Michael calls them prosumers. Customers who notice when a brand cuts corners on the small stuff, and who expect cohesive digital experiences to reflect product quality.

This shaped a deliberate design approach where the site has to be immediately understandable but it also has to sit right on the edge of what’s “normal” for ecommerce.

Onyx found that differentiating edge in one place: 3D Design with Spline.

"We wanted to go find that line and ride it as close as we could… that line was 3D animation."

Michael Mahler

—

CTO at Onyx Coffee Lab

Details from Onyx Coffee Lab's Circadian product page

Shopify site harnessing Spline’s runtime

Onyx runs on Shopify, but their storefront experience is a fully custom frontend, pushing Shopify to it’s limit.

Instead of exporting models or relying on a dedicated integration, Onyx embeds Spline using Spline Viewer, and Spline's Code API to control scenes programmatically.

This lets them build interactive moments that behave like product features. Not just static visuals.

Onyx runs on Shopify, but their storefront experience is a fully custom frontend, pushing Shopify to it’s limit.

Instead of exporting models or relying on a dedicated integration, Onyx embeds Spline using Spline Viewer, and Spline's Code API to control scenes programmatically.

This lets them build interactive moments that behave like product features. Not just static visuals.

From storyboards to Spline interactions

Onyx’s 3D production flow is built for speed, alignment, and efficiency:

High-quality product renderings
Often delivered to design as cut-out PNGs.
Storyboarding
The design team “keyframes” the motion: what moves, when, and why.
Animating in Spline
The team recreates those storyboards as real interactive scenes.
Handoff to dev
Spline embeds land on the site, controlled through runtime logic.

Onyx’s 3D production flow is built for speed, alignment, and efficiency:

High-quality product renderings
Often delivered to design as cut-out PNGs.
Storyboarding
The design team “keyframes” the motion: what moves, when, and why.
Animating in Spline
The team recreates those storyboards as real interactive scenes.
Handoff to dev
Spline embeds land on the site, controlled through runtime logic.

State-based animation powered by variable changes

Using 3D to explain what customers don’t expect

Circadian isn’t a typical coffee product page.

Instead of standard coffee descriptors like ‘light vs. dark roast’ or ‘tasting notes,’ Circadian introduces variants based on caffeine levels and includes a calculator to help customers tailor intake across the day.

Onyx uses 3D visuals as an explainer system to help disseminate this information and make it more engaging:

The background introduces the concept visually
The scene responds to interaction
Clicking different variants triggers different motions in the Spline scene

“The different variants for us are literally how much caffeine is in the product. The asset in the background will move depending on which experience they’re looking at.”

And crucially, the Onyx team framed their interactive assets to stay out of the way when needed or become interactive front and center when needed. For example, when important text goes across the page, the lighting is lowered on the embedded 3D assets.

Circadian isn’t a typical coffee product page.

Onyx uses 3D visuals as an explainer system to help disseminate this information and make it more engaging:

The background introduces the concept visually
The scene responds to interaction
Clicking different variants triggers different motions in the Spline scene

“The different variants for us are literally how much caffeine is in the product. The asset in the background will move depending on which experience they’re looking at.”

Coffee levels explained with the help of an interactive 3D visualization

The biggest win: Time to deployment

For Onyx, the headline advantage isn’t just visual quality – it’s feasibility and speed for their team.

There are roughly 10 people touching site code and creative. Hiring dedicated 3D engineers and designers is a major commitment and expense for a coffee company.

Spline lowers the risk by compressing timelines and making 3D attainable for everyone.

For Onyx, the headline advantage isn’t just visual quality – it’s feasibility and speed for their team.

There are roughly 10 people touching site code and creative. Hiring dedicated 3D engineers and designers is a major commitment and expense for a coffee company.

Spline lowers the risk by compressing timelines and making 3D attainable for everyone.

"The biggest advantage is time to deployment… Spline lowers the risk it takes to start doing some of these things in 3D."

Michael Mahler

—

CTO at Onyx Coffee Lab

Get started with Spline

Onyx Coffee Lab didn’t adopt 3D to be flashy. They used it to solve a real ecommerce problem:

How do you make a sensory product feel real online without sacrificing speed, clarity, or conversion?

With Spline, they found a workflow that fits a small team, runs smoothly on mobile, and lets interactive storytelling ship fast allowing them to differentiate their brand in a crowded market.

Onyx Coffee Lab didn’t adopt 3D to be flashy. They used it to solve a real ecommerce problem:

How do you make a sensory product feel real online without sacrificing speed, clarity, or conversion?

With Spline, they found a workflow that fits a small team, runs smoothly on mobile, and lets interactive storytelling ship fast allowing them to differentiate their brand in a crowded market.

Contact Sales

–

spline.design