SaviourV2/video-storytelling

Video storytelling

Comment construire la couche visuelle d'une vidéo longue pour qu'un spectateur soit encore orienté à la neuvième minute. S'applique à toute vidéo avec un interlocuteur à l'écran et un script : un sujet d'actualité, une plongée en profondeur sur un seul sujet, une comparaison, un tutoriel, une liste.

L'échec que cette approche remplace est la pensée par scène. Un nouveau graphique toutes les quelques secondes oblige le spectateur à recommencer sa compréhension toutes les quelques secondes, et aucun graphique individuel n'en est responsable, c'est pourquoi le retour d'information se présente sous la forme vague de « confus » ou de « trop d'éléments » plutôt que comme un défaut spécifique.

Pour une feuille d'exercices neutre, lisez docs/STORYTELLING-WORKBOOK.md à la racine du dépôt. Le système de conception réutilisable se trouve dans le fichier reference/design-system.md de cette compétence ; la géométrie des boucles ouvertes travaillée se trouve dans reference/patterns/wall-of-slots/. Les vidéos sources privées ne sont pas nécessaires.

Ceci n'est pas hyperframes-video-beats. Cette compétence place des cartes de superposition par-dessus un interlocuteur à l'écran. Celle-ci conçoit la chose dont parle la vidéo.

1 · Les quatre principes

Un monde persistant

La vidéo vit dans un espace unique, et elle ne se réinitialise jamais. Tout ce que le spectateur a déjà vu existe toujours là où il l'a laissé, et le nouveau matériel y est ajouté plutôt que de le remplacer. Un élément, une fois dessiné, n'est jamais redessiné, déplacé ou réétiqueté.

Tout le reste dans cette compétence en dépend. La caméra n'a nulle part où aller si l'espace change constamment, un projecteur ne signifie rien s'il n'y a rien d'autre à l'écran, et une boucle ouverte ne peut pas rester ouverte dans un monde qui se réinitialise.

Le monde doit aussi valoir la peine d'y rester, alors décidez la grammaire spatiale avant de construire quoi que ce soit et maintenez-la pendant toute la durée. Dans la construction de référence : de gauche à droite va vers le résultat, le haut va vers un humain et est la seule chose chaude à l'écran, le bas va vers un système d'enregistrement. Un spectateur qui apprend cela dans les deux premières minutes lit le reste de la vidéo gratuitement.

Brisez la grammaire exactement une fois, délibérément, pour le sens. Le seul déplacement de droite à gauche en dix minutes dans la construction de référence est un ticket résolu qui retourne dans la file d'attente sur les mots « taux de réouverture ». Il atterrit sans un mot parce que la direction avait eu un sens pendant les trois minutes précédentes.

La caméra est le montage

Couper vers un nouveau graphique coûte au spectateur ses repères à chaque fois. Se déplacer dans un espace qui reste en place ne leur coûte rien. Un zoom avant est alors lu comme « regarde de plus près la partie de la chose que tu comprends déjà », et le zoom arrière est là où le travail porte ses fruits, parce que tout ce qui a été construit jusqu'à présent est toujours là.

Travaillez à trois altitudes et déplacez-vous entre des altitudes adjacentes :

Altitude	Montre	Utilisé pour
Monde	tout l'espace	orientation, aboutissements, « voici où nous sommes »
Région	le sous-graphe en discussion	la majeure partie du temps
Détail	un élément	un chiffre, un changement d'état, une décision

Passer du détail au monde est désorientant sauf s'il s'agit d'un battement d'aboutissement délibéré, auquel cas c'est le meilleur mouvement disponible.

Règles qui coûtent une reconstruction chacune à apprendre :

