Winter Tidings

We decided to build a winter treat to expand our collective knowledge, pushing our current skill-set and releasing a little festivity into the world. We present Winter Tidings.

Creating a magical winter experience

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

The Idea

Winter Tidings was born of an experimental culture within the Staak studio. From hackathons, creative all-nighters to sandbox builds we like to nurture an environment of 'why not'? In this case focusing on pushing what was possible in an immersive, mobile WebGL experience. The heart of our concept was a message sending service. We wanted to encourage a warm exchange of feelings in the cold winter months.

Doing our homework

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.

We catalogued inspirational sources, from 19th Century fairy tales to festive TV favourites to promote a familiar and nostalgic quality within the story-telling.

Initial exploration saw us gather sketches and moodboards before realising concepts in 3D software and converting into WebGL.

Starting with a single flake

We soon decided the vehicle of our project would be the humble yet magical snowflake. Early in the project, we decided it was important that every user was generated a completely unique snowflake, after all no two are the same. This would be influenced by the user’s interaction with the service. The content and length of the message directly would influence the appearance.

What do you do when you’ve created something beautiful? You figure out how to blow it up of course. Or smash it to smithereens at least. Our concept was to make the message itself disintegrate into particles and these would, in turn, reform into the snowflake.

Having identified these two mechanics, we then ventured into building the environment.

Setting the scene

As this was 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.

Production values

With some of the stars in our cast now playing their part we moved on to the practicalities of moving through our scene. A series of models were imported from Blender into ThreeJS, a 3D world to be explored virtually.

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.

Gift wrapped

With most of our magical world built, we allowed ourselves to dream about the 'window dressing'. To underline our festive gift ethos, we opted for a custom logo lock-up built of ribbon-like caligraphy.

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.

Gestures

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.

Happy Christmas message written on mobile device screen

Intro screen shown to Winter Tidings shown on mobile

Example of gestures used in Winter Tidings experience

Example of Winter Tidings on multiple mobile devices

The outcome

Released one week before Christmas, we had no idea how our fledgling chick would fly. Thankfully, we got a great response with hundreds of users a day making and sharing a snowflake with a friend or loved-one and picked up some great industry nods for our efforts too: