Client

Zepto

In Collaboration With
Services Provided
3D Backgrounds powered by Plinthos
Delivered
03 / 2025

Brief

Oliver Grace, a strategic creative studio, engaged with Plinth Digital to explore the idea of integrating dynamic 3D backgrounds into Zepto's existing website.

Project Background

Oliver Grace had created a bold brand identity for Zepto, and designed a website featuring "Zeppy" - a new brand mascot. Zeppy and other space-themed brand motifs were shown in the background of the website using short video vignettes. The video progress was bound to the scroll position of the page.

The effect was a visually striking blend of brand and narrative with a pace set by the user. Unfortunately some browsers on some devices present performance issues when using video in this way and a rethink was needed to ensure sufficiently broad device compatibility.

Requirements

  • Create a solution that's compatible with the existing website
  • Remove reliance on the videos while retaining the look and feel
  • Reduce inital download overhead
  • Decrease load time
Videos from the original site

Our Approach

In order to maintain the look and feel of the existing site, we created three Shots in Plinthos to match the key storyboard scenes from the original videos using image assets provided by Oliver Grace:

Zeppy Hero
Zeppy Hero
Zeppy Hero

The resulting shots are a blend of 2D elements presented in 3D space (e.g., Zeppy), and 3D models (e.g., the planets) rendered in a style that matches the original videos (e.g., the planets). The camera angle was also bound to mouse movement / device tilt to create a more immersive sense of depth through subtle parallax.

Implementation

Shot Refinement

Oliver Grace's designers refined the Shots using the Plithos Studio ensuring that the framing and motifs aligned perfectly with their page designs at all resolutions and breakpoints.

Low-code Integration

Plinth Digital configured a Plinthos Snippet for Oliver Grace to add to the site's code. One line of HTML is all that is needed to add the 3D content into the background of the site, manage simple interactions (e.g., parallax) and handle efficient lazy-loading of assets.

Once the Snippet was added, the Shots could be matched to the page sections using our simple HTML API. One tag attribute is all that's needed to change the shot when that tag is in view. Additional attributes were used to darken the Shot for improved contrast with the text.

Results

We did what we set out to do:
  • Delivered a solution that could be easily plugged into the existing site
  • Maintained the look and feel of the video content from the previous version of the site
  • Decreased the download and load time of the page
Plus the 3D scenes have the added bonus of maintaining their sense of depth and movement even while the page is not scrolling.

This project was a great showcase for the blending of 2D assets with 3D space and we loved bringing it to life with the talented team at Oliver Grace.

Get in touch

Let's have a conversation about what you can display on your Plinth

or submit your inquiry below
Thank you - we'll get back to you as soon as possible.
Attribution