← Portefeuille immersif

De la friction
au déclic.

Tout ce qui vous ralentit, réuni en un seul système simple.

Réutiliser cette idée Voir les autres

01

Ce qui coince.

Appels manqués, devis en version 4, ressaisies, site qui ne rapporte rien.

02

Un seul système.

Pas un outil de plus : un ensemble qui fonctionne ensemble.

03

Quatre leviers.

Choisissez celui qui vous parle, ou laissez-vous guider.

Réutiliser cette idée

Réutiliser « L'objet qui s'assemble »

Des éclats de verre dispersés qui s'assemblent, au défilement, en un seul objet lumineux.

Idéal pour : Un message « de la dispersion à l'unité » : plusieurs problèmes, une solution ; plusieurs outils, un système.

Fichiers
01-assemblage/scene.js (la mise en scène), 01-assemblage/index.html (textes), 01-assemblage/page.css (ajustements), plus le socle src/commun/.
Réglages
  • Nombre d'éclats : NOMBRE_ECLATS
  • Étapes : assemblage 0,12–0,58, allume 0,5–0,74, ouverture 0,78–0,98
  • Verre : MeshPhysicalMaterial (transmission, épaisseur, dispersion) ; environnement hdr: studio_small_09 ; lueur bloom
Performance
Verre physique + HDR + bloom sur ordinateur (~1,6 Mo de HDR), matériau simple sans bloom sur mobile.
Sources
Environnement HDR Poly Haven (CC0), béton Poly Haven (CC0).
Repli
Sans WebGL, sans JavaScript ou avec « réduire les animations » : les mêmes textes et liens, en page statique.
  1. Copier le dossier 01-assemblage/ et src/commun/ dans le projet cible (Vite + three + gsap + lenis).
  2. Remplacer les textes des quatre étapes dans index.html ; garder les attributs data-*.
  3. Ajuster les réglages ci-dessus dans scene.js ; la progression p va de 0 (haut) à 1 (bas).