Animated Video Scroll est une technique de conception de sites one-page cinématographiques où le défilement de la page pilote directement la lecture du contenu vidéo. Lorsque l'utilisateur fait défiler la page à l'aide de la molette de la souris ou par un geste sur l'écran d'un smartphone, la vidéo change image par image en douceur, se synchronisant avec le rythme de lecture et l'apparition des blocs d'information.
Cet effet est devenu la signature des présentations de produits premium d'Apple, Tesla, Porsche et des principaux studios de design mondiaux.
Cette technique ne consiste pas à intégrer un lecteur vidéo classique et n'utilise pas de GIF animés. Elle repose sur une séquence image par image de légères images WebP, rendues matériellement sur un élément <canvas> via WebGL ou 2D Context, garantissant une réactivité immédiate à chaque pixel de scroll.
1. Qu'est-ce qu'un site scroll-vidéo et ses avantages
La vidéo traditionnelle en arrière-plan de page présente deux inconvénients majeurs : elle suit son propre cours, ignorant l'attention du lecteur, et génère une charge élevée sur le réseau et la batterie des appareils mobiles.
Le site piloté par le scroll résout ce problème :
- Contrôle total de l'attention : L'utilisateur choisit lui-même le rythme de visualisation. S'il s'arrête sur un paragraphe important, l'objet dans le cadre se fige sous l'angle souhaité.
- Absence de latences et de buffering : Le fichier vidéo est pré-découpé en statiques WebP optimisés, évitant ainsi au navigateur de devoir effectuer un décodage lourd de conteneurs MP4 lors d'un scroll rapide.
- Synchronisation narrative : Les thèses textuelles, les annotations graphiques, les métriques numériques et les spécifications techniques apparaissent précisément lorsque la caméra met en évidence le détail correspondant de l'objet.
Adéquation avec le type de projet
| Type de produit | Pourquoi le scroll-vidéo convient | Focus clé dans le cadre |
|---|---|---|
| Automobiles et machines | Met en valeur l'aérodynamisme, les détails du châssis, les matériaux de l'intérieur | Mouvement fluide de la caméra le long de la carrosserie, changement d'angles |
| Électronique premium | Démontre l'assemblage de précision, l'épaisseur du boîtier, l'optique | Éclatement en composants (exploded view), macrophotographie |
| Architecture et immobilier | Crée une sensation spatiale de volume et d'éclairage | Vol à travers la façade vers l'intérieur |
| Mode et joaillerie | Montre la texture du tissu, le jeu de lumière sur le métal | Délicat mouvement de la lumière autour de l'objet |
2. Architecture et structure de fichiers de la compétence
La compétence est construite comme un pipeline d'ingénierie modulaire. Chaque composant gère une étape isolée du travail :
1. SKILL.md — Instruction principale et algorithme scénaristique
Décrit le cycle de vie de la création de la page : depuis l'analyse technique du matériau source via ffprobe jusqu'à la structuration en chapitres sémantiques, le calcul de la durée du scroll et l'assemblage de l'application HTML/JS finale.
2. visual-system.md — Guide du système Precision Editorial
Établit des règles esthétiques strictes : rejet des clichés bon marché (lueurs néon injustifiées, panneaux en verre et police Playfair), palette « Trackline » prête à l'emploi pour les récits techniques, 5 schémas de base pour le placement du texte et paires typographiques.
3. extract_frames.py — Script d'extraction et de compression des images
Utilitaire console en Python. Lit automatiquement les métadonnées vidéo via ffprobe, calcule le nombre proportionnel d'images, découpe des flux séparés pour Desktop et Mobile au format WebP et génère le manifest.json.
4. evals.json — Scénarios de vérification de qualité
Contient un cas de référence test (basé sur une vidéo Porsche) qui vérifie la fluidité du LERP, le comportement du canvas lors du redimensionnement de la fenêtre, l'accessibilité clavier et le poids des assets.
3. Mécanique de lecture : Canvas, LERP et Dwell-Remap
Le cœur du fonctionnement repose sur un élément <canvas> fixé plein écran (position: fixed). Le défilement de la page est converti en un progrès relatif allant de 0.0 à 1.0, qui détermine quel numéro d'image doit être affiché.
1. Lissage via LERP (Linear Interpolation)
Si les images sont changées strictement à chaque événement de scroll, l'animation paraîtra saccadée, surtout avec des souris à molette discrète.
Pour obtenir une fluidité cinématographique, on applique une interpolation linéaire : l'image affichée à l'écran (currentFrame) « rattrape » progressivement l'image cible (targetFrame).
2. Ralentissement près de chaque chapitre (Dwell-Remap)
Pour permettre à l'utilisateur de lire le titre et le texte sans avoir besoin d'arrêter finement la molette de la souris, la technique Dwell-Remap est appliquée. Au centre de chaque chapitre, la vitesse de défilement des images est artificiellement ralentie, maintenant un mouvement fluide entre eux.
3. Chargement progressif des images
Pour éviter les flashs blancs et ne pas attendre le chargement de tout le paquet (100–150 images), une stratégie en deux étapes est utilisée :
- Priorité critique : Les 5 premières images et les images clés des chapitres principaux sont chargées instantanément.
- File d'attente en arrière-plan : Les autres images sont récupérées par petits lots via
requestIdleCallbackou une file de promesses. Si l'image requise est encore en transit, le canvas affiche l'image chargée la plus proche.
4. Processus de développement étape par étape : de la vidéo au code
L'ensemble du processus de production est divisé en sept étapes séquentielles :
Étape 1. Analyse de la vidéo via ffprobe
Avant la génération du code, les paramètres techniques du fichier source sont analysés :
Une planche contact de 6 images clés est créée pour évaluer le mouvement de la caméra, la position de l'objet et la disponibilité d'espace négatif (negative space) pour le texte.
Étape 2. Formulation du concept de design
Une thèse claire est formulée :
- Protagoniste : Qui ou quoi est au centre de l'attention.
- Émotion cible : Précision technique, luxe sobre, adrénaline, méditation.
- Paire de polices : Titre contrasté et accent monospace ingénierie.
- Touche signature : Télémétrie, tracking variable, compteur de micro-images.
Étape 3. Découpe et optimisation des images
Le nombre d'images et la hauteur du scroll sont ajustés selon la durée de la vidéo :
| Durée vidéo | Nombre d'images | Hauteur de scroll recommandée | Poids cible total (WebP) |
|---|---|---|---|
| 0–5 secondes | 60–80 images | 450–550vh | 4–7 Mo |
| 5–15 secondes | 90–130 images | 600–750vh | 8–12 Mo |
| 15–30 secondes | 130–180 images | 750–900vh | 10–15 Mo |
| 30+ secondes | 180–200 images | 900–1000vh | 12–16 Mo |
Lancement de l'extraction via le script Python :
Étape 4. Scénario par chapitres
La page est divisée en 4–6 sections substantielles. Par exemple :
- Chapitre 1 : Introduction (0–15%) — Nom du modèle, silhouette minimaliste.
- Chapitre 2 : Aérodynamique (20–40%) — Focus sur la géométrie de l'aileron et des conduits d'air.
- Chapitre 3 : Groupe motopropulseur (45–65%) — Présentation du moteur ou du châssis avec données télémétriques.
- Chapitre 4 : Final et action (75–100%) — Révélation complète de la voiture et bouton d'essai.
Étape 5. Composition des couches et mise en page autour de la vidéo
Le texte ne doit jamais recouvrir les détails clés dans le cadre. Selon la trajectoire de mouvement de l'objet, la position des blocs de texte change doucement du bord gauche au droit ou se fixe dans le tiers inférieur de l'écran.
Étape 6. Assemblage basé sur un template de départ
Un squelette HTML5 robuste avec logique de chargement prête et support responsive est utilisé, auquel sont connectés les tokens de couleurs individuels et le manifest des images.
Étape 7. Vérification et critique
Testez toujours les sites scroll via un serveur HTTP local (python3 -m http.server), plutôt qu'en ouvrant le fichier directement via file:///. Les politiques CORS des navigateurs bloquent le chargement des images WebP via fetch() lors de l'ouverture locale de fichiers.
5. Système visuel : typographie et palette Trackline
Le système Precision Editorial exige l'abandon des excès décoratifs au profit d'une mise en page suisse éprouvée et d'une esthétique d'instruments de contrôle.
Combinaisons typographiques
- Titres : Archivo (Black, Tracking serré
-0.03em) - Texte principal : Archivo (Regular, 15px)
- Légendes techniques et télémétrie : IBM Plex Mono (Medium, 11px, Majuscules)
- Idéal pour : Automobiles, aviation, ingénierie lourde, mécanismes horlogers.
Palette de couleurs « Trackline »
La palette est construite sur les couleurs d'une vraie piste : carbone mat, aluminium froid et accents de course sobres.
Les couleurs signalétiques (--color-signal et --color-heritage) sont utilisées ponctuellement — pour indiquer le chapitre actif ou l'indicateur de position, occupant moins de 3% de la surface de l'écran.
6. Composition des couches, mouvement et touches signature
La page est construite à partir de trois couches indépendantes en profondeur visuelle :
5 variantes de composition du texte
| Schéma de composition | Emplacement du contenu | Scénario d'utilisation optimal |
|---|---|---|
| Masthead Statement | Titre géant centré sur tout l'écran | Premier écran d'ouverture (intro de la vidéo) |
| Side Margin Annotation | Colonne étroite (3–4 cols) à droite ou à gauche | L'objet bouge dans la partie opposée du cadre |
| Split Statement | Titre à gauche, description technique à droite | L'objet est stablement fixé strictement au centre |
| Telemetry Dock | Bandeau horizontal en bas avec données d'instrumentation | Démonstration de dynamique, vitesse, puissance |
| Final Callout | Bloc focalisé avec une seule action principale (CTA) | Écran final après la fin de la séquence vidéo |
Principes d'animation des éléments DOM
Puisque la vidéo sur canvas crée déjà un mouvement intense, l'animation des blocs de texte doit être sobre :
- Apparition via masque : Le texte monte depuis le bas à travers un conteneur avec
overflow: hidden. - Décalage : Pas plus de 16–24px sur l'axe Y.
- Timings : 600–800ms à l'entrée du chapitre avec la courbe
cubic-bezier(0.16, 1, 0.3, 1). - Aucun flou : Le filtre
filter: blur()est strictement interdit — il provoque le recalcul des couches du navigateur et détruit la stabilité des 60 FPS.
7. Antipatterns : abandon des clichés « luxe » obsolètes
La plupart des landing pages vidéo génériques paraissent bon marché à cause d'un ensemble de clichés designers typiques. Voici ce qu'il faut totalement abandonner :
| Cliché obsolète | Pourquoi c'est mauvais | Alternative professionnelle |
|---|---|---|
| Playfair Display + grotesque fin | Template standard de « pseudo-luxe » | Grotesques de précision : Archivo, Roboto Flex, Manrope |
| Glassmorphism (verre dépoli) | Floute la vidéo de fond, surcharge le GPU | Texte pur contrasté dans l'espace libre du cadre |
| Particules flottantes et poussière | Détournent l'attention de l'objet réel | Canvas propre sans déchets décoratifs artificiels |
| Dégradés néon violet-bleu | Associés aux templates crypto génériques | Couleurs naturelles prises directement des images vidéo |
| Curseur custom avec délai | Crée une sensation de lag et est inconfortable | Curseur système natif avec hovers clairs |
8. Performance, Accessibilité (A11y) et Optimisation Mobile
Les sites scroll avec beaucoup de graphismes nécessitent une discipline technique rigoureuse :
1. Limitation du Device Pixel Ratio (DPR)
Les smartphones modernes ont des écrans avec un DPR de 3.0 ou 3.5. Si le canvas est rendu à cette résolution, la surface de calcul augmente presque 10 fois, surchauffant immédiatement le processeur.
2. Pause du rendu pour les onglets cachés
Lorsque l'utilisateur change d'onglet, le rendu doit s'arrêter instantanément :
3. Mode réduction d'animation (prefers-reduced-motion)
Pour les personnes ayant un appareil vestibulaire sensible, le défilement constant image par image peut provoquer des vertiges.
Si le paramètre prefers-reduced-motion: reduce est activé dans le système d'exploitation, le site doit afficher un poster statique de haute qualité ou une galerie diaporama simplifiée à la place du défilement infini des images.
9. Atelier pratique : création et lancement du projet
Créons une structure minimale fonctionnelle de site scroll.
Étape 1. Génération des images depuis la vidéo
Placez la vidéo dans le dossier de travail et lancez la découpe :
Le script créera le fichier manifest frames/manifest.json :
Étape 2. Structure de fichiers du projet fini
Étape 3. Lancement de l'environnement local
Pour un chargement correct des ressources, lancez un serveur HTTP local :
Ouvrez l'adresse http://localhost:3000 dans le navigateur et vérifiez la fluidité du défilement des images et la correction du changement de chapitres.
10. Checklist finale de préparation du site scroll
Avant la release du projet, vérifiez la conformité à tous les critères techniques et visuels :
Métriques techniques
- Le poids total des images de la version desktop ne dépasse pas 12 Mo (mobile — jusqu'à 5 Mo).
- Les 5 premières images ont un preload prioritaire (
preload). - Le coefficient DPR est limité à la valeur
2pour éviter la surchauffe des appareils mobiles. - La boucle
requestAnimationFrames'arrête lors du passage à un autre onglet du navigateur.
Expérience utilisateur et accessibilité
- Transition LERP douce entre les images sans à-coups brusques implémentée.
- Dwell-Remap configuré pour une lecture confortable du texte près de chaque chapitre.
- Le mode
prefers-reduced-motionavec poster statique est supporté. - La taille minimale des éléments cliquables est de 44×44px.
Design et esthétique
- Une paire de polices d'ingénierie nette est utilisée, sans clichés pseudo-luxe.
- Le texte ne recouvre pas l'objet mobile principal dans le cadre.
- Les couleurs de l'interface sont empruntées directement au matériau vidéo.
- La page se termine par un appel à l'action (CTA) clair et unique.