Toujours Jaune

Keen to further develop our WebGL skills internally and because of our combined love of cycling, Tourjours Jaune was born as our little homage to the winners (and more infamous losers) of the Tour de France.

The premise, an interactive 3D yellow shirt (the symbolic masthead of the Tour de France) that, when clicked, morphed into over 20 uniquely 3D crafted portraits of some of the greatest riders in the last 70 years. Throw in some little known stats, a few insightful notes then see how far you could stay in yellow until you hit a ‘Sacré Bleu’ - or in our case, a disqualified rider from the user of banned substances.

Using a combination of WebGL, Three.js, Vue.js, GLSL shaders and GSAP we crafted the primary mechanic of our site that would allow us to morph between our yellow shirt and a randomly selected riders portrait. Through a dynamic animation pass we interpolate the vertex positions of the shirt to the vertex positions of the riders portrait, easing and other animation effects combined to create a dynamic, fluid visual result.

We employed optimised techniques, such as matcaps, for simulating lighting and shadows, ensuring visually stunning effects without compromising performance. Users can seamlessly play on desktop and mobile devices, enhancing interaction and shareability. A unique share asset, dynamically generated using a bespoke API and Puppeteer, accompanies users' social media posts showcasing their scores and a random rider image.

The visual celebration (and occasional disgrace) of Tour de France winners was achieved through the synergy of WebGL and UI elements.