Couche
par couche.

Réutiliser « Les calques »

Des plans superposés dans la profondeur ; la caméra avance à travers eux. Thème clair, parallaxe profonde.

Idéal pour : Un portfolio, un catalogue, une galerie de réalisations, une marque claire et aérée.

Fichiers

09-calques/scene.js (la mise en scène), 09-calques/index.html (textes), 09-calques/page.css (ajustements), plus le socle src/commun/.

Réglages

• Cartes : CALQUES (profondeur, position, largeur, capture)
• Captures : 1280 × 800 dans public/ressources (Playwright ou capture manuelle)
• Ombres : ShadowMaterial derrière chaque carte, lumière qui suit la caméra

Performance

Huit cartes texturées + ombres 2048² sur ordinateur. Léger.

Sources

Captures d'écran des sites de Robin ; studio HDR 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 09-calques/ 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).