Responses by Cetrucflotte.

Background: Cetrucflotte is a French design collective navigating through the current of the digital world beneath the skies of independent publishing, keeping our sights on off-beat projects. More than an agency or a studio, we are a group of independents united by our passions, which makes us different to companies that may function with more constraints and objectives. The new website showcases our main projects alongside recent experimentations, while simultaneously expressing our shared interests and values as a collective and opening the door to potential collaborations. Our target audience is art junkies, photography lovers, those who seek exploration and documentation projects, storytellers, and generally explorers of all kinds.

Design core: The style of our website is based around the concepts of flotation and fluidity, which stems from our name (ce truc flotte is “this thing floats” in English.) This is also reflected through touches of maritime themes—cartography, vocabulary, colors and interactions—throughout the site.

The key features of the site are the interactive WebGL and Canvas elements, such as the waves on the homepage and lava blobs on the experimentations page. These generative art components highlight the collective’s explorative nature; they’re also surrounded by other microinteractions, scrolling effects and transitions.

New lessons: We learned a lot about improving performance when it comes to interactive elements. This was achieved by using GPU rendering techniques, rendering Canvases only when visible and triggering animations only when they’re in the viewport, among other techniques. We also discovered ray marching for playing with the fusion of shapes in a more performant approach, therefore understanding more about the process and limitations to optimize in a less demanding way.

And as you may know, when multiple designers all work on the same project, it can get tricky. However, we established a good synergy together.

Special navigation features: There is a hidden Easter egg link on the homepage that takes the user to an exquisite corpse. They can contribute to an infinite story by replying to the latest image with a submission of their own.

Technology: The website is built on Svelte, HTML5, SCSS and JavaScript. Generative art elements are produced with native WebGL and Canvas made by interactive designer and artist Julien Espagnon. Animations and transitions are managed with built-in Svelte transitions and functions using Anime.js. The content is managed with Directus, an API-driven and open-source headless CMS. The site is hosted on Vercel with server-side rendering.