Le contexte
Création d'une expérience web immersive inspirée par la nature. EDEN est un jardin digital où chaque interaction est organique : particules 3D flottantes, smooth scroll naturel, grain cinématique et animations scroll-driven. Un projet vitrine qui repousse les limites du web créatif.
Le défi
Le défi était de combiner Three.js avec des animations GSAP complexes tout en maintenant des performances fluides. Les particules 3D devaient réagir au curseur, le scroll horizontal de la galerie devait être parfaitement synchronisé, et l'ensemble devait fonctionner aussi bien sur mobile que desktop.
La solution
Architecture Next.js 16 avec React Three Fiber pour les scènes 3D (pétales et pollen en particules), GSAP ScrollTrigger pour les animations liées au scroll, et Lenis pour un smooth scrolling naturel. Chaque composant est optimisé : particules réduites sur mobile, grain désactivé sur petits écrans, lazy loading des vidéos.
Le résultat
Une expérience web qui capture l'essence d'un jardin digital : vivante, organique et captivante. Les animations tournent à 60fps, le preloader crée une entrée cinématique, et le curseur personnalisé renforce l'immersion. Un projet qui démontre la maîtrise de la 3D web et des animations avancées.
Technologies
Fonctionnalités clés
- Particules 3D interactives (pétales + pollen)
- Smooth scrolling avec Lenis
- Galerie scroll horizontal avec parallax
- Curseur personnalisé magnétique
- Grain cinématique SVG animé
- Preloader immersif
Un projet similaire ?
Discutons de comment je peux vous aider à concrétiser votre idée.
Parlons de votre projet