Pour le site de TRANSVIR, nous sommes partis d'un élément central de leur identité visuelle : l'ADN présent dans leur logo. L'objectif était de lui donner une nouvelle dimension à travers le WebGL, en créant une structure 3D composée de milliers de particules, capable de prendre vie et de réagir aux interactions de l'utilisateur.

Premières expérimentations : construire l'ADN à partir de particules.
La première étape a consisté à explorer la génération d'une double hélice à partir de milliers de points dans l'espace 3D.
L'idée était de retrouver une forme d'ADN reconnaissable tout en conservant un aspect organique et vivant, grâce à la répartition et au mouvement des particules.
Ces premiers tests nous ont permis d'expérimenter différents paramètres : le nombre de particules, leur répartition, les proportions de l'hélice, sa rotation et les variations de mouvement.
L'enjeu était de trouver le bon équilibre entre une structure suffisamment précise pour être identifiable et une certaine liberté dans le comportement des particules.

Créer un environnement autour de l'ADN.
Une fois les bons réglages trouvés pour la structure de l'ADN, nous avons réfléchi à la manière de l'intégrer dans un environnement visuel cohérent avec l'identité du client.
Nous avons d'abord introduit les couleurs de TRANSVIR, notamment à travers un dégradé de vert en arrière-plan, afin d'apporter davantage de profondeur et de dynamisme à la scène.
Nous avons ensuite ajouté un second système de particules, cette fois atmosphériques, animées de mouvements subtils dans l'espace 3D.
L'objectif était de dépasser la simple représentation d'un ADN isolé pour créer un environnement plus vivant et immersif, dans lequel les différents éléments visuels cohabitent naturellement.
Ce travail sur l'atmosphère nous a permis de renforcer la sensation de profondeur tout en conservant l'ADN comme élément central de la composition.

De l'expérimentation à l'interaction.
Une fois cet univers visuel établi, nous avons travaillé sur la manière de l'intégrer dans l'expérience du site.
Sur la page d'accueil, une animation d'introduction révèle progressivement la structure, avant de laisser place à une interaction à la souris qui apporte de la profondeur et de la réactivité.
Sur la page À propos, nous avons exploré une autre approche : utiliser le scroll pour piloter l'animation et faire évoluer l'ADN au rythme de la navigation.
Tout au long du développement, le défi a été de conserver des animations fluides et réactives malgré le nombre important de particules affichées, tout en assurant une cohérence visuelle entre les différentes interactions.
Au-delà de l'aspect technique, cette exploration nous a permis de prolonger l'identité graphique de TRANSVIR dans une expérience interactive, où le mouvement devient une véritable composante du design.