short-form-video

Short-Form Video (Vidéo Courte Verticale)

Ingénierie d'une vidéo 9:16 qui survit au swipe. Le format court n'est pas un petit film de lancement — c'est une machine à rétention : un hook qui gagne la première seconde, des interruptions de motif qui réinitialisent l'attention toutes les quelques secondes, et souvent une boucle qui achète du temps de visionnage au-delà de 100%. Le travail est une question de timing, pas de polissage.

Quand l'utiliser

• Reels / TikTok / YouTube Shorts (7–60s, vertical 9:16).
• Montage de rétention : correction des chutes, ajout d'interruptions de motif, resserrement du rythme.
• Hooks, boucles transparentes, modèles de format court réutilisables (un design, plusieurs sujets).

Structure narrative (le contrat de rétention)

La narration au format court est un contrat avec le pouce du spectateur : chaque seconde doit regagner la suivante. Le récit est façonné à rebours à partir de la courbe de rétention, pas vers l'avant à partir d'une intro. Verrouillez ces éléments avant de toucher à la timeline.

• Une idée par vidéo. Un court transporte exactement un seul payoff. Une deuxième idée divise l'attention et la courbe s'affaisse au milieu — transformez-la plutôt en une deuxième vidéo. Si vous ne pouvez pas nommer le seul enseignement en une phrase, vous n'avez pas encore de court métrage.
• Ouvrez une boucle dans les ~3 premières secondes, fermez-la en dernier. Le hook pose une question ou un écart (la boucle ouverte) ; le payoff y répond. Le spectateur reste parce que la boucle est ouverte — ne répondez donc jamais trop tôt et n'enterrez jamais le payoff sous la mise en place.
• Pas de temps mort. Chaque temps fait avancer l'idée ou réinitialise l'attention. Coupez tout ce qui ne fait ni l'un ni l'autre. Le silence, les montées lentes, les intros qui s'éclaircissent la gorge ("salut les gens, dans cette vidéo…") sont des moments où les spectateurs swipent.
• Pourquoi la courbe, et non la coupe, est l'unité de travail. L'algorithme distribue tout ce qui maintient la courbe de rétention par seconde plate ; un "bon" montage qui aplatit la courbe perd face à un montage moche qui la maintient haute. Vous éditez la courbe, et le hook verrouille tout ce qui suit — corrigez-le d'abord.

La colonne vertébrale narrative (l'arc Hook → Mise en place → Corps → Payoff/boucle est budgétisé dans le tableau ci-dessous) :

Mouvement	Rôle narratif	Échec si manqué
Hook	Ouvrir la boucle ; promettre le payoff	Swipe dans les 3 premières secondes
Maintien de la tension	Garder l'écart ouvert à travers le corps	Milieu plat, chute au milieu
Payoff	Fermer la boucle — l'idée unique, délivrée	"J'ai perdu mon temps", pas de partage
Boucle / CTA	Reboucler sur l'image 0, ou une demande claire	Pas de re-visionnage, pas d'action

(Le tableau de L'arc de rétention ci-dessous attribue des secondes à chaque mouvement ; cette section est la logique narrative et l'ordre derrière cela. Grammaire du hook liste les archétypes de hook.)

La seule métrique qui compte

La rétention, pas la valeur de production. L'algorithme distribue tout ce qui retient les spectateurs ; ~87% décident de rester ou de swiper en 3 secondes, et le seuil de distribution se situe autour d'un visionnage moyen de ~70%+ (Shorts ~73%, TikTok ~78%, Reels ~65%). Chaque décision ci-dessous est échangée contre cette courbe. Un plan parfait qui ennuie à 0:04 perd face à un plan moche qui retient.

L'arc de rétention

Temps	Rôle	Budget (sur un court de 20s)
Hook (0–1s)	Une image + une ligne qui crée une boucle ouverte	0–1s
Mise en place	Exploiter le pourquoi regarder — promesse, enjeux ou écart	1–4s
Corps	Délivrer de la valeur en temps ; une idée par temps	4–17s
Payoff / boucle	Fermer la boucle — ou la ramener à l'image 0	17–20s

Étendez le corps, jamais le hook. Un court de 60s a un corps plus long et plus de temps — le même hook d'1 seconde.

Grammaire du hook (première ~1s)

Le hook est une phrase + un visuel qui ouvre un écart de curiosité que le cerveau a besoin de combler. Choisissez un modèle et engagez-vous :

Type de hook	Forme	Idéal pour
Boucle ouverte	"La raison pour laquelle votre X continue à Y…" (réponse retardée)	la plupart des contenus
Promesse directe	"3 façons de ___ en 30 secondes"	éducatif / liste
Interruption de motif	snap-zoom / whip-pan / décalage visuel dans l'image 1	divertissement
Négation	"Arrêtez de faire ___" / "Vous avez ___ faux"	opinions fortes

Deux règles : la ligne du hook est à l'écran sous forme de texte dès l'image 1 (85% regardent en muet), et le visuel le plus frappant est également la première image — jamais une entrée lente. Maintenez une image d'ouverture forte ; ne fondez pas depuis le noir.

Interruptions de motif et rythme de coupe

Une interruption de motif est tout changement qui réinitialise l'attention : une coupe dure, un zoom punch, un insert b-roll, un effet sonore, un pop de sous-titre ou un changement d'angle. Au format court, la densité est élevée — un changement visuel toutes les ~2 à 4 secondes ; les vidéos avec une interruption environ toutes les 4s retiennent ~58% contre ~41% pour une tête parlante statique. Le tueur est un milieu plat : TikTok freine la distribution lorsque la courbe de visionnage s'aplatit, donc ne cousez jamais le corps à partir de prises de faible énergie.

// Pilotez chaque interruption sur l'IMAGE, pas sur le temps horloge — rendu déterministe.
import { useCurrentFrame } from "remotion";
const fps = 30;
const cuts = [0, 1.2, 3.0, 5.4, 8.0, 11.2, 14.0]; // secondes — intentionnellement inégales
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);

