Création d'un Rouleau de Page

Que fait Création d'un Rouleau de Page ?

Aperçu

La page contient déjà les meilleures images que vous obtiendrez : son propre mouvement, exécuté en temps réel. Le travail consiste à les capturer fidèlement, à choisir le chemin à travers elles et à prouver le résultat.

Principe fondamental : enregistrer l'animation réelle, ne jamais la recréer, et éditer par mesure, pas par ressenti.

Un enregistrement d'une page est une visite guidée. Dites-le. Un film de marque est un travail différent : un film designé et animé avec un storyboard. Cette compétence est pour « voici à quoi ressemble et comment bouge la page que nous avons construite ».

Décider avant l'enregistrement

• Ce que le rouleau prouve. Une phrase. « La nouvelle page se construit elle-même et défile comme conçu. »
• Quelle version. Enregistrer la version qui est réelle et publiée dans un environnement de révision. Jamais une version qui n'est pas encore publiée (une page produit non annoncée, un brouillon), et jamais un prototype qui est encore en cours de modification. Enregistrer l'étape de préproduction (staging), pas une construction locale.
• Format. 16:9 en 1920x1080 est la capture native du bureau et la plus sûre. N'inventez pas une disposition portrait que l'équipe n'a pas testée qualité (QA).
• Durée. Courte. 15 à 20 secondes montrent la capacité d'une page entière. Cinq secondes montrent un seul mouvement. Décidez de ce dont le rouleau a besoin.
• Ce qui ne doit pas apparaître. Logos clients, citations avec noms, marques tierces, texte placeholder, images cassées, affirmations non publiées. Écrivez la liste maintenant.
• Résolution. Réviser en 1080p. Ne rendez pas de master 4K avant que le montage ne soit approuvé.

Étape 1 : enregistrer l'animation réelle

Utilisez Chrome avec un screencast CDP, pas une capture d'écran par image. Les animations GSAP par défilement (scroll-scrubbed), le défilement fluide, les traînées canvas et les intros minutées s'exécutent toutes en temps réel. Les parcourir image par image modifie le mouvement.

Page.startScreencast  format jpeg, quality 100, maxWidth = viewport width, everyNthFrame 1

Sur un ordinateur portable Apple Silicon, cela délivre environ 60 images par seconde (écart médian 16,7 ms).

• Intros au chargement : démarrez le screencast, puis rechargez la page, afin que l'intro soit dans l'enregistrement. Rognez les images avant le rechargement.
• Défilement : pilotez le défilement à partir d'images clés [secondes, position]. Passez les positions à travers un cubique monotone (pas de dépassement, les paliers restent plats) et appliquez chaque valeur avec la bibliothèque de défilement fluide scrollTo(y, { immediate: true, force: true }), de sorte que le propre défilement et le lissage de la page s'exécutent exactement comme pour un lecteur. N'animez jamais manuellement les éléments de la page.
• Cacher, ne pas supprimer : visibility: hidden sur les logos et citations maintient les mises en page épinglées intactes. display: none les déplace.
• Horloge : prenez l'heure de début à l'intérieur de la page (performance.timeOrigin + performance.now()) de sorte que les images clés de défilement et les horodatages du screencast partagent une seule horloge.
• Rééchantillonner à une fréquence d'images constante : l'image de sortie k affiche la dernière image du screencast à ou avant k / fps.

video/capture.mjs dans ce dépôt fait tout cela à partir d'un petit plan JSON.

Étape 2 : choisir le chemin par la mesure

Un chemin de défilement choisi par ressenti laisse des zones mortes, des étirements où la molette bouge et rien à l'écran ne change. Trouvez-les :

1. Enregistrez un balayage lent et régulier de toute la plage.
2. Exécutez video/analyze.py dessus. Il rapporte les séquences figées (images identiques) et les plus grands changements d'image à image.
3. Mappez les séquences figées aux positions de défilement. Ce sont des zones mortes : traversez-les rapidement.
4. Donnez aux moments grattés par le défilement (un cercle qui grandit, une carte qui se construit, un compteur qui compte) les étirements lents et lisibles. Les scènes grattées suivent le défilement, donc attendre ne les termine pas.
5. Les animations temporelles démarrent lorsqu'un seuil est franchi et ont besoin de temps réel pour se terminer. Ne terminez pas le clip jusqu'à ce que la dernière soit terminée.

