Apple Motion
Vitrine cinématique pour cinq produits Apple, rejoués en séquences d'images au fil du scroll
Contexte
Concevoir une vitrine produit où le scroll devient littéralement la main qui fait tourner l'objet entre les doigts du visiteur, sans les inconvénients d'un moteur 3D temps réel : contextes WebGL perdus, bugs de pilote graphique, qualité plafonnée par ce qu'un appareil bas de gamme peut tenir à 60 images par seconde.
Solution
Chaque produit est joué comme une pellicule de 180 photographies pré-rendues sur un canvas 2D, plutôt qu'un modèle 3D chargé en direct dans le navigateur. GSAP ScrollTrigger pilote la lecture en écrivant la position de défilement dans une simple référence, jamais dans le state React, pour tenir 120 images par seconde sans re-render. Un pipeline interne (route /render jamais exposée au visiteur) automatise la capture de chaque frame via Playwright depuis un modèle glTF compressé, avec un recadrage calculé sur l'union de tous les contours transparents pour que le produit ne "respire" pas d'une image à l'autre.
Architecture technique
- Pipeline de renduRoute Next.js interne /render pilotée par un vrai navigateur via Playwright : 180 captures par produit depuis un modèle glTF compressé, recadrage automatique et encodage WebP
- Lecteur & mémoireGSAP ScrollTrigger écrit la position de scroll dans une ref pour ne jamais re-render React ; frames stockées en ImageBitmap, seules la section active et ses voisines restent décodées, chargement progressif par vagues
- Qualité & accessibilitéSite bilingue FR/EN dimensionné sur la version française, scans axe-core à huit profondeurs de scroll, tests dédiés sous Safari, budget réseau vérifié en CI à chaque build
Aperçus
Performance mesurée
- Performance96
- Accessibilité100
- Bonnes pratiques100
- SEO100
Chaque projet intègre les standards de l'éco-conception : cache avancé, lazy-loading, formats d'images nouvelle génération et infrastructure à faible empreinte carbone.