This is the second year in a row that we made an interactive Xmas card to share with our clients and friends.
This post shares some of the design process and the techniques used to create this year’s experience.
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:
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 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.
Under the hood
After deciding on how our Santa should look, we got down to business and did some 3D sculpting 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.
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.
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.