Terranova

Terranova est un concept de site Web pour un collectif fictif qui explore l’écologie par le son. Le point de départ : comment une interface peut-elle évoquer les signaux qui traversent un paysage avant d’expliquer les recherches qui s’y intéressent?

J’ai construit l’ouverture autour d’une forme organique translucide, d’une typographie fine et d’une palette gris-vert sobre. Un panneau de verre présente les dernières pistes de recherche, tandis que la navigation donne directement accès aux autres pages.

La forme centrale est calculée en temps réel avec Three.js. Sa surface irisée réagit à l’angle de vue et au mouvement du pointeur. Au défilement, elle s’efface et des particules se dispersent, reliant l’ouverture aux sections éditoriales qui suivent.

Les textes et les liens apparaissent par des changements d’opacité et de courts déplacements verticaux liés à la position de défilement. Le mouvement s’inverse quand on remonte. Le défilement natif reste compatible avec la molette, le toucher et le clavier; la préférence système de mouvement réduit désactive ces apparitions animées.

L’accueil mène aux pages About, Research, Projects, Journal et Contact. Les filtres de recherche distinguent les études de terrain des méthodes, des sections dépliables précisent chaque piste et deux articles offrent un format de lecture plus long.

Un carnet de terrain téléchargeable et un court exercice sonore synthétisé prolongent l’interaction au-delà de l’animation d’ouverture. Le formulaire de contact valide le message et prépare un brouillon que le visiteur peut réviser puis envoyer depuis son application de courriel.

La première version animée effectuait trop de calculs : elle copiait toute la scène 3D dans un second canvas et appliquait un grand filtre de verre à chaque image. J’ai remplacé ce traitement par un seul canvas et un effet de verre limité au panneau de recherche.

La scène révisée limite sa résolution, allège la géométrie et les particules, et réduit sa fréquence d’animation au repos. Le rendu s’arrête lorsque l’introduction sort de l’écran, que le menu est ouvert ou que l’onglet est masqué. Les apparitions du contenu utilisent l’opacité et les transformations, avec des mesures de mise en page conservées entre les changements.