Le contexte
Création d'une expérience web immersive qui emmène l'utilisateur dans une plongée verticale à travers les zones océaniques — de la surface jusqu'aux fosses hadales à 6 000m+. Chaque profondeur raconte une histoire, chaque scroll révèle de nouvelles créatures et phénomènes lumineux.
Le défi
Le défi était de simuler une vraie sensation de plongée sous-marine dans le navigateur : caustics réalistes, brouillard volumétrique progressif, particules de neige marine, bulles, bioluminescence, et un léviathan qui se révèle dans les profondeurs. Le tout devait rester fluide malgré la superposition de 14+ couches d'effets visuels.
La solution
Architecture multicouche avec React Three Fiber pour la scène 3D (particules, créatures), des effets CSS/Canvas superposés (caustics, brouillard volumétrique, rayons de lumière, grain cinématique), et des distorsions SVG dynamiques liées au scroll. Chaque effet s'adapte à la profondeur : les caustics s'estompent, les couleurs virent du bleu au noir, les particules bioluminescentes apparaissent.
Le résultat
Une expérience cinématique qui capture le vertige de la descente dans l'inconnu. L'aberration chromatique, le letterboxing progressif, la lampe torche suivant le curseur et le tremblement de caméra créent une immersion totale. Le scroll raconte une histoire scientifique et poétique sur les zones océaniques.
Technologies
Fonctionnalités clés
- Scène 3D temps réel (particules, créatures)
- Caustics et brouillard volumétrique
- Bioluminescence et neige marine
- Distorsion aquatique SVG dynamique
- Lampe torche interactive (curseur)
- Aberration chromatique progressive
Un projet similaire ?
Discutons de comment je peux vous aider à concrétiser votre idée.
Parlons de votre projet