Winter Tidings

A winter treat to expand our collective knowledge, pushing our current skill-set and release a little festivity into the world.

Staak (Internal)

Project Overview

Born from one of Staak's many internally initiated project workshops, aimed to explore new tech, develop new skills and push the boundaries of what is possible, Winter Tidings was born.

At its core, a heartfelt message sending service, encouraging a warm exchange of feelings and spreading a little delight and cheer. From a production point of view it was an a fun excuse to expand our webGL working knowledge, fine tune the asset creation pipeline explore mobile performance.

Exploring an aesthetic style and colour palette which would lend a sense of magic and wonder was key to discovering the tone of our project.

The vehicle of our project would be the humble yet magical snowflake. It was important that every user was generated a completely unique snowflake. This would be influenced by the user’s interaction with the service. The content and length of the message directly would influence the appearance. Our concept was to make the message itself disintegrate into particles and these would, in turn, reform into the snowflake.

Our experience was to take place a magical forest, we wanted to create an 'other-worldly' aspect. Our designers constructed a sky-box on which plains of the northern lights and similar dramatic skies were stitched. When this covered the scene we had a much more rounded world that was also reflecting our chosen colour palette. This would later become a 'sky-cylinder' for a higher quality representation and smoother render.

Focusing on the practicalities of moving through our scene, a series of models were imported from Blender into ThreeJS, a 3D world to be explored virtually and placed dynamically in position each time to add further uniqueness to each user's experience.

Here we created a path for a camera to lead a viewer 'on-rails' which would blend harmoniously with the introductory animation and in doing so, show a full rotation of the forest.

We wanted to emulate the sensations of gift-giving within the experience. Every special message would need to be unwrapped with gestures and user input.

It was a key goal to engage a sender’s senses from the start and keep that interaction throughout. In a digital experience it was also important to provide a tactile nature. By incorporating touch and device motion API’s we would ask visitors to summon the spirits with on-screen gesturing before creating the snowflake itself. Both offer captivating stages to provide a sense of reward.

You can read our full in depth technical write of Winter Tidings below:


Tech stack

  • Express
  • GSAP
  • Heroku
  • Node
  • Puppeteer
  • Three.js
  • Vue
  • WebGL