Combining their know-how and expertise with their passion for cocktail science, a team of determined bartenders created a line of premium artisanal beverages having bartenders in mind. In less than three years of operation Three Cents are leading the market of premium soda mixers and have already established a distribution network throughout the world.

Always supporting new visions, inspiration and talent, Mozaik undertook the creation and development of the Three Cents website. Inspired by the inventive character and the pioneering spirit of the Three Cents team, Mozaik envisioned a new cool and brisk online presence so as to properly introduce the Three Cents brand and products to the digital world.

Based on a story telling concept, the brand new website of Three Cents tells the story of carbonation and soda making, taking browsers on an invigorating journey from the inception to the implementation of the Three Cents products.

The story begins from the homepage with the animated journey of the bubbles that is brilliantly illustrated with a series of vintage sketches introducing visitors to the soda making industry. As the story unfolds through animation, the website breathes its way to the modern era.

The pale color coding of the website is inspired by the vintage labels of the Three Cents bottles and in contrast with the bold yet fresh images reflecting the company’s logo evokes the sprightful and original character of the Three Cents brand.

The animations and twists between sketches and images along with the parallax scrolling add a sharp bar-like look and feel to the atmosphere that is stylishly enhanced with the bubbling effects, the beautiful color images of the ingredients and the H2O environment while at the same time conveying the scientific know-how, the outstanding creativity and bartending field of expertise of the Three Cents.

Developing for the bubbles…

The biggest challenge we faced during the development of the Three Cents website, was the narrative homepage. Unique illustrations were created, combined in a great web design. Trying to bring that to life, we decided to go with the use of frame by frame animations enriched with user-controlled effects. Once again Mozaik’s development team was pumped to experiment. Using pixi.js, an advanced 2D JavaScript animation framework, with WebGL techniques, where applicable, and a canvas fallback, we managed to bring the bubbles of Three Cents beverages to life

Having a strong narrative homepage did not put us at rest when developing the rest of the pages. CSS animations, parallax effects, styled maps with custom bubbly animations are present throughout the website. All that, wrapped in a responsive code that transfers the fruity bubble effect in all devices and screen sizes.

That said, we welcome you to discover the secrets of soda making by following the journey of Three Cents to the creation of the Three Cents line of Artisanal Beverages and Premium Soda Mixers.

Check the new website of Three Cents here: www.threecents.gr