Savor is reimagining how we produce functional and versatile fats. With 30% of global emissions stemming from food production and a quarter of that tied to fats and oils, Savor is taking responsibility for decarbonising this essential macronutrient.

Our challenge was to translate this complex, category-defining innovation into a digital platform that could serve multiple audiences while establishing Savor as the trusted leader in a new food category.

Design Direction

Our approach centred on creating a living digital ecosystem that could grow with the brand. With gorgeous macro photography, elegant typographic treatments, and seamless motion design, we crafted a visual language that was firmly grounded in warmth and richness.

The design system celebrates the sensory pleasure of food while quietly transforming expectations about its production. By emphasising the emotional connection people have to food, we created space for audiences to reimagine its future.

Through intuitive navigation, intelligent content design, and adaptive storytelling, we crafted a story that bridges science and sensory experience to celebrate Savor’s process.

“By emphasising the emotional connection people have to food, we created space for them to reimagine its future.”

Dev Tales - Woo-oo!

Scroll-controlled diagrams

To bring Savor’s story to life, we used a hybrid motion architecture combining GSAP, Rive, and WebGL. These scroll-controlled diagrams were central to the storytelling experience.

This was our first time using text and images inside Rive. After some initial prototyping confirmed Rive’s text and line rendering were accurate, we used it for most of the diagrams on the site. Developers handled scroll synchronisation and parallax matching, while motion designers had full creative control over the animation content, a workflow that dramatically increased the build efficiency.

The Un-Melting Logo

The logo reveal, used in both the footer and the mobile menu, is one of our favourite details. The goal was to make the logo look like butter melting in reverse. I guess that’s technically congealing, but that doesn’t sound quite as mouthwatering.

To achieve this, we explored several approaches:

• CSS Filters: Using a gradient mask with brightness and contrast animation. It worked conceptually, but in practice caused distortion and poor performance.
• Rive SVG Animation: Seemed promising, but we didn’t manage to find an approach that allowed us to maintain a smooth and sharp logo.
• WebGL: The final solve. Through the good times and the bad, we can always rely on our trusty ol’ mate, WebGL. Using a Signed Distance Field version of the logo, we were able to transition back and forth between the states within the fragment shader. It was the only approach that gave us both performance and quality we needed.

The Bubble Transition

The bubble transition is a scroll effect that was meant to represent… well, a bubble.

We first attempted to achieve this in Rive, but we found that the more pixels being drawn within the Rive canvas, the worse the performance. So, once again, we turned to WebGL, but we quickly ran into multiple context issues. As this is a CMS-driven site, the page component numbers needed to be dynamic. Some of these components require WebGL rendering, and that meant the client could run into problems with WebGL contexts piling up.

Our solution was to rebuild the effect using TWGL.js, a lightweight WebGL library, allowing us to control the bubble shape with precision while maintaining hardware acceleration. Visually, the effect was simple: two Bézier curves forming an organic wipe between sections. Though the shader itself was straightforward, the real challenge lay in the architecture around it—synchronising timing, scroll states, and z-depth layering across a single shared WebGL context.

The result is a transition that feels fluid and tactile while maintaining top-tier performance across devices.

Tools

• GSAP: Core scroll-based animation engine.
• Rive: Used for most motion storytelling components and scroll diagrams.
• TWGL.js: For custom WebGL effects and transitions.
• Lenis: Smooth scrolling and precise motion synchronisation.
• Headless CMS: For modular, scalable content control.
• WebGL Layer System: Custom solution to manage GPU contexts dynamically.

Company Info

Resn is the world’s friendliest evil corporation. We work in tireless pursuit of our fiendish goal to bring joy to millions. Since 2004, Resn has plotted and schemed to become a leader in the field of interactive development and design. We are in cahoots with some of the world’s best-known brands and agencies and we will stop at nothing to bring a smile to your face. Vile scum.