Étude de cas
Animation frontend / Expérience
AeroKnit X1
Un récit produit cinématique rendu par une séquence Canvas de 192 images, synchronisée au scroll sans re-rendu React.
- Rôle
- Créateur · Développement créatif
- Année
- 2026
- État
- Expérience en ligne
Système / routage
Faire défiler pour explorer
Vue d'ensemble du projet
La situation
Défi
Les décompositions produit haut de gamme reposent souvent sur des outils propriétaires ou des bibliothèques d'animation. L'enjeu était de produire une séquence fluide et responsive avec une chaîne d'assets transparente, sans solliciter React à chaque frame.
La réponse
Architecture
Une expérience Next.js 14 précharge 192 images JPEG extraites avec FFmpeg, associe la progression du scroll à un index et ne peint que les frames modifiées via requestAnimationFrame. Un Canvas adapté au ratio de pixels conserve la netteté sur chaque écran.
Ce qui l'a façonné
Décisions clés
Rendu hors de React
Des refs conservent la progression et requestAnimationFrame ne peint le Canvas que lorsque la frame cible change, sans mise à jour d'état pendant le scroll.
Séquence visuelle précalculée
FFmpeg exporte 1920×1080 JPEG numérotés et un manifeste pour garantir une lecture déterministe à l'exécution.
Lecture responsive et accessible
Mise à l'échelle selon la densité de pixels, centrage object-cover, préchargement progressif et image statique en mouvement réduit protègent qualité et usage.
L'usage
Expérience
Au défilement, l'AeroKnit X1 se sépare en six couches produit à des seuils précis. Un cadrage responsive de type object-cover préserve la composition, avec une première image statique pour le mode mouvement réduit.
Ce qui a été résolu
Résultat
Une expérience de scroll en ligne, sans bibliothèque, avec une chaîne d'extraction FFmpeg reproductible, un contrôle déterministe des frames et une implémentation alternative par scrubbing vidéo.
- Séquence de 192 images
- Expérience en ligne
Composition du système
Des technologies choisies avec intention.
- Next.js 14
- React 18
- TypeScript 5
- Canvas 2D
- FFmpeg
- RAF