Comment nous avons construit le site d’Aria Design

Notre site est notre première carte de visite. Nous ne voulions pas qu’on le lise seulement : nous voulions qu’on le traverse. Voici comment il est fait.

Une page qui se déroule comme un film

Le site s’ouvre sur un œil vert. Ensuite, chaque mouvement de la molette ou du doigt avance l’histoire d’un pas : les scènes s’enchaînent dans un seul plan, sans changement de page.

Un anneau de projets

Nos réalisations tournent sur un anneau de cartes. Toucher la carte de face l’enfonce légèrement, comme une touche de clavier, puis un halo se pose sur son contour et le projet s’ouvre.

Un globe d’écrans

En continuant, l’anneau se referme en une sphère couverte des écrans de nos sites. Nous avons essayé des dizaines de transitions avant de garder celle-ci : un seul glissement, sans à-coup, où le globe se forme d’un bloc.

Un A tissé de lumière

Le A du studio est fait de milliers de points de lumière de toutes les couleurs. Il flotte dans le noir et se balance doucement, pendant que nos métiers s’affichent dessous.

Les outils

La 3D est dessinée en temps réel avec Three.js. GSAP et ScrollTrigger lient chaque scène au défilement, Lenis le rend fluide, et la Terre de la page contact tourne grâce à cobe.

Tenir sur un téléphone

Une scène 3D coûte cher à un téléphone. Sur écran tactile, nous baissons la résolution des scènes les plus lourdes, la mer et les étoiles se dessinent à tour de rôle, et la Terre reste une image tant que la page défile : elle ne s’anime qu’une fois la page arrêtée.

Lisible par Google

Une expérience en 3D se lit mal par les moteurs de recherche. Le site écrit donc aussi son texte en clair : l’accueil le contient avant même que la 3D se charge, et chaque projet, chaque métier et chaque article de ce journal a sa propre page simple. Nous détaillons la méthode ici.