Interactive Digital Christmas Card

Client

Kipling

Kipling

Year

2024

2024

Sector

Marketing

Marketing

The Challenge

As part of an innovative campaign, Kipling brings its iconic monkeys back into the spotlight! For the 2024 holiday season, Glitchi, the creative studio within Buzzworks, received a special assignment: creating an interactive digital Christmas card where customers can have their personal message playfully delivered by Kipling monkeys.

The project came with three core requirements: the card had to work perfectly on all devices (with special attention to mobile devices), the personalized text had to integrate seamlessly into the video, and the entire experience had to run smoothly in the browser without server support.

An Innovative Technical Solution

Our creative studio Glitchi enthusiastically got to work and developed an advanced web solution in just two weeks. By cleverly combining video and real-time 3D technology, we created a unique interactive experience.

A look at the technology, for the enthusiasts:

  • Video-first approach: By using video, we could offer high-quality animation that ran seamlessly on both high-end and low-end devices.

  • Mapping on the 3D scene: Using Three.js, a simplified version of the 3D scene was loaded in the browser. This provided us with the necessary information to track:

  • Animation data

  • Bounding boxes and real-time positions and rotations of text cards

  • Mesh data of monkeys and text cards as foreground objects

  • Frame-perfect synchronization: The video and 3D animation timeline was synchronized in real-time, ensuring the text always moves perfectly in place.

  • Depth masking: Foreground objects were rendered in the 'depth buffer'. This allowed dynamic text to correctly disappear behind objects, despite being in different layers.

Our creative studio Glitchi enthusiastically got to work and developed an advanced web solution in just two weeks. By cleverly combining video and real-time 3D technology, we created a unique interactive experience.

A look at the technology, for the enthusiasts:

  • Video-first approach: By using video, we could offer high-quality animation that ran seamlessly on both high-end and low-end devices.

  • Mapping on the 3D scene: Using Three.js, a simplified version of the 3D scene was loaded in the browser. This provided us with the necessary information to track:

  • Animation data

  • Bounding boxes and real-time positions and rotations of text cards

  • Mesh data of monkeys and text cards as foreground objects

  • Frame-perfect synchronization: The video and 3D animation timeline was synchronized in real-time, ensuring the text always moves perfectly in place.

  • Depth masking: Foreground objects were rendered in the 'depth buffer'. This allowed dynamic text to correctly disappear behind objects, despite being in different layers.

When we first conceived this idea, we had no idea if we could execute it. It was fantastic to see how the people from AppFoundry and Glitchi quickly found a solution with so much creativity and technical precision, and flexibly handled the timeline. They truly considered every detail to make this possible!

Nathalie Muylle

Kipling Marketing Manager EMEA

The Result

As we are a company rooted in Belgium’s Antwerp, we are especially proud to have realized this collaboration with Kipling, which was also originally founded here.

Thanks to the dedication of our digital experts and the particularly pleasant collaboration with Kipling, we were able to produce a creative product with the following strengths:

  • Accessibility: A web solution that works on every device, from desktop to mobile.

  • Technical precision: Real-time animations that synchronize frame-perfectly with video.

  • Cost savings: Kipling can easily reuse the solution for future campaigns with minimal adjustments.

  • Scalability: Even under high traffic, the solution remains fast and affordable due to very low operational costs (all work happens in the browser).

As we are a company rooted in Belgium’s Antwerp, we are especially proud to have realized this collaboration with Kipling, which was also originally founded here.

Thanks to the dedication of our digital experts and the particularly pleasant collaboration with Kipling, we were able to produce a creative product with the following strengths:

  • Accessibility: A web solution that works on every device, from desktop to mobile.

  • Technical precision: Real-time animations that synchronize frame-perfectly with video.

  • Cost savings: Kipling can easily reuse the solution for future campaigns with minimal adjustments.

  • Scalability: Even under high traffic, the solution remains fast and affordable due to very low operational costs (all work happens in the browser).

Looking Ahead

The success of this collaboration has paved the way for new joint projects between Kipling and Buzzworks / Glitchi. The first ideas are already being sketched out.

Moreover, the developed technology offers interesting possibilities for more advanced applications. We can not only bring text to life but also animate entire 3D elements in real-time within a video, thereby mixing standard video and immersive 3D into one seamless experience.

Interested in creating similar digital experiences? Contact us at hello@buzzworks.be and discover how we can make your digital ambitions a reality.

Get in touch

Other work

text
Tomorrowland

Amare Social Media Experience

text
Glitchi

Pukkelpop Demo

text
Buzzworks

E-Commerce Demo

text
Tomorrowland

Amare Social Media Experience

text
Glitchi

Pukkelpop Demo

text
Buzzworks

E-Commerce Demo

text
Buzzworks

De Mol Poll

text
Tomorrowland

Amare Social Media Experience

text
Glitchi

Pukkelpop Demo

text
Buzzworks

E-Commerce Demo