Variez l'intervalle — un métronome est perçu comme de l'ennui ; des coupes inégales sont perçues comme du dynamisme. Un zoom punch-in est l'interruption la moins coûteuse qui ne nécessite aucun nouveau métrage :

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
const PunchIn = ({ at, children }) => {
  const frame = useCurrentFrame(); const { fps } = useVideoConfig();
  const s = spring({ frame: frame - at * fps, fps, config: { damping: 12, stiffness: 200 } });
  const scale = interpolate(s, [0, 1], [1, 1.12]); // snap à 112% sur le temps
  return <div style={{ transform: `scale(${scale})`, transformOrigin: "50% 45%" }}>{children}</div>;
};

Sous-titres

La plupart des spectateurs regardent en muet, donc les sous-titres à l'écran ne sont pas optionnels — ils portent le contenu et servent également d'interruption de motif lorsque chaque phrase apparaît. Gardez 4–7 mots par ligne, contraste élevé, à l'intérieur de la zone de sécurité. Ne réimplémentez pas l'animation des sous-titres ici — utilisez la compétence caption-animation pour le timing mot par mot, la surbrillance karaoké et le style ; cette compétence place uniquement les sous-titres sur la timeline de rétention et à l'intérieur de la zone de sécurité 9:16.

Boucles et re-visionnage

Une boucle transparente compte chaque re-visionnage comme un temps de visionnage frais — une boucle propre de 8s regardée 3× est un taux de visionnage de 300%, le signal le plus fort possible. Deux techniques : faites correspondre la dernière image à la première (même composition, position, couleur) pour que la coupe soit invisible, et écrivez une boucle de phrase — formulez le hook de sorte que le payoff se reboucle sur l'image 0 ("…et c'est pourquoi je n'ai jamais — " → boucle sur le début). La meilleure longueur pour le re-visionnage est ~7–15s.

Zones de sécurité 9:16

Composez à l'intérieur de la zone de sécurité universelle afin que l'interface de la plateforme ne recouvre jamais le texte ou les visages.

Zone	Pixels (1080×1920)	À éviter
Sécurité universelle (toutes plateformes)	centre 900×1400	tout élément critique en dehors
Haut	garder libre ~120px	profil / son UI
Bas	garder libre ~320px	sous-titres, CTA, hashtags, barre audio
Droite	garder libre ~120px	like / commentaire / partage rail

