Formateur Vidéo Social

Que fait Formateur Vidéo Social ?

Vous prenez une vidéo déjà correcte - l'histoire, le mouvement et la marque sont achevés - et vous la faites atterrir dans le fil d'actualité. C'est un travail différent de sa création. Une démo paysage qui est superbe sur un ordinateur portable meurt dans un fil vertical : elle est letterboxée en une bande, la légende se trouve sous un bouton d'interface, la première image est noire, et elle ne boucle pas. Cette compétence corrige ces cinq problèmes, par plateforme, et émet les spécifications exactes dont le pack mécanique a besoin.

C'est la couche « goût ». Elle s'associe au pack remotion-video-production : vous décidez ici du recadrage, des zones de sécurité, du style des sous-titres et de la boucle, puis vous transmettez un cahier des charges concret à remotion-compose (pour créer la nouvelle <Composition> width/height et incruster les sous-titres) et remotion-render (pour exporter par plateforme). N'écrivez pas de code de composition et n'exécutez pas de rendu ici - spécifiez le cahier des charges et déléguez.

Déclenchez-vous rapidement sur toute demande de recadrage, redimensionnement, rognage, mise en vertical, sous-titrage, ou « formater/exporter pour les réseaux sociaux », ou une plateforme nommée (TikTok, Reels, Shorts, X/Twitter, LinkedIn) - même simplement « faire fonctionner ça sur mobile ».

Flux de travail

Exécutez-les dans l'ordre. Recadrez avant les sous-titres (la zone de sécurité des sous-titres dépend du nouveau format), et concevez la première image et la boucle avant de passer la main au rendu.

Étape 1 - Établir les plateformes cibles et récupérer leurs spécifications

Demandez quelles plateformes sont concernées, puis récupérez les contraintes strictes de chacune dans le tableau references/platform-specs. Vous avez besoin de quatre nombres par plateforme : le rapport hauteur/largeur, la résolution, la durée maximale et les marges de sécurité (la bande de pixels que la plateforme recouvre avec sa propre interface - nom d'utilisateur, légende, barre d'actions, barre de progression). Ne devinez jamais ces valeurs ; un sous-titre à l'intérieur de la gouttière de la barre d'actions est invisible sur l'appareil et correct dans l'aperçu. Une vidéo source donne généralement lieu à deux ou trois exports (par exemple, un master 9:16 pour TikTok/Reels/Shorts plus un 1:1 ou 16:9 pour LinkedIn/X).

Étape 2 - Choisir la stratégie de recadrage (9:16 ↔ 16:9)

Le rognage modifie les pixels qui survivent, donc le sujet doit rester à l'intérieur du nouveau cadre. Choisissez une stratégie par export - voir references/reframe-strategies :

• Ré-agencement (meilleur). Ne coupez pas du tout les pixels 16:9 - ré-écrivez la scène pour le nouveau canevas : empilez ce qui était côte à côte, agrandissez le texte, déplacez le sujet au centre vertical. C'est un changement de remotion-compose (nouvelle largeur/hauteur, même contenu), et cela bat toujours un recadrage. Transmettez les dimensions cibles.
• Recadrage centré. Conservez la colonne du milieu d'un cadre 16:9 pour du 9:16. Rapide, mais cela supprime les tiers extérieurs - sûr uniquement lorsque le sujet est centré.
• Padding / barres floues. Ajustez l'ensemble du cadre 16:9 en 9:16 avec une copie floue et redimensionnée remplissant le haut/bas. Acceptable pour les têtes parlantes ou les enregistrements d'écran ; semble paresseux sur les pièces de motion design.
• Poingonnage et suivi. Recadrez sur le sujet et déplacez la fenêtre de recadrage au fil du temps pour suivre l'action. Résultat le plus fort, le plus de travail ; spécifiez les images clés pour remotion-compose.

Passer du 9:16 au 16:9 est la même logique en sens inverse : ré-agencement pour utiliser le nouvel espace horizontal plutôt que de letterboxer un clip vertical en une bande paysage.

Étape 3 - Appliquer les zones de sécurité sur le nouveau cadre

Pour chaque export, superposez les marges de sécurité de la plateforme et conservez chaque élément essentiel - sous-titres, logo, CTA, sujet clé - à l'intérieur du rectangle sûr. Les gouttières droite/basse (barre d'actions + bloc de légende) sont les tueurs habituels en 9:16. Exécutez safe_area.js (ci-dessous) pour convertir les marges en pourcentage en boîtes de pixels pour votre résolution exacte, puis transmettez ces nombres à remotion-compose comme limites de disposition. Traitez la bande non sécurisée comme interdite pour tout ce qui doit être lu.

Étape 4 - Concevoir la première image native à la plateforme

