lower-thirds

Bandeaux inférieurs (Lower Thirds)

Construisez un bandeau inférieur propre et aux couleurs de la marque — la légende avec nom/rôle qui se trouve dans la bande inférieure du cadre — qui s'anime, reste suffisamment longtemps pour être lu, puis disparaît sans voler le plan. L'artisanat réside dans la retenue : un dévoilement net, une forte hiérarchie typographique, un placement correct dans la zone de titre, et un seul modèle qui pilote toute une série d'intervenants.

Quand l'utiliser

• Étiquettes de nom d'intervenants/interviews, listes de panélistes, légendes de têtes parlantes.
• Titres de style broadcast, bandeaux d'actualités, cartes de nom pour podcasts/webinaires.
• Modélisation d'un seul design sur une liste de noms/titres → de nombreux clips (la récompense).

Anatomie

Un bandeau inférieur se compose de deux lignes de texte plus un fond graphique, placé dans la bande inférieure :

Élément	Rôle	Traitement typographique
Nom (principal)	Qui	Le plus grand, le plus lourd, le crénage le plus serré
Rôle/titre (secondaire)	Quoi/où	~45–60% de la taille du nom, poids plus léger, souvent une couleur d'accent de la marque
Barre / panneau / accent	Lisibilité sur n'importe quel arrière-plan	Pleine ou avec une opacité de 70–85% ; une règle d'accent relie à la marque

Limitez-vous à deux lignes. Une ligne de nom + une ligne de rôle, c'est tout le travail — des lignes supplémentaires érodent la hiérarchie et encombrent la zone de titre.

Trois règles pour éviter les titres bon marché

1. Ne jamais couper à vif un titre en entrée ou en sortie. Une apparition/disparition brute ressemble à une erreur. Même un fondu ou un glissement de 12 images donne l'impression que c'est travaillé.
2. Échelonnez, ne martelez pas. Animez d'abord la barre, puis le nom, puis le rôle, chaque élément décalé de 3 à 6 images. Tout arriver en même temps semble plat ; une courte cascade semble conçue.
3. Laissez assez de temps pour lire deux fois. Environ 3 à 5 secondes à l'écran (lisez-le à voix haute deux fois). Trop court et c'est manqué ; trop long et ça agace. Animez en entrée/sortie, jamais au milieu du segment.

Animations d'entrée et de sortie

Choisissez un langage de mouvement et réutilisez-le. Les dévoilements les plus fiables et les plus haut de gamme :

Dévoilement	Sensation	Comment
Glissement + fondu	Propre, par défaut	Translate sur ~24–40px en fondu ; ease-out en entrée
Barre à balayer	Broadcast	Une barre se met à l'échelle/balaye (scaleX/clip), le texte apparaît en fondu derrière
Dévoilement par masque	Haut de gamme	Texte clipé dans un rectangle mobile pour que les lettres "s'essuient"

Utilisez un easing asymétrique : un ease-out sec (cubic-bezier(.22,1,.36,1)) en entrée, un ease-in plus rapide en sortie. Sortez plus vite que vous n'êtes entré (~2/3 de la durée) pour que le titre se retire rapidement.

/* Dévoilement par masque : le texte s'essuie de gauche à droite, sans plugin */
.lt-name { clip-path: inset(0 100% 0 0); animation: essuyer .5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes essuyer { to { clip-path: inset(0 0 0 0); } }

Minutage entrée/sortie et maintien

Pensez en trois phases. Budget en images, pas en impressions (à 30 ips) :

Phase	Budget	Note
Entrée	12–18 images (0.4–0.6 s)	Échelonné : barre → nom → rôle
Maintien	90–150 images (3–5 s)	Le temps de lecture ; ajustez selon la longueur de la ligne
Sortie	8–12 images (0.27–0.4 s)	Plus rapide que l'entrée

Dans le code, pilotez chaque état à partir de l'image courante (ou d'une timeline en pause), pas de l'horloge réelle — un moteur de rendu vidéo exige des images déterministes. Exprimez entrée/maintien/sortie comme une seule courbe de progression pour que le même composant fonctionne aussi bien en direct dans un navigateur qu'image par image dans un moteur de rendu.

