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 porteurs de problèmes s'assemblent en un système, puis s'ouvrent en quatre leviers.Nexaly, agence numérique
  2. 02Le reliefLe vrai relief de l'Yonne ; 312 artisans s'allument, une demande rejoint les trois plus proches.Les Pros de l’Yonne, annuaire d’artisans
  3. 03Le couloirUn couloir de béton et trois vraies portes qui s'ouvrent devant la caméra.Trois Portes, cabinet de conseil
  4. 04Les particulesCinq sources nommées, rassemblées, structurées en table, puis le logo.Granule, outil d’IA sur vos données
  5. 05Le filUn cordeau lumineux de la visite à la réception, avec un vrai devis en jalon.HD Rénovation, artisan dallage et pierre
  6. 06La ville de cubesUn champ de blocs se nivelle, puis une maison se monte bloc par bloc.Bâti Morvan, constructeur de maisons
  7. 07L'orbiteUn noyau de verre au cœur doré, quatre modules en orbite.Noyau, suite logicielle pour artisans
  8. 08La matièreUne matière traversée d'éclairs, qui écoute, se calme et s'ouvre.Maison Orage, studio de création
  9. 09Les calquesLecture, écriture, maquette, puis les sites finis : la méthode en calques. Thème clair.Calque, studio web et identité
  10. 10Le réseauSept outils nommés que les scénarios relient dans l'ordre réel.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.