Ensuite, enregistrez la prise réelle avec le chemin façonné et exécutez à nouveau analyze.py. Une courte séquence figée à l'intérieur d'une scène épinglée est un palier et c'est acceptable. Un gel de 0,4 s au milieu d'un mouvement rapide ne l'est pas.

Vérifiez la santé de la capture elle-même : l'écart maximal entre les images du screencast dans la partie que vous utiliserez doit être inférieur à environ 40 ms. Un écart plus grand est une saccade, alors réenregistrez.

Étape 3 : sélectionner des images qui sont terminées

Regardez une planche contact toutes les 0,5 à 1 s avant de vous engager. Rejetez :

• cartes vides, images cassées, texte alternatif montrant où une image devrait être
• copie placeholder dans une liste CMS
• une première seconde qui est vide pendant que la page se peint ; rognez jusqu'à ce que le titre commence à monter
• tout ce qui se trouve sur la liste « ne doit pas apparaître »

Si une section est inachevée, laissez-la de côté et informez le propriétaire. Un rouleau qui présente une carte cassée est un rapport de bug public.

Étape 4 : encoder avec les couleurs étiquetées

./encode.sh <dossierImages> out.mp4 <premièreImage> <nombreImages> 60

Les images du screencast sont en pleine gamme BT.601 JPEG. L'encode les convertit en gamme limitée BT.709 et étiquette le flux, afin que les lecteurs ne devinent pas :

scale=in_range=full:in_color_matrix=bt601:out_range=tv:out_color_matrix=bt709,format=yuv420p
libx264 -crf 14 -preset slow -x264-params colorprim=bt709:transfer=bt709:colormatrix=bt709:fullrange=off
-movflags +faststart

yuv420p et +faststart le rendent lisible partout et démarrent immédiatement. Vérifiez le résultat en décodant quelques images en retour et en les comparant avec les sources par pixel. Ne comparez pas les moyennes des canaux : faire la moyenne de quelques millions de valeurs float32 accumule suffisamment d'erreur pour inventer un cast de couleur qui n'est pas là. Une différence d'environ 3 niveaux par canal est fidèle.

Étape 5 : QA de la vidéo

• Durée, fréquence d'images, taille et étiquettes de couleur lues à partir du fichier
• Une image par seconde, examinée, plus les transitions à vitesse normale
• Aucun logo, nom, placeholder, bannière ou image cassée dans aucune image, pas seulement celles choisies
• Aucune bannière de cookies ou widget de consentement dans l'image, et aucun cliqué : cachez-la du CSS de la page ou enregistrez un environnement qui ne l'affiche pas
• La première image est l'accroche. Si la page se peint vide, rognez-la
• Choisissez une image d'affiche où la page est complète et immobile, pas en plein défilement

Ensuite, exécutez le contrôle du réviseur à froid (cold reviewer gate) depuis reviewing-page-design.

Étape 6 : dire ce que vous n'avez pas pu vérifier

Le son, s'il y en a (« Je ne peux pas l'entendre »). La propre recompression de la plateforme. Tout ce qui est affiché sur un appareil que vous n'avez pas testé.

Quand un rouleau conçu est souhaité

Composez les images de la page à l'intérieur d'une mise en page où chaque visuel est une fonction du temps (ressorts sous forme fermée, une idée de superposition par temps, légendes de deux à cinq mots, couleur de marque uniquement sur le nom et le carton de fin). Les mêmes règles s'appliquent : la fenêtre de la page n'est jamais couverte, le texte se lit à 360 px de large, les points forts tiennent au moins 1,2 s.

Signaux d'alarme

• Une capture d'écran par image d'une page à défilement
• Enregistrer un prototype qui est en cours de modification, ou une page qui n'est pas publiée
• Un rouleau qui inclut une section à moitié finie
• Logos clients ou citations nommées dans l'image
• Un chemin de défilement choisi par ressenti, sans balayage derrière
• Couleur comparée par moyennes des canaux
• Rendu 4K avant que le montage ne soit approuvé