Vidéo Courte
Concevoir une vidéo 9:16 qui survit au swipe. La vidéo courte n'est pas un petit film de lancement — c'est une machine de rétention : une accroche qui gagne la première seconde, des interruptions de pattern 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 métier est le timing, pas le polissage.
Quand l'utiliser
- Reels / TikTok / YouTube Shorts (7–60s, vertical 9:16).
- Montage de rétention : corriger les chutes, ajouter des interruptions de pattern, resserrer le rythme.
- Accroches, boucles transparentes, modèles de vidéos courtes réutilisables (un design, plusieurs sujets).
Structure narrative (le contrat de rétention)
La narration courte est un contrat avec le pouce du spectateur : chaque seconde doit regagner la suivante. La narration est façonnée à rebours de la courbe de rétention, pas en avant à partir d'une intro. Verrouillez ces éléments avant de toucher à la timeline.
- Une idée par vidéo. Une vidéo courte porte exactement un résultat. Une deuxième idée divise l'attention et la courbe s'affaisse au milieu — faites-en une deuxième vidéo. Si vous ne pouvez pas nommer le seul message en une phrase, vous n'avez pas encore de vidéo courte.
- Ouvrez une boucle dans les ~3 premières secondes, fermez-la à la fin. L'accroche pose une question ou un vide (la boucle ouverte) ; le résultat y répond. Le spectateur reste parce que la boucle est ouverte — ne la répondez jamais tôt, et n'enterrez jamais le résultat sous la mise en place.
- Pas de temps mort. Chaque temps fort soit fait avancer l'idée, soit 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 dégagent la gorge (« hé les gars, dans cette vidéo… ») sont les endroits où les spectateurs swipent.
- Pourquoi la courbe, pas 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 montez la courbe, et l'accroche verrouille tout ce qui vient après — corrigez-la d'abord.
La colonne vertébrale narrative (l'arc Accroche → Configuration → Corps → Résultat/boucle est budgétisé dans le tableau ci-dessous) :
| Étape | Rôle narratif | Échec si absent |
|---|---|---|
| Accroche | Ouvrir la boucle ; promettre le résultat | Swipe dans les 3 premières secondes |
| Maintien de la tension | Garder le vide ouvert à travers le corps | Milieu plat, chute au milieu |
| Résultat | Fermer la boucle — l'idée unique, délivrée | « J'ai perdu mon temps », pas de partage |
| Boucle / Appel à l'action | Reboucler à l'image 0, ou une demande claire | Pas de re-visionnage, pas d'action |
(Le tableau L'arc de rétention ci-dessous assigne des secondes à chaque étape ; cette section est la logique narrative et l'ordre derrière cela. Grammaire de l'accroche liste les archétypes d'accroche.)
La seule métrique qui pilote tout
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 près de 70%+ de visionnage moyen (Shorts ~73 %, TikTok ~78 %, Reels ~65 %). Chaque décision ci-dessous se négocie 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 (pour une courte de 20s) |
|---|---|---|
| Accroche (0–1s) | Une image + une ligne qui créent une boucle ouverte | 0–1s |
| Configuration | Expliquer pourquoi regarder — promesse, enjeux ou vide | 1–4s |
| Corps | Apporter de la valeur par temps forts ; une idée par temps fort | 4–17s |
| Résultat / boucle | Fermer la boucle — ou la renvoyer à l'image 0 | 17–20s |
Étendez le corps, jamais l'accroche. Une courte de 60s a un corps plus long et plus de temps forts — la même accroche d'1 seconde.
Grammaire de l'accroche (première ~1s)
L'accroche est une phrase + un visuel qui ouvre un vide de curiosité que le cerveau a besoin de combler. Choisissez un motif et tenez-vous-y :
| Type d'accroche | Forme | Idéal pour |
|---|---|---|
| Boucle ouverte | « La raison pour laquelle votre X fait Y… » (réponse différée) | la plupart des contenus |
| Promesse directe | « 3 façons de ___ en 30 secondes » | éducatif / liste |
| Interruption de pattern | snap-zoom / whip-pan / décalage visuel dans l'image 1 | divertissement |
| Négation | « Arrêtez de ___ » / « Vous vous trompez sur ___ » | opinions tranchées |
Deux règles : la ligne d'accroche est à l'écran sous forme de texte dès l'image 1 (85 % regardent en muet), et le visuel le plus frappant est aussi la première image — jamais de montée lente depuis le noir. Tenez une image d'ouverture forte ; ne fondez pas depuis le noir.
Interruptions de pattern & rythme de coupe
Une interruption de pattern est tout changement qui réinitialise l'attention : une coupe nette, un zoom brusque, une insertion de bobine, un effet sonore, une apparition de légende, ou un changement d'angle. Dans les vidéos courtes, 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 limite la distribution lorsque la courbe de visionnage s'aplatit, ne montez donc jamais le corps à partir de prises à faible énergie.
// Pilotez chaque interruption depuis l'IMAGE, pas l'horloge — rend 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 — irrégulières volontairement
const frame = useCurrentFrame();
const shot = cuts.findIndex((t, i) => frame < (cuts[i + 1] ?? Infinity) * fps);
Variez l'intervalle — un métronome se lit comme de l'ennui ; les coupes irrégulières se lisent comme de l'élan. Un zoom brusque est l'interruption la moins chère qui ne nécessite pas de 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 pattern 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, le surlignage karaoké et le style ; cette compétence ne fait que placer les sous-titres sur la timeline de rétention et dans la zone de sécurité 9:16.
Boucles & re-visionnage
Une boucle transparente compte chaque re-visionnage comme un temps de visionnage frais — une boucle propre de 8s regardée 3× donne 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 l'accroche de sorte que le résultat se reboucle sur l'image 0 (« …et c'est pourquoi je ne — » → boucle au 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 pour 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 ce qui est critique en dehors |
| Haut | garder libre ~120px | profil / interface sonore |
| Bas | garder libre ~320px | sous-titres, CTA, hashtags, barre audio |
| Droite | garder libre ~120px | pouce / commentaire / partage |
Placez le texte d'accroche et le sujet clé dans la boîte centrale 900×1400. Réservez le bas ~320px même si cela semble vide dans l'éditeur — c'est là que la plateforme peint ses propres sous-titres et boutons.
Checklist de sortie
- La ligne d'accroche est à l'écran sous forme de texte dès l'image 1 ; le visuel le plus fort est la première image (pas de fondu).
- Une boucle ouverte / promesse posée dans les premières ~4s.
- Une interruption de pattern visuelle toutes les ~2–4s ; intervalles irréguliers ; pas de milieu plat.
- Sous-titres présents (via
caption-animation), 4–7 mots, dans la zone de sécurité. - Boucle fermée — première/dernière image correspondante ou une phrase qui reboucle à l'image 0.
- Composé à l'intérieur de la boîte centrale 900×1400 ; le bas 320px / haut 120px / droite 120px gardés libres.
- Toute valeur animée dérivée de
useCurrentFrame()— pas de minuteurs CSS/bibliothèque.
Livrer & vérifier (images rendues → MP4)
Aide packagée (
scripts/) : juxtaposez vos images avecscripts/contact-sheet.sh sheet.png f-accroche.png f-milieu.png f-fin.png, puis vérifiez l'encodage avecscripts/probe-mp4.sh out.mp4 [LxH] [fps]. Voirscripts/README.md.
La vidéo courte est livrée sous forme de composition Remotion (<Composition> + schéma zod + defaultProps) — chaque coupe, zoom brusque et interruption piloté par useCurrentFrame(), jamais Date.now() / Math.random() / minuteurs. Livrable = out/*.mp4 + le projet (re-rendu par sujet). Le 9:16 vertical (1080×1920) est la valeur par défaut.
Boucle de vérification — rendre des images → inspecter → encoder. Trois images testent les trois choses qui font ou cassent la rétention : l'accroche, le rythme et la jointure de boucle.
# Images à l'accroche / 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-accroche.png --frame=10 --props='{"topic":"...","hook":"..."}' # ~premières 3s lisibles instantanément
npx remotion still Short out/f-milieu.png --frame=N --props='{"topic":"...","hook":"..."}'
npx remotion still Short out/f-fin.png --frame=L --props='{"topic":"...","hook":"..."}' # L = duréeEnImages-1
# Inspecter chaque PNG :
# - IMAGE D'ACCROCHE (~image 0 ou premières 3s) : la ligne d'accroche est un texte à l'écran et se lit instantanément ; le visuel le plus fort est déjà présent (pas de fondu)
# - JOINTURE DE BOUCLE : comparer f-accroche(image 0) vs f-fin(dernière image) — même composition/position/couleur pour une coupe de boucle invisible
# - ZONE DE SÉCURITÉ 9:16 : accroche + sujet clé à l'intérieur de la boîte centrale 900x1400 ; libre du haut ~12%, du bas ~20-35% (sous-titres/CTA/audio), de la barre d'action droite
npx remotion render Short out/courte.mp4 --props='{"topic":"...","hook":"..."}' # encoder une fois les images vérifiées
npx remotion render Short out/demo.gif --codec=gif # clip de preuve README
Par sujet / lot : vérifiez UN sujet via des images avant de tous les rendre. Utilisez npx remotion compositions pour duréeEnImages/fps afin de choisir les images du milieu et de la fin.
Avant de terminer :
- Les images se rendent proprement à l'accroche, au milieu et à la dernière image — aucune erreur.
- L'image d'accroche se lit instantanément (texte à l'écran + visuel le plus fort en avant, pas de fondu) ; les première et dernière images correspondent pour une jointure de boucle propre.
- L'accroche + le sujet + les sous-titres se trouvent à l'intérieur de la boîte de sécurité centrale 9:16 900×1400 à chaque image vérifiée.
- Piloté uniquement par image — pas de
Date.now()/Math.random()/ minuteurs ; coupes irrégulières, pas de milieu plat. - Les props livrées d'un vrai sujet (pas
defaultProps) se rendent correctement ; MP4 encodé, GIF optionnel.
Fichiers de référence
references/retention-rythme.md— une composition Remotion<Short>complète et exécutable : un planificateur de plans piloté par image avec coupes irrégulières, l'interruption de pattern PunchIn, une accroche à l'écran, un masque de zone de sécurité 9:16, et une boucle transparente première/dernière image. Plus une bibliothèque de motifs d'accroche, une méthode de débogage de courbe de rétention, des cartes de zone de sécurité par plateforme, et le modèle de rendu par lot modèle×sujet.