Sneaky Santa — behind the scenes

This is the second year in a row that we made an interactive Xmas card to share with our clients and friends.

Last year, we created a WebVR globe full of seasonal goodies. This year, we gave you Sneaky Santa — a fun little 3D toy built using physics simulation and fuzzy meshes.

This post shares some of the design process and the techniques used to create this year’s experience.

Inspiration

What started as a technical Friday hack was turned into a playful experience by the 14islands team. The initial idea came from a Christmas decoration I found in a drawer:

I had recently looked at cannon.js for another project and got inspired to combine a couple of their demos to achieve something similar:

• http://schteppe.github.io/cannon.js/demos/ragdoll.html
• http://schteppe.github.io/cannon.js/examples/threejs_mousepick.html
• http://schteppe.github.io/cannon.js/demos/spring.html

By chance, I remembered the awesome Fuzzy Mesh created by Szenia Zadvornykh that I had bookmarked a year earlier and added it to the mix. After a lot of tweaking (because Three.js changes with every version 😩) I managed to pull this together as a first version:

The first version of Sneaky Santa

The team wasted no time and managed to break it immediately…

Storyline & concept design

We got together as a team to brainstorm a few concepts. To make it more fun and addictive, we played around with the possibility of shaking gifts from his beard, and that’s how we came up with the Sneaky Santa storyline.

Santa iterations

Early sketches of the flow

Color theme explorations

Under the hood

After deciding on how our Santa should look, we got down to business and did some 3D sculpting in Cinema 4D.

3D modeling in Cinema 4D

This model was later split into individual meshes for each body part and mapped to the cannon.js skeleton. The fuzzy mesh was customized and used to replace the solid beard from the 3D model.

Physics debugging and body part mapping.

Shaking the Santa — final scene.

Sound Effects

Good sound adds a whole new dimension for interactive experiences. However, it’s a bit of a balancing act to not make visitors turn off the sound as soon as the page loads. We decided to skip the background music this year and only focus on sound FX during gameplay.

Unfortunately, we didn’t have time to record our own sounds. We used some good free samples and post-processed the sounds a bit to even out the volume and pitch.

Searching for free sounds online is an art in itself:

A team effort

Even simple ideas take a lot of time to execute well. To make it in time for Christmas, the whole team pitched in to make it awesome.

We used After Effects and the Lottie plugin to export SVG animations for the UI. The loading animation was one of the project’s highlights.

SVG animations

Most transitions and the light snowfall on the final screen were done using GSAP and CSS Animations.

Jamais deux sans trois

Time will tell if we make this into a tradition. As the French saying goes, if it happened twice, it will probably happen again.

We had the pleasure of receiving a few awards for this project:

• FWA of the day— 26 Dec 2018
• CSS Design Awards — Website of the day 2018 Dec 24
• CSS Design Awards — Best UI Design, Best UX Design and Best Innovation
• Awwwards — Honorable Mention
• Awwwards — Mobile Excellence

Thanks for reading!

Do you like this post? Sign up to our newsletter about creative designs and cutting edge technologies.