La première image est la vignette et l'accroche visuelle ; la lecture automatique démarre en mode muet, donc l'image 0 doit avoir du sens sans aucun son. Ne commencez pas sur du noir, sur un logo éphémère ou en fondu. Commencez par un accroche lisible : le résultat final, une ligne de sous-titre audacieuse ou le sujet déjà à l'écran. C'est une modification de remotion-compose de la scène d'intro (ou un accroche de 1 à 2 secondes ajouté au début). Spécifiez exactement ce que montre l'image 0.

Étape 5 - Spécifier les sous-titres incrustés

Considérez la lecture muette : les sous-titres sont obligatoires, pas optionnels, et doivent être incrustés (rendus dans les pixels), car les fichiers .srt séparés sont incohérents et non stylisables selon les plateformes. Spécifiez, pour remotion-compose : la position (à l'intérieur de la zone de sécurité, généralement le tiers inférieur mais au-dessus de la gouttière du bloc de légende), le style (grand, à fort contraste, semi-gras, avec un contour ou un fond uni pour la lisibilité sur tout arrière-plan), le timing (morceaux de phrases synchronisés avec la parole, pas un mur de texte), et jamais plus de ~2 lignes à l'écran. Pour les sous-titres animés mot par mot, déléguez la conception du mouvement à kinetic-typography et nommez simplement ici la zone de sécurité et le timing.

Étape 6 - Concevoir la boucle

Les fils d'actualité rejouent les clips instantanément, donc une boucle propre multiplie le temps de visionnage. Décidez-en une :

• Boucle transparente - la dernière image correspond à la première (même composition, position, couleur) pour que le rejeu soit invisible. Idéal pour les boucles courtes d'ambiance/de marque.
• Boucle d'accroche inversée - terminez sur une ligne qui renvoie le spectateur au début (« …et c'est la première étape »), rendant le re-visionnement intentionnel.
• Arrêt net - une carte de fin avec un CTA définitif ; correct pour les pièces narratives plus longues où une boucle semblerait cassée.

Pour une boucle transparente, l'ouverture et la fermeture sont une contrainte de remotion-compose (faire correspondre l'image 0 et la dernière image). Nommez le type de boucle et les images correspondantes.

Étape 7 - Émettre le cahier des charges d'export et passer la main

Remplissez le modèle export-spec ci-dessous - un bloc par plateforme. Ce cahier des charges est le briefing pour le pack mécanique : remotion-compose crée une <Composition> par format avec la disposition de la zone de sécurité, la première image et les sous-titres incrustés ; puis remotion-render exporte chacun (un export 9:16 est une Composition créée à 1080×1920, selon le preset vertical de remotion-render). Ne faites pas le rendu ici - fournissez le cahier des charges.

Barre de qualité

Un export est A+ seulement quand tout tient :

• Chaque export de plateforme nomme un format, une résolution, une durée maximale ET une zone de sécurité réels - tirés du tableau des spécifications, jamais devinés.
• Aucun élément essentiel (sous-titre, logo, CTA, sujet) ne se trouve dans une gouttière non sécurisée sur une plateforme cible ; vérifié par rapport aux boîtes de safe_area.js.
• Le recadrage est un ré-agencement ou un recadrage suivi là où le sujet serait autrement perdu - pas un recadrage centré aveugle ou un padding de barres floues paresseux sur une pièce de motion design.
• L'image 0 est lisible sans le son : un accroche, un résultat ou un sujet - jamais noir, jamais un logo nu, jamais en cours de fondu.
• Les sous-titres sont incrustés, à l'intérieur de la zone de sécurité, en morceaux de phrases, ≤2 lignes, à fort contraste.
• Le type de boucle est choisi intentionnellement, et les premières/dernières images d'une boucle transparente sont spécifiées pour correspondre.
• Le résultat est un cahier des charges transmis à remotion-compose / remotion-render - cette compétence n'a écrit aucun code de composition et n'a exécuté aucun rendu.

À NE PAS FAIRE