Placez le texte du hook et le sujet clé dans la boîte centrale 900×1400. Réservez le bas ~320px même s'il semble vide dans l'éditeur — c'est là que la plateforme peint ses propres sous-titres et boutons.

Liste de vérification de sortie

• La ligne du hook est un texte à l'écran dès l'image 1 ; le visuel le plus fort est la première image (pas de fondu).
• Une boucle ouverte / promesse définie dans les ~4 premières secondes.
• Une interruption de motif visuel toutes les ~2–4s ; intervalles inégaux ; pas de milieu plat.
• Sous-titres présents (via caption-animation), 4–7 mots, à l'intérieur de la zone de sécurité.
• Boucle fermée — première/dernière image correspondante ou phrase qui se reboucle sur l'image 0.
• Composé à l'intérieur de la boîte centrale 900×1400 ; bas 320px / haut 120px / droite 120px gardés libres.
• Chaque valeur animée dérivée de useCurrentFrame() — pas de minuteries CSS/bibliothèque.

Livrer et vérifier (images rendues → MP4)

Aide packagée (scripts/) : disposez 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] [fps]. Voir scripts/README.md.

Le court est livré sous forme de composition Remotion (<Composition> + schéma zod + defaultProps) — chaque coupe, punch-in et interruption piloté par useCurrentFrame(), jamais Date.now() / Math.random() / minuteries. Livrable = out/*.mp4 + le projet (re-rendu par sujet). Le format vertical 9:16 (1080×1920) est le réglage par défaut.

Vérifier la boucle — rendre des images → inspecter → encoder. Trois images testent les trois choses qui font ou défont la rétention : le hook, le rythme et la couture de la boucle.

# Images au hook / milieu du corps / dernière image — AVEC LES PROPS LIVRÉES (le vrai sujet, pas les valeurs par défaut)
npx remotion still Short out/f-hook.png --frame=10  --props='{"topic":"...","hook":"..."}'   # ~3 premières secondes lisibles instantanément
npx remotion still Short out/f-mid.png  --frame=N   --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-end.png  --frame=L   --props='{"topic":"...","hook":"..."}'   # L = durationInFrames-1

# Inspecter chaque PNG :
#  - Image HOOK (~image 0 / premières 3s) : la ligne du hook est un texte à l'écran et se lit instantanément ; le visuel le plus fort est déjà présent (pas de fondu)
#  - Couture de la BOUCLE : comparer f-hook(image 0) vs f-end(dernière image) — même composition/position/couleur pour une coupe de boucle invisible
#  - Zone de sécurité 9:16 : hook + sujet clé à l'intérieur de la boîte centrale 900x1400 ; libre du haut ~12%, bas ~20-35% (sous-titres/CTA/audio), rail d'action droite

npx remotion render Short out/short.mp4 --props='{"topic":"...","hook":"..."}'   # encoder une fois que les images vérifient
npx remotion render Short out/demo.gif --codec=gif                                # preuve de concept README

Par sujet / lot : vérifiez UN sujet via les images avant de tous les rendre. Utilisez npx remotion compositions pour durationInFrames/fps afin de choisir les images du milieu et de la fin.

Avant de terminer :

1. Les images se rendent proprement au hook, au milieu et à la dernière image — aucune erreur.
2. L'image du hook se lit instantanément (texte à l'écran + visuel le plus fort en avant, pas de fondu) ; la première et la dernière image correspondent pour une couture de boucle propre.
3. Hook + sujet + sous-titres se trouvent à l'intérieur de la boîte de sécurité centrale 9:16 900×1400 à chaque image vérifiée.
4. Uniquement piloté par l'image — pas de Date.now() / Math.random() / minuteries ; coupes inégales, pas de milieu plat.
5. Les props livrées d'un vrai sujet (pas defaultProps) rendent correctement ; MP4 encodé, GIF optionnel.

Fichiers de référence

• references/retention-pacing.md — une composition Remotion <Short> complète et exécutable : un planificateur de prises piloté par l'image avec des coupes inégales, l'interruption de motif PunchIn, un hook à l'écran, une superposition de zone de sécurité 9:16 et une boucle transparente première/dernière image. Plus une bibliothèque de modèles de hook, une méthode de débogage de la courbe de rétention, des cartes de zones de sécurité par plateforme et le modèle de rendu par lot sujet×template.