Nexaly · portefeuille

Dix façons
d'ouvrir un site.

Chaque page est une scène 3D plein écran pilotée par le défilement, avec des textes dans les coins. Même socle, même structure : on choisit une idée, on copie son dossier, on remplace les textes.

Ordinateur et trackpad pour la version complète. Sur mobile, chaque scène a sa version allégée.

  1. 01L'objet qui s'assembleDes éclats de verre dispersés qui s'assemblent en un seul objet lumineux.De la dispersion à l'unité · Nexaly
  2. 02Le reliefUn territoire 3D survolé ; les villes s'allument et se relient.Service local · Les Pros de l'Yonne
  3. 03Le couloirUn tunnel d'anneaux lumineux ; chaque étape est une porte franchie.Parcours, méthode en étapes
  4. 04Les particulesVingt mille points qui se métamorphosent : nuage, sphère, anneau, grille.Données, IA, transformation
  5. 05Le filUne ligne lumineuse se trace ; la caméra la suit de jalon en jalon.Histoire, chronologie, parcours client
  6. 06La ville de cubesUn champ de cubes ondule comme une mer, puis se dresse en ville.Construction, croissance, bâtiment
  7. 07L'orbiteUne sphère centrale, des satellites ; la caméra s'approche de chacun.Offre à plusieurs volets
  8. 08La matièreUn shader plein écran, fluide, qui réagit au défilement et à la souris.Marque forte, ambiance avant discours
  9. 09Les calquesDes plans dans la profondeur, traversés par la caméra. Thème clair.Portfolio, galerie, catalogue
  10. 10Le réseauDes nœuds isolés qui se relient jusqu'à former un système vivant.Intégration, automatisation, partenaires

Et pour les sites classiques, premium, e-commerce ou SaaS

La bibliothèque de modèles Nexaly rassemble des gabarits vérifiés (licence, activité, démo) avec filtres par métier et catégorie, favoris, comparaison et fiche client qui produit une synthèse pour le devis. Ce portefeuille immersif y figure comme référence 3D.

Mode d'emploi

Structure commune

Un dossier par idée : index.html (les textes), scene.js (la mise en scène three.js), page.js et page.css (le branchement). Le socle src/commun/ gère le défilement (GSAP ScrollTrigger + Lenis), les étapes de texte, la boucle de rendu et le repli sans WebGL.

Pour réutiliser

Copier le dossier de l'idée et src/commun/ dans le projet cible, remplacer les textes, ajuster les réglages listés en bas de chaque page. La progression p (0 en haut, 1 en bas) pilote tout : caméra, formes, lumières.

Sous le capot

Vite 5, three.js 0.186, GSAP 3.15, Lenis 1.3. Rendu plein écran épinglé (position: sticky) pendant 4 à 5 écrans de défilement ; 30 images/s au repos, pleine cadence en mouvement, rien hors écran.