• NE PAS structurer le projet, écrire de code de composition ou exécuter le rendu ici - nommez le cahier des charges et déléguez à remotion-setup / remotion-compose / remotion-render.
• NE PAS recadrer au centre une source 16:9 en 9:16 lorsque le sujet est décentré ; vous couperiez le sujet. Ré-agencez ou suivez plutôt.
• NE PAS placer les sous-titres, CTA ou logos dans les gouttières droite/basse où la barre d'actions et le bloc de légende de la plateforme les recouvrent.
• NE PAS vous fier aux fichiers .srt/.vtt de sous-titres séparés pour les réseaux sociaux ; incrustez-les dans les pixels pour qu'ils s'affichent toujours et que vous contrôliez le style.
• NE PAS commencer sur du noir, un logo éphémère ou un fondu - l'image 0 est la vignette.
• NE PAS envoyer un seul fichier 16:9 à chaque plateforme ; les fils verticaux le letterboxent en une bande. Exportez par format.
• NE PAS dépasser la durée maximale d'une plateforme en espérant qu'elle « publiera quand même » - elle est tronquée ou rejetée ; coupez à la limite dans le montage.
• NE PAS concevoir d'animation de sous-titres mot par mot ici - c'est kinetic-typography ; spécifiez seulement la zone de sécurité et le timing.
• NE PAS planifier le storyboard ou l'ordre des plans ici - si la vidéo n'existe pas encore, c'est video-storyboard ; cette compétence recadre une vidéo déjà montée.
• NE PAS paramétrer le mouvement des éléments (assouplissement, espacement, suivi) ici - c'est motion-design-principles ; cette compétence nomme uniquement le nouveau canevas et les limites.
• NE PAS choisir la palette, le contraste ou l'éclairage pour le recadrage ici - déléguez ces choix à motion-color-and-light.
• NE PAS diriger le contenu de la démo produit ou la chorégraphie d'écran ici - c'est product-demo-director ; cette compétence suppose que le contenu est verrouillé.
• NE PAS concevoir la musique, le calage sur le beat ou le son ici - les sous-titres supposent une lecture automatique muette, mais l'audio est le travail de sound-and-music-sync.

Compétences associées

Ceci est une compétence artisanale dans un pack vidéo ; déléguez à une compétence sœur lorsque la demande concerne vraiment son domaine, et transmettez le cahier des charges de format aux compétences mécaniques :