Zone de sécurité et conventions broadcast

Le bandeau inférieur doit survivre à tous les écrans et à toutes les interfaces des plateformes. Composez à l'intérieur de la zone de titre (les ~90% intérieurs / marge de 5%) et respectez les éléments d'interface :

Cadre	Ancrage	Éviter
16:9 (1920×1080)	Bord gauche à ~5% de marge ; ligne de base à ~80–85% vers le bas	5% extérieurs (zone de titre), 10% extérieurs de l'action
9:16 (1080×1920)	Même marge gauche ; remonter la bande	~18% du bas (sous-titres/UI), ~12% du haut
1:1 (1080×1080)	Bande inférieure, centré-gauche	5% extérieurs

Ancrez à gauche et grandissez vers la droite pour que les noms de différentes longueurs restent fixés et ne se recentrent jamais maladroitement. Gardez la ligne de rôle dans la même marge de gauche que le nom. En 9:16, ne placez pas le titre tout en bas — les sous-titres et boutons de la plateforme s'y trouvent.

Hiérarchie typographique et style de marque

La hiérarchie, c'est tout le design. Rendez le nom indéniablement dominant :

• Contraste de taille ≥ 1,6× (nom vs rôle). En cas de doute, augmentez le nom, pas le rôle.
• Poids + couleur : nom en gras/blanc quasi-pur ; rôle en poids plus léger et couleur d'accent de la marque (un seul accent, utilisé de manière cohérente).
• Contraste pour la lisibilité : le texte se superpose à des images inconnues. Utilisez une barre pleine/semi-opaque, un léger voile, ou une ombre portée douce pour qu'il soit lisible sur des plans aussi bien clairs que sombres.
• Cadenas de marque : fixez la police, la couleur d'accent, le style de la barre et le rayon des coins dans un seul objet de thème pour que tous les titres d'une série correspondent.

Modélisation d'un seul design sur une liste

La raison de construire ceci en code : changez le texte/les données, réexportez — pas besoin de réanimer. Faites du nom/rôle/thème des props, jamais codés en dur, puis associez un liste à des instances.

const ROSTER = [
  { name: "Ada Lovelace",  role: "Fondatrice, Moteurs Analytiques" },
  { name: "Grace Hopper",  role: "Contre-amiral, US Navy" },
  { name: "Alan Turing",   role: "Mathématicien" },
];
// Un seul design <LowerThird> ; mapper la liste → de nombreuses instances (les séquencer dans un moteur de rendu)
{ROSTER.map((p, i) => <LowerThird key={p.name} {...p} theme={BRAND} startFrame={i * 150} />)}

Dans un moteur de rendu, faites de la liste une prop d'entrée et effectuez le rendu une fois par ligne (--props) pour émettre un clip aux couleurs de la marque par personne — même animation, même marque, seul le texte change. Voir references/lower-third-component.md pour le composant complet exécutable et le script de traitement par lots.

Liste de vérification de sortie

• Deux lignes seulement : nom dominant, rôle secondaire (contraste de taille ≥ 1,6×).
• Animé en entrée et en sortie (pas de coupe à vif) ; entrée échelonnée barre→nom→rôle ; sortie plus rapide.
• Maintien de 3 à 5 s (lisible deux fois) ; mouvement uniquement aux extrémités, jamais au milieu du segment.
• Ancré à gauche dans la zone de titre ; bande 9:16 relevée au-dessus de la zone UI des 18% du bas.
• Texte lisible sur n'importe quel plan (barre/voile/ombre) ; un seul accent de marque partout.
• Nom/rôle/thème sont des props — un seul modèle rend toute la liste.

Livrer et vérifier (images fixes rendues → MP4)

