To unbind our creativity we needed something more than CSS and JS. On the front end, we used React with the PixiJS and three.js libraries. The back end and CMS are based on Prismic. That allowed us to develop animations that cannot be created with conventional technologies. Shaders written with GLSL relocate calculations from CPU to GPU. That helps maintain high performance when it comes to rendering multiple complex animations simultaneously.

We worked through many combinations of animations and interactions to find a balance that worked for us. When brainstorming we have realized that none of the references were a perfect fit for an authentic look of the site. So we wrote custom solutions for a vast majority of animations and interactions ourselves.

Running this amount of complex animations smoothly on any device, be it an old laptop or a smartphone, was a challenging task. The usage of shaders improved performance significantly. Combining optimization’s best practices with revising chunks of the project until there is no excess code resulted in further performance improvements. This way we made the site work at 60 FPS on most devices without compromising the visual aesthetics.