• video-storyboard - planifier les beats et l'ordre des plans avant qu'une vidéo n'existe. Vient avant cette compétence.
• product-demo-director - diriger le contenu de la démo et la chorégraphie à l'écran.
• motion-design-principles - le savoir-faire en matière d'assouplissement, d'espacement et de mouvement de l'animation ; appuyez-vous dessus lors du ré-agencement d'un cadre pour un nouveau format.
• motion-color-and-light - palette, contraste et décisions d'éclairage.
• kinetic-typography - animation de sous-titres mot par mot (vous nommez la zone de sécurité et le timing ; il conçoit l'animation).
• sound-and-music-sync - musique et calage sur le beat ; la couche audio que cette compétence ne touche délibérément pas.
• remotion-compose / remotion-render - les mécaniques qui consomment le cahier des charges d'export de cette compétence pour créer la <Composition> par format et exporter le MP4.

Calculatrice

Script Node autonome. Enregistrez sous safe_area.js et exécutez avec node safe_area.js. Il convertit les marges de sécurité en pourcentage de chaque plateforme en boîtes de pixels pour sa résolution, afin que vous puissiez donner des limites de disposition exactes à remotion-compose. Aucune dépendance. Modifiez le bloc platforms au fur et à mesure que les spécifications changent.

// Calculateur de zone de sécurité sociale. Exécutez : node safe_area.js
// Les marges sont le % de chaque bord que l'interface de la plateforme couvre (haut/droite/bas/gauche).
// La droite + le bas sont grands sur 9:16 à cause de la barre d'actions et du bloc de légende.
const platforms = [
  { name: 'TikTok',         w: 1080, h: 1920, top: 6,  right: 11, bottom: 17, left: 3 },
  { name: 'Reels',          w: 1080, h: 1920, top: 7,  right: 12, bottom: 18, left: 3 },
  { name: 'Shorts',         w: 1080, h: 1920, top: 5,  right: 12, bottom: 13, left: 3 },
  { name: 'X (in-feed)',    w: 1080, h: 1080, top: 4,  right: 4,  bottom: 12, left: 4 },
  { name: 'LinkedIn',       w: 1080, h: 1350, top: 4,  right: 4,  bottom: 10, left: 4 },
]

function box(p) {
  const insetX = (pct) => Math.round((pct / 100) * p.w)
  const insetY = (pct) => Math.round((pct / 100) * p.h)
  const x = insetX(p.left)
  const y = insetY(p.top)
  const safeW = p.w - insetX(p.left) - insetX(p.right)
  const safeH = p.h - insetY(p.top) - insetY(p.bottom)
  return { x, y, safeW, safeH }
}

for (const p of platforms) {
  const b = box(p)
  console.log(
    p.name.padEnd(14),
    `${p.w}x${p.h}`.padEnd(11),
    'safe box -> x:' + String(b.x).padEnd(4),
    'y:' + String(b.y).padEnd(4),
    'w:' + String(b.safeW).padEnd(5),
    'h:' + b.safeH
  )
}

Exemple de résultat travaillé

TikTok         1080x1920   safe box -> x:32   y:115  w:929   h:1479
Reels          1080x1920   safe box -> x:32   y:134  w:918   h:1440
Shorts         1080x1920   safe box -> x:32   y:96   w:918   h:1574
X (in-feed)    1080x1080   safe box -> x:43   y:43   w:994   h:907
LinkedIn       1080x1350   safe box -> x:43   y:54   w:994   h:1161

Lisez-le : sur TikTok, disposez chaque élément à lire impérativement à l'intérieur de x 32→961, y 115→1594. La gouttière droite (la barre d'actions : like, commenter, partager) mange les ~119 premiers px, et le bas (nom d'utilisateur + légende) mange ~326 px - tout ce qui s'y trouve est masqué sur l'appareil bien que cela semble correct dans l'aperçu Studio. Transmettez ces limites comme limites de disposition à remotion-compose ; sur une Composition verticale 1080×1920, positionnez les sous-titres et le CTA à l'intérieur de la boîte, pas aux bords bruts du cadre.

Modèle : export-spec

Remplissez un bloc par plateforme. C'est le briefing que remotion-compose et remotion-render consomment - collez les nombres de zone de sécurité de safe_area.js.

SOCIAL EXPORT SPEC. [À REMPLIR : nom de la vidéo]. Source : [À REMPLIR : master 16:9, 1920x1080]

PLATEFORME : [À REMPLIR : TikTok / Reels / Shorts / X / LinkedIn]
  Format / résolution :   [À REMPLIR : 9:16 / 1080x1920]
  Durée maximale :        [À REMPLIR : p. ex. <= 60s in-feed]
  Zone de sécurité (px) :  x:[À REMPLIR] y:[À REMPLIR] w:[À REMPLIR] h:[À REMPLIR]   (de safe_area.js)
  Stratégie de recadrage : [À REMPLIR : ré-agencement / recadrage centré / blur-pad / poinçonnage-et-suivi]
    -> remotion-compose : [À REMPLIR : nouvelle Composition WxH + notes de disposition / images clés de rognage]
  Première image (image 0) : [À REMPLIR : l'accroche muette montrée à 0 - jamais noir/logo/fondu]
  Sous-titres :              incrustés, [À REMPLIR : position dans la zone de sécurité], <=2 lignes,
                             en morceaux de phrases, [À REMPLIR : style - taille/contraste/fond]
  Boucle :                  [À REMPLIR : transparente / accroche inversée / arrêt net]
    -> si transparente :    image 0 correspond à la dernière image à [À REMPLIR : position/couleur]
  Rendu :                remotion-render [À REMPLIR : preset, p. ex. 1080x1920 H.264 MP4]

(répétez le bloc pour chaque plateforme cible)

references/platform-specs

Vérifiez par rapport à la documentation actuelle des créateurs de chaque plateforme avant d'expédier ; ce sont les formes stables, mais les limites dérivent. Le format et les zones de sécurité sont plus importants que la durée maximale exacte.

• TikTok - 9:16, 1080x1920. Le point idéal in-feed est court (moins de ~60s), les téléchargements peuvent être beaucoup plus longs. Barre d'actions droite lourde et un bloc de légende bas haut ; gardez le contenu à lire haut et centré. Culture du son activé, mais sous-titrez quand même pour l'accessibilité et la lecture automatique muette.
• Instagram Reels - 9:16, 1080x1920. Jusqu'à ~90s. Interface droite/basse similaire à TikTok plus la rangée du profil/audio en bas. Le recadrage dans la grille est 1:1, donc le centre doit aussi être lisible comme une vignette carrée.
• YouTube Shorts - 9:16, 1080x1920. Jusqu'à 60s (tout ce qui est plus long est automatiquement rogné à 60s). L'interface est un peu plus légère (bouton like/titre en bas à gauche, commentaires/partage en bas à droite). Pas de barre d'actions lourde à droite, donc la zone de sécurité est plus large horizontalement. Les sous-titres peuvent être un peu plus bas sur le Shorts que sur Reels/TikTok.
• X / Twitter (in-feed) - 1:1 (carré), 1080x1080. Sur mobile, le coin inférieur droit chevauche le bouton « J'aime » / nombre de vues, et les commentaires/retweets mangent le bas. La zone de sécurité supérieure est ample - le contenu essentiel doit être dans le triangle supérieur ou le centre. La durée in-feed est généralement inférieure à ~140s avant d'être tronquée.
• LinkedIn - 4:5 (portrait), 1080x1350. L'interface est : titre de l'entreprise en haut, boîte de commentaires et avatar en bas. Les légendes longues sont masquées immédiatement ; placez tout message clé dans la vidéo, pas dans le post. Pas de barre d'actions lourde à droite, donc plus d'espace horizontal que TikTok/Reels.

Références

• references/platform-specs - ce tableau ci-dessus (les formes stables actuelles ; vérifiez avant d'expédier).
• references/reframe-strategies - les explications détaillées de chaque stratégie avec des exemples de cas où les utiliser (à créer en tant que fichier de référence séparé si nécessaire).