• Nommez les cadrages comme des fenêtres exactes du monde, pas comme des facteurs d'échelle. Les limites de la fenêtre doivent tomber entre les étiquettes. Spécifier un cadrage comme « échelle 0.6 » coupe les mots en deux au bord du cadre.
• Réutilisez la même fenêtre dans le même but. Si le plan d'orientation est une fenêtre particulière, utilisez toujours cette fenêtre exacte. Des cadrages presque identiques sont perçus comme une dérive.
• Variez la durée en fonction de la distance parcourue, pas d'un préréglage global unique.
• Les fondus de caméra et les volets pleine image se succèdent, ne se chevauchent jamais. Simultanés, ils guillotinent le contenu. D'abord la caméra, ensuite le volet.
• Une couche de couverture devient opaque avant que la caméra ne se déplace en dessous. Inversé, une partie du mouvement est exposée et perçue comme un saut de cut.
• Aucune étiquette à moins de 60 px du bord du cadre. Un élément peut déborder et être lu comme « le monde continue » ; un mot coupé au milieu d'un glyphe est perçu comme un bug. Résolvez-le par le placement, pas par le masquage, car un fondu ne peut pas rattraper une lame qui voyage à ~1800 px/s.
• Deux mouvements séquentiels sur le même sujet sont perçus comme un dysfonctionnement. Un recadrage qui se termine PUIS un volet qui commence est un zoom, un arrêt mort, puis un second mouvement — le client appelle ça « un dysfonctionnement et une pause ». Fusionnez-les en UN SEUL geste : une ease symétrique partagée (power2.inOut), atterrissant sur la même image, de sorte que le panneau semble pousser les images de côté. Associé : les eases en sortie front-loaded (power3/4.out) sur un mouvement visible de l'image chargent ~90 % du déplacement au début et rampent jusqu'à l'arrêt ; réservez-les pour les entrées d'éléments, où la rampe est perçue comme un établissement. (Coût d'une révision signalée par le client sur l'introduction de l'exemple travaillé.)

L'attention est un projecteur

Exactement un élément à pleine luminosité à tout moment. Tout ce qui est déjà dessiné reste calme mais lisible. Non négociable. C'est la règle qui permet à un monde de s'accroître jusqu'à une douzaine d'éléments sans jamais sembler touffu, et c'est ce qui rend le zoom arrière lisible plutôt qu'accablant.

La hiérarchie vient du RATIO entre actif et calme, jamais en rendant tout sombre. Le premier prototype de la construction de référence avait un pixel le plus brillant de 101/255 et était illisible à 960x540 ; la correction a été une encre plus lumineuse, pas plus de gradation.

État	Luminance cible (Y, 16-235)	Opacité dans la référence
Trait + étiquette actifs	200-235	1.0
Contexte, dessiné et toujours pertinent	120-150	0.56
Dépensé, a dit ce qu'il avait à dire	85-105	0.33
Toute étiquette, tout état	jamais en dessous de 90

L'implémentation est une fonction, appelée à chaque temps de narration avec les ids des éléments dont on parle (build_s01.py, lit()) :

def lit(t, active, warm=(), dur=0.5, floor=FLOOR):
    active = list(active) + [g + "-l" for g in active if g + "-l" in order]
    for gid in order:
        if gid not in opac:      # jamais dessiné : rien à éclairer
            continue
        tgt = 1.0 if gid in active else (WARM if gid in warm else floor)
        if gid not in active:
            tgt = min(tgt, MUTED.get(gid, 1.0))
        ...

Trois détails sont importants ici :

• Une étiquette hérite toujours de l'état de son élément (le pliage du suffixe -l). Un élément éclairé avec une étiquette illisible en dessous est exactement le défaut que l'on corrige.
• Un accessoire terminé se retire à l'opacité 0, via un plafond MUTED, pas à 0.3. Muter à 0.3 laisse des confettis inexpliqués à l'écran pour le reste de la section. Règle du générateur : émettez le mute() avant tout lit() commençant plus tard, sinon le muet est écrasé lorsque son tween se termine.
• Les événements d'opacité doivent être émis dans l'ordre de la timeline sinon le tracker voit un état obsolète et calcule la mauvaise cible. Utilisez un garde seq() qui lève une erreur en cas d'émission hors ordre.
• Une seule autorité d'opacité par élément par fenêtre. Deux tweens simultanément actifs pilotant l'opacité du même élément vers des valeurs différentes s'affichent de manière fluide dans une section autonome mais stroboscopent à ~10Hz dans le master assemblé, où le tween gagnant alterne par image. La construction de référence a expédié ce défaut à chaque accostage. Lorsqu'un balayage comme lit() chevauche un éclaircissement ou une atténuation explicite, le tween commençant le plus tard est le seul pilote et le balayage saute ces ids (lit(..., skip=(...))). Vérifiez-le : scannez les rendus assemblés pour détecter des pics de luminance aller-retour d'une image dans chaque fenêtre de transition (qa/v4/flicker/qa-flicker.mjs dans la construction de référence).

Les boucles ouvertes sont spatiales

Ne dites jamais « nous y reviendrons ». Laissez quelque chose de visiblement incomplet dans le monde et revenez-y. Une promesse que le spectateur peut voir est une promesse qu'il peut ressentir en suspens.

Le mécanisme est identique quelle que soit la forme :

1. Plantez-la dans l'accroche, dans l'espace, sur la ligne qui fait la promesse.
2. Montrez-la à nouveau à chaque frontière. Tout passage de relais de section est une frontière. Le fait de remontrer coûte environ deux secondes et est le mécanisme de rétention ; le sauter est la façon dont un aboutissement finit par ne rien rapporter.
3. Faites-la progresser visiblement. Le spectateur doit voir l'incomplétude rétrécir.
4. Fermez sur l'image sur laquelle vous avez ouvert.

Choisissez la forme dans le script :

Forme de script	Le monde	Ce qui est incomplet
N éléments parallèles	N prises sur une colonne vertébrale	emplacements vides (voir reference/patterns/wall-of-slots/)
Un processus, profond	tout le pipeline, déployé	un maillon cassé ou manquant
Niveaux ou paliers	une pile qui se construit vers le haut	le sommet de la pile est un fantôme
Comparaison	deux colonnes sur un même axe partagé	une colonne vide, ou un tableau de bord non rempli
Actualité ou annonce	une chronologie, ou une carte de paysage	le côté droit, le futur, est vierge
Tutoriel ou construction guidée	l'architecture finale, fantomatique	chaque nœud pas encore construit

Placer un élément dans son emplacement est un mouvement de caméra en direct, ~1.4s, jamais une coupe vers une image préfabriquée de l'état rempli. Le spectateur regarde la chose qu'il vient d'apprendre devenir la tuile. Si la vidéo a un chiffre ou un compteur, faites-le défiler dans ce même mouvement, comme un odomètre, avec le même début, la même durée et la même easing pour les deux chiffres, sinon ils fusionnent en une seule bande au milieu du défilement.

Le compteur a besoin d'un nom, pas seulement d'un chiffre. Un chiffre dans le coin indique au spectateur où il se trouve dans la séquence mais pas ce qu'est l'élément actuel ; à neuf minutes, « 03 » ne porte rien. Associez le chiffre à une étiquette de 1 à 2 mots nommant l'élément actuel (SUPPORT, VOICE AI), dans la même chimie de plaque, se déplaçant comme un seul accessoire rigide avec le chiffre, en échangeant dans le même roulement d'odomètre. La révision client de la construction de référence a demandé exactement cela : les visuels étaient bons et le spectateur perdait toujours la trace du cas d'usage à l'écran.

2 · Discipline

Si ça n'obtient pas de mot, ça n'est pas dessiné

Chaque forme est un élément étiqueté, un connecteur entre éléments étiquetés, le sujet voyageur, ou le fond ambiant. Rien d'autre.

Cela vient d'une revue de test muet qui a noté la compréhension à 7/10 et a nommé la cause : le diagramme était propre, les décorations ne l'étaient pas. Une douzaine de formes non étiquetées dessinées avec le même poids et la même palette que les formes significatives, de sorte qu'un spectateur novice ne peut pas distinguer le signal du motif et dépense une attention réelle à décoder des choses qui n'étaient jamais destinées à être décodées. C'est « trop de choses » déplacé des mots vers les formes.

Budget : environ 20 mots à l'écran par section. Pas de phrases. Les étiquettes font 1 à 2 mots, sous leur élément. La section de référence 1 fait 21 mots en 84 secondes.

Corollaire : un visuel contre-exemple ne superpose jamais la recommandation. Amenez d'abord le monde au noir quasi total, ou placez le contre-exemple là où le bon diagramme ne se trouve pas.

Donnez au spectateur une chose à suivre

Portez l'histoire sur un seul sujet voyageur dont l'état change visiblement : une puce avec des lignes de données et une barre de score, un document, une requête. Les lignes se remplissent, une barre bouge, une bordure change de couleur. Un spectateur doit pouvoir suivre une section entière en regardant cet unique objet, et il ne doit jamais se téléporter ; il se déplace le long de connecteurs dessinés à une vitesse constante.

Un seul ensemble de jetons globaux

Détail complet dans reference/design-system.md.

Jeton	Valeurs
Trait	1.5 / 2.5 / 4 / 7, et rien d'autre
Type	22 / 30 / 42 / 60 / 84
Rayon	10 / 22 / 40, toujours superellipse(2)

Cinq couleurs, cinq significations fixes, zéro décoration. Le chaud signifie qu'un humain est impliqué et rien d'autre n'est jamais chaud. Jamais de blanc pur pour le type ; il provoque un halo sur fond sombre.

L'échec que cela évite, selon la revue technique de la première construction : « chaque décision a été prise localement et correctement ; aucune décision n'a été prise globalement. » 18 épaisseurs de trait et 9 tailles de type, la plupart à 0.2 d'intervalle, individuellement invisibles et collectivement fatales. L'œil reçoit du bruit au lieu d'une hiérarchie. Contrôlez-le avec un linter de jetons qui fait échouer la construction.

Mouvement

Entrées avec cubic-bezier(0.16,1,0.3,1), sorties plus rapides que les entrées, durée variable selon la masse pour qu'un nœud de 290px et une étiquette de 40px ne décélèrent pas à l'identique, et back.out exactement une fois par section, sur le temps qui le mérite.

Pas de fondu enchaîné, jamais. Les couches pleine page entrent et sortent par clip sur un fond déjà opaque. À tout instant, un pixel est soit un graphique, soit une image vidéo.

3 · Contrat de construction

• Un générateur par section. scripts/build_<id>.py écrit uniquement compositions/<id>.html. Modifiez le générateur, jamais le HTML généré. Les racines de section index-*.html sont maintenues manuellement, donc les changements de cadrage y vont.
• Les modules partagés restent partagés. Tout ce qui définit une géométrie partagée est importé par chaque section. Si les sections sont construites par des agents parallèles, interdisez-leur de toucher aux modules partagés ; une géométrie divergente brise silencieusement chaque transition.
• Nommez les defs SVG avant l'assemblage. Chaque section définit ses propres gEdge, shadow, edgeFade. Dans un DOM assemblé, url(#id) se résout en la première correspondance dans l'ordre du document, donc une fois qu'une composition antérieure se démonte, chaque graphique ultérieur n'affiche rien. Coût dans la construction de référence : 35 secondes d'écran vide avec tous les feux au vert. Seul l'examen du rendu assemblé l'a détecté.
• Synchronisez tout sur le début des mots à partir d'une transcription au niveau du mot, en entrant 0.15 à 0.25s en avance sur le mot d'ancrage. Ne divisez jamais une section en temps égaux.
• Auditez les écarts. Tout intervalle de plus d'environ 1.5s sans rien qui se produit est un écran mort ; faites en sorte que le générateur les imprime.
• Laissez de l'air dans la coupe. Une limitation agressive des pauses produit des écarts quasi nuls aux limites des phrases que le client perçoit comme des « bégaiements » et des sauts de coupe. Calibrez par rapport à la norme du locuteur : signalez les écarts aux limites de phrases qui sont environ 10 fois plus serrés que leur médiane (la médiane du locuteur de référence était de 470 ms ; les jonctions signalées se situaient entre 20 et 40 ms), et corrigez en insérant 4 à 8 images d'air, sans jamais toucher aux mots. L'air est une tranche donnée du bruit ambiant réel de la piste avec des fondus de 10 ms, jamais anullsrc : le silence numérique face à un plancher de -50 dBFS est un trou audible. La vidéo maintient l'image ; entre les phrases, un interlocuteur à l'écran est quasi immobile et un maintien de 4 à 8 images est invisible. Les changements par insertion uniquement décalent la transcription de manière déterministe, donc aucune retranscription n'est nécessaire. Les bords d'une insertion doivent respecter l'enveloppe de la parole : coller le son donné à la fin d'un mot en 1 ms n'isole pas un silence mais

…

[Le texte a été tronqué pour la traduction]