← Portefeuille immersif

Vos données
ont une forme.

Dispersées aujourd'hui, organisées demain.

Réutiliser cette idée Voir les autres

01

Rassembler.

Tout ce qui est éparpillé dans vos fichiers, vos mails, vos carnets.

02

Structurer.

Un ordre qui tient dans le temps, lisible par vous et par vos outils.

03

Utiliser.

Des réponses, pas des tableaux.

Réutiliser cette idée

Réutiliser « Les particules »

Vingt mille points qui se métamorphosent : nuage, sphère, anneau, grille. La forme suit le propos.

Idéal pour : Une idée abstraite : données, intelligence artificielle, transformation, flux.

Fichiers
04-particules/scene.js (la mise en scène), 04-particules/index.html (textes), 04-particules/page.css (ajustements), plus le socle src/commun/.
Réglages
  • Image cible : IMAGE (logo ou photo dans public/ressources) ; chaque point prend la couleur du pixel
  • Nombre de points : NOMBRE ; formes intermédiaires FORMES
  • Transitions : ETAPES_FORMES
Performance
Interpolation dans le shader ; la lecture de l'image se fait une fois au chargement. Fluide même sur mobile.
Sources
Logo Nexaly.
Repli
Sans WebGL, sans JavaScript ou avec « réduire les animations » : les mêmes textes et liens, en page statique.
  1. Copier le dossier 04-particules/ 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).