toujoursjaune.com / Developed at Staak
Tools & Skills:
Vue.js, Node.js, Express, WebGL / three.js, GSAP, Puppeteer
About the project:
With the majority of the studio having an interest in cycling it seemed fitting to conjure up a project revolving around the iconic theme of The Tour de France.
Our idea was to create an interactive experience in which cycling fans could learn about the rich history of the event in a unique and entertaining framework. Some of the past winners have since been disgraced for drug use and we designed this to be part of the game mechanic!
Exploring WebGL (specifically three.js) and user interaction became the focus point of the project. Concepts were discussed and an idea came to fruition - morphing the famous yellow jersey of the Tour into one of the past winners combined with a ‘stick or twist’ game format.
Models which were exported from various modelling applications (Blender, C4D) which shaped the workflow from design to development.
Animations and audio were combined to bring the showcase to life and make a rounded ‘game’ experience...
The transformation of the yellow jersey into that of past winners was done by animating vertex positions from our 3D models resulting in a series of beautiful low-poly portraits. Easing and other animation effects combined to create a dynamic, fluid visual result.
Simulating lighting and shadows was achieved using various optimised techniques. For example, matcaps can simulate lighting to create beautiful visuals without impacting performance. Users can play on both desktop and mobile devices, allowing a broad range of interaction and ‘shareability’.
When a user posts their score to social media, a bespoke share asset is dynamically generated based on user score and a random rider image. This was possible with a bespoke API and utilising the features of Puppeteer.
WebGL and UI elements combine to create a stunning visual piece to celebrate (and disgrace) winners of the Tour de France.
Vive le tour!
Toujours Jaune.
The coveted yelow jersey is the trigger to play the game. After a period of inactivity the jersey ;bounces' to draw attention until ultimately clicked on.
On mouse hover the yellow jersey begins to separate into particles. The explosion into particles doesn't fully animate until after a user click.
The exploded particles of the yellow jersey transform magically into an illustrated version of a past Tour winner. Stats from the winning year and a short bio of the winner animate into position.
The disgraced winners of the Tour cause a 'game-over' state, ending your run of Tourjours Jaune.