Aide packagée (scripts/) : assemblez vos images fixes avec scripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, puis vérifiez l'encodage avec scripts/probe-mp4.sh out.mp4 [LxH] [ips]. Voir scripts/README.md.

Le bandeau inférieur est livré sous forme de composition Remotion (<Composition> + schéma zod + defaultProps, nom/rôle/thème en tant que props) — l'entrée/le maintien/la sortie sont tous pilotés par useCurrentFrame(), jamais par Date.now() / Math.random() / timers. Livrable = out/*.mp4 + le projet (ré-rendu par ligne de la liste). Le format vertical 9:16 (1080×1920) est le format par défaut.

Boucle de vérification — rendu des images fixes → inspection → encodage. Échantillonnez les trois phases pour détecter un problème d'échelonnement ou de zone de sécurité avant d'encoder (ou de traiter toute la liste en lot).

# Images fixes à l'entrée / au maintien / à la sortie — AVEC LES PROPS LIVRÉES (une vraie ligne de la liste, pas les valeurs par défaut)
npx remotion still LowerThird out/f-enter.png --frame=10  --props='{"name":"Ada Lovelace","role":"Fondatrice, Moteurs Analytiques"}'
npx remotion still LowerThird out/f-dwell.png --frame=75  --props='{"name":"Ada Lovelace","role":"Fondatrice, Moteurs Analytiques"}'
npx remotion still LowerThird out/f-exit.png  --frame=N   --props='{"name":"Ada Lovelace","role":"Fondatrice, Moteurs Analytiques"}'

# Inspectez chaque PNG — concentrez-vous sur l'image du MANTIEN (pleinement à l'écran) :
#  - la hiérarchie tient : nom dominant (>=1,6x rôle), rôle dans la couleur d'accent ; tous deux entièrement révélés, pas en cours d'essuyage
#  - cadenas de marque : police, couleur d'accent, barre/voile corrects ; lisibles sur le plan
#  - zone de sécurité 9:16 : bande RELEVÉE au-dessus de la zone UI des ~20-35% du bas, dégagée des ~12% du haut et du rail d'action droit ; ancrée à gauche dans la zone de titre
#  - les images d'entrée/sortie montrent un dévoilement partiel (l'animation s'exécute réellement), pas une coupe à vif

npx remotion render LowerThird out/lower-third.mp4 --props='{"name":"Ada Lovelace","role":"Fondatrice, Moteurs Analytiques"}'
npx remotion render LowerThird out/demo.gif --codec=gif                # Clip de preuve README

Traitement par lots de la liste : vérifiez UNE ligne via les images fixes avant de rendre tous les noms — détectez un bug de mise en page/dépassement une fois, pas N fois. Utilisez npx remotion compositions pour durationInFrames/fps afin de choisir les images de maintien et de sortie.

Avant de terminer :

1. Les images fixes se rendent proprement à l'entrée, au maintien et à la sortie — pas d'élément de police/marque manquant.
2. À l'image de maintien : le nom domine le rôle, l'accent de marque + la barre sont corrects, entièrement (pas partiellement) révélés.
3. La bande est à l'intérieur de la zone de sécurité 9:16 — relevée au-dessus de la zone UI du bas, dégagée du haut et du rail droit — à chaque image vérifiée.
4. Piloté uniquement par les images — pas de Date.now() / Math.random() / timers ; l'entrée/la sortie montrent du mouvement, jamais une coupe à vif.
5. Une vraie ligne de la liste (pas defaultProps) se rend correctement ; MP4 encodé, GIF optionnel.

Fichiers de référence

• references/lower-third-component.md — un bandeau inférieur complet exécutable : un composant Remotion avec entrée par ressort échelonnée, maintien lisible et sortie plus rapide pilotée uniquement par les images ; un objet thème typé pour le cadenas de marque ; le modèle de séquencement liste→plusieurs instances ; un script de rendu par lot par ligne ; plus une version CSS/HTML sans dépendances du même design avec des variantes de dévoilement par masque et de barre à balayer.