xpeditis2.0/docs/script-video-demo.md

Vidéo de présentation Xpeditis — script

Personne : Camille Roux, responsable transit chez un transitaire français. Ce qu'elle veut : placer ses expéditions LCL au meilleur prix, et savoir à tout moment où en est son activité. Durée visée : ~1 min 10 s · 1280×720 · sans voix off (lisible en autoplay muet).

---

Séquence

#	Écran	Ce que le spectateur comprend
1	Carton d'ouverture	Xpeditis est une plateforme B2B de fret maritime LCL.
2	Page d'accueil, recherche jouée	Deux ports, trois offres comparables en 1,8 s. C'est la promesse.
3	Tableau de bord — six temps	Le cœur, ~40 s. Le projecteur désigne successivement : ce qui demande une action, les indicateurs du mois, la courbe sur six mois, les réponses des transporteurs, les routes les plus actives, le classement des transporteurs. Puis la vue d'ensemble se rouvre.
4	Page de règlement	Le forfait Xpeditis est distinct du fret, réglé en ligne.
5	Liste des réservations	Chaque expédition et son statut, de la demande à l'acceptation.
6	Carton de clôture	Appel à l'action.

Règles de réalisation

1. Pas de carton plein écran entre les scènes. Ils immobilisaient l'image cinq secondes à chaque fois et transformaient la démo en diaporama. Seuls l'ouverture et la clôture en gardent un ; ailleurs, le commentaire passe en sous-titre sur l'interface vivante, qui ne quitte jamais l'écran.
2. Un projecteur désigne l'élément commenté. Sans lui, un simple défilement laisse le spectateur chercher où regarder. C'est ce qui « montre » vraiment.
3. Les transitions passent par un voile opaque, jamais par un fondu croisé : croiser deux images à 50 % se lit comme un bug d'affichage.
4. « Prête » se vérifie, ne se suppose pas : plus aucun squelette animate-pulse, images visibles chargées, plafond à 2,5 s. Ne jamais attendre networkidle — le websocket HMR du serveur de dev ne se tait pas, l'attente va au bout de ses 30 s et fige l'image.
5. Défilements amortis (cubic-out), pas de scroll-behavior: smooth.
6. Rien de parasite : pastille cookies, indicateur de dev.
7. Toujours enregistrer sur un serveur de dev fraîchement démarré. Après quelques heures, il finit par ne plus rendre l'application.
8. Vérifier par lecture réelle, pas par seek : les images-clés du WebM VP8 sont trop espacées, un échantillonnage par seek fait croire à une vidéo figée.
9. Données fictives mais plausibles, cohérentes d'un écran à l'autre.
10. Aucune image parfaitement fixe. C'est la règle la plus importante : une frame identique à la précédente pendant plusieurs secondes se lit comme un gel, même quand rien ne charge. Les panneaux de transition portent une lueur turquoise qui dérive, le projecteur respire pendant les temps de lecture. Se vérifie à la mesure — écart moyen entre images consécutives — et non à l'œil.
11. Le ciblage du projecteur remonte automatiquement jusqu'au premier ancêtre d'au moins 260 × 140 px, et la recherche du texte couvre aussi label, td, h4… Exiger une classe précise échouait silencieusement sur les pages qui ne l'ont pas — l'écran restait alors sans projecteur, donc parfaitement immobile.