Nexaly · portefeuille

Dix façons
d'ouvrir un site.

Chaque page est un site complet : une scène 3D plein écran pilotée par le défilement, puis une vraie marque (réelle ou fictive) avec ses polices, sa palette, ses offres, ses avis, ses tarifs et son formulaire. 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.Nexaly, agence numérique
  2. 02Le reliefUn territoire 3D survolé ; les villes s'allument et se relient.Les Pros de l’Yonne, annuaire d’artisans
  3. 03Le couloirUn tunnel d'anneaux lumineux ; chaque étape est une porte franchie.Trois Portes, cabinet de conseil
  4. 04Les particulesVingt mille points qui se métamorphosent : nuage, sphère, anneau, grille.Granule, outil d’IA sur vos données
  5. 05Le filUne ligne lumineuse se trace ; la caméra la suit de jalon en jalon.HD Rénovation, artisan dallage et pierre
  6. 06La ville de cubesUn champ de cubes ondule comme une mer, puis se dresse en ville.Bâti Morvan, constructeur de maisons
  7. 07L'orbiteUne sphère centrale, des satellites ; la caméra s'approche de chacun.Noyau, suite logicielle pour artisans
  8. 08La matièreUn shader plein écran, fluide, qui réagit au défilement et à la souris.Maison Orage, studio de création
  9. 09Les calquesDes plans dans la profondeur, traversés par la caméra. Thème clair.Calque, studio web et identité
  10. 10Le réseauDes nœuds isolés qui se relient jusqu'à former un système vivant.Relia, intégration et automatisation

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.