54 lines
3.3 KiB
Markdown
54 lines
3.3 KiB
Markdown
# 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.
|