Vidéo explicative

Transformez un message unique en une courte vidéo rythmée de 30 à 90 secondes, avec narration. Parcourez le pipeline complet : script → storyboard → construction des scènes → synchronisation narration/sous-titres → montage → polissage, avec un système de style cohérent tout au long du processus.

Quand l'utiliser

Produire une vidéo de 30 à 90 secondes : produit, fonctionnement, onboarding, concept.
Passer d'une idée brute ou d'une fonctionnalité à un script, un storyboard et un assemblage final.
Synchroniser la narration avec les visuels et ajouter des sous-titres pour une lecture en mode silencieux.

Structure narrative (à décider en premier)

Une vidéo explicative est un argumentaire, pas une visite guidée des fonctionnalités. Avant toute étape du pipeline, verrouillez le récit afin que chaque choix ultérieur le serve.

Une idée centrale. Une seule phrase que le spectateur doit être capable de répéter après visionnage. Si vous ne pouvez pas la formuler en une ligne, la vidéo n'a pas de colonne vertébrale — réduire le périmètre jusqu'à ce que ce soit possible. Tout ce qui ne sert pas cette idée est supprimé, pas réduit.
Le script d'abord. La voix-off (VO) est la colonne vertébrale ; les visuels illustrent la phrase en cours, ils ne la précèdent jamais. Écrivez et chronométrez les mots avant de storyboarder ou d'animer — il est bien moins coûteux de couper une phrase qu'une scène déjà construite.
Gagner le « comment » avec des enjeux. Ne sautez pas du problème au mécanisme. Faites ressentir au spectateur le coût du problème d'abord ; cette tension est ce qui le pousse à regarder la solution.

L'arc narratif de la vidéo explicative — un temps par étape, dans l'ordre :

Étape	Tâche narrative	Ce que le spectateur doit penser
Problème	Nommer la douleur avec leurs mots	« C'est moi. »
Enjeux	Montrer ce que coûte cette douleur (temps, argent, risque)	« J'ai besoin de résoudre ça. »
Solution	Présenter le produit/l'idée comme la solution, en une ligne	« Oh — ça résout le problème. »
Fonctionnement	Le mécanisme en 1 à 3 étapes concrètes	« Je comprends comment ça marche. »
Récompense / CTA	L'après + une action suivante claire	« Je veux ça. Je vais faire X. »

(Le tableau « Formule du script » ci-dessous mappe ces étapes sur des parts de temps et des budgets de mots — cette section est le pourquoi et l'ordre ; celui-ci est le combien de temps.)

Choisissez une analogie et tenez-vous-y

Les mécanismes abstraits atterrissent quand on les associe à quelque chose que le spectateur connaît déjà. Choisissez une seule métaphore et gardez-la cohérente à travers les scènes — changer d'analogie en cours de route réinitialise la compréhension.

Choisissez une métaphore venant du monde du spectateur (une file d'attente, un thermostat, une chaîne de montage), pas du domaine technique.
Une métaphore par vidéo ; réutilisez-la à la fois pour la grammaire visuelle et le wording de la voix-off.
Testez-la : si l'analogie a besoin de sa propre explication, c'est la mauvaise.

Rythme par temps

Le rythme suit la tension. Avancez rapidement dans Problème/Enjeux pour atteindre la valeur ; ralentissez sur le « comment » pour que chaque étape soit comprise ; laissez la récompense respirer.

Temps	Sensation	Rythme de coupe
Problème / Enjeux	Rapide, un peu tendu	Coupes rapides, plans courts
Solution	Un temps de répit	Un plan clair et tenu
Fonctionnement	Réfléchi, une étape à la fois	Le plus lent — tenir chaque étape pour la lire
Récompense / CTA	Confiant, ouvert	Tenir le plan final ; un seul CTA

Le pipeline

Script — un message central. Structure : problème → solution → fonctionnement → récompense. Rédigez une voix-off (VO) concise ; chronométrez-la à ~2,3 mots/seconde (≈140 mpm). Une vidéo de 60s fait ~138 mots.
Storyboard — une idée par scène. Esquissez chaque plan ainsi que sa transition ; associez chaque ligne de VO à un visuel.
Construire les scènes — animez les diagrammes/données, le texte cinétique/mots-clés, et les arrière-plans (techniques intégrées ci-dessous).
Narration et sous-titres — enregistrez/générez la VO, alignez les coupes de scène sur les battements de la VO, gravez les sous-titres (la plupart des lectures sont en mode silencieux).
Montage — coupez sur la narration, maintenez chaque idée assez longtemps pour qu'elle soit comprise, supprimez toute scène qui ne fait pas avancer le message.
Polissage — étalonnage des couleurs, fluidité cohérente des transitions, mixage audio, carte de fin.

Formule du script

Temps	Rôle	Part du temps total
Problème	Nommer la douleur que le spectateur ressent	~20%
Solution	Présenter le produit/l'idée comme la solution	~15%
Fonctionnement	Montrer le mécanisme, 1 à 3 étapes concrètes	~45%
Récompense	Le résultat + une prochaine étape claire (CTA)	~20%

Écrivez la voix-off en premier, dans un langage parlé (contractions, phrases courtes). Lisez-la à voix haute et chronométrez-la avant de construire quoi que ce soit.

Calcul du timing de la VO

Rythme : ~2,3 mots/seconde (140 mpm) pour une narration claire et amicale ; ralentir les lignes techniques à ~2,0.
Estimez la longueur d'une scène à partir de sa ligne de VO : secondes = mots / 2,3, puis ajoutez ~0,4s de marge de respiration.
Une scène sans VO (pur temps visuel) nécessite au moins 1,0s pour être perçue.

Techniques de construction de scène (intégrées)

Révélation de diagramme / données (divulgation progressive : nœuds → arêtes → étiquettes) :

import gsap from "gsap";
gsap.set(".edge", { strokeDasharray: 1, strokeDashoffset: 1 });
gsap.timeline()
  .from(".node", { opacity: 0, scale: .85, transformOrigin: "center",
                   duration: .45, stagger: .3, ease: "back.out(1.5)" })
  .to(".edge",  { strokeDashoffset: 0, duration: .5, stagger: .3 }, "-=0.6");

Mot-clé cinétique (le mot apparaît sur la syllabe accentuée) :

.kw { display:inline-block; opacity:0; transform:translateY(18px); }
.kw.in { opacity:1; transform:none; transition:all .4s cubic-bezier(.22,1,.36,1); }

Compteur animé :

function countUp(el, to, dur=1200){ const t0=performance.now(); (function f(n){
  const k=Math.min(1,(n-t0)/dur), e=1-Math.pow(1-k,3);
  el.textContent=Math.round(to*e).toLocaleString(); if(k<1)requestAnimationFrame(f);})(t0); }

Rendez l'assemblage final avec Remotion (piloté par les données, déterministe) ou After Effects.

Synchronisation des sous-titres

Les sous-titres sont obligatoires — supposez une lecture automatique en mode silencieux. Utilisez une liste de repères .srt/.vtt calée sur la VO. Limitez à ≤2 lignes, ≤42 caractères/ligne, affiché ≥1,0s, disparu avant le début de la ligne suivante.

1
00:00:00,300 --> 00:00:02,600
Gérer les versions à la main, c'est lent.

2
00:00:02,800 --> 00:00:05,400
Shipfast automatise tout le pipeline.

Dans Remotion, pilotez les sous-titres à partir du même tableau de timing que celui utilisé pour les coupes de scène, afin qu'ils ne dérivent jamais.

Cohérence du système de style

Verrouillez une échelle typographique, une grammaire de couleurs (couleur = signification, jamais réaffectée) et une courbe de fluidité avant de construire la scène 2. Réutilisez les mêmes transitions d'entrée/sortie à travers les scènes pour que la pièce donne l'impression d'un seul objet, pas d'un montage d'expériences. Les visuels doivent illustrer la ligne de VO en cours — montrer, ne pas décorer.

Liste de vérification de la sortie

Message unique et clair ; chaque scène le fait avancer.
VO chronométrée (~2,3 m/s) ; durées de scène dérivées de la VO.
Storyboard associant chaque ligne de VO à un visuel.
Sous-titres gravés/disponibles ; ≤2 lignes, lisibles.
Système de typographie/couleur/mouvement cohérent sur toutes les scènes.
Carte de fin avec un seul CTA clair.

Livrer et vérifier (images rendues → MP4)

Assistant empaqueté (scripts/) : assemblez vos images 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 [WxH] [fps]. Voir scripts/README.md.

La vidéo explicative assemblée est une composition Remotion — déterministe à l'image, donc toute image exacte se rend sans tête sans mécanisme de recherche. Utilisez ce niveau lorsque le livrable est un MP4/GIF contenant une narration intégrée et des sous-titres gravés ; pour une scène web unique, livrez plutôt un HTML autonome.

Contrat de sortie :

Un projet Remotion avec la composition enregistrée (<Composition> + schema zod + defaultProps), tout le mouvement piloté par les images (pas de timers / Date.now() / Math.random()).
Livrable = le out/*.mp4 rendu (plus le projet, afin que VO/script/données puissent être re-rendus).
Narration via <Audio src={staticFile()}> ; timing VO/scène intégré dans les props (pas d'audio en temps réel au rendu). Sous-titres pilotés par ce même tableau de timing pour qu'ils ne dérivent jamais.
Durée dépendante des données ? calculez-la dans calculateMetadata, pas à la main.

Boucle de vérification — rendre les images → inspecter → encoder. Rendez d'abord des images individuelles (peu coûteuses, pas d'encodage), inspectez-les, encodez uniquement une fois que les images sont correctes.

# Images exactes au début / milieu / fin — rendre avec les props LIVRÉES, pas seulement les valeurs par défaut
npx remotion still Explainer out/f-start.png --frame=0   --props='{...}'
npx remotion still Explainer out/f-mid.png   --frame=N   --props='{...}'
npx remotion still Explainer out/f-end.png   --frame=L   --props='{...}'   # L = durationInFrames - 1

# Inspecter : le mapping script→storyboard→scène correspond aux images — échantillonner une image à l'intérieur du plan tenu de CHAQUE scène,
# confirmer que la ligne de narration et le sous-titre sont synchronisés avec le visuel à cette image, pas de débordement de texte / hors cadre.

# Seulement après que les images sont vérifiées, encoder :
npx remotion render Explainer out/explainer.mp4 --props='{...}'

npx remotion compositions lit durationInFrames/fps pour choisir l'image de fin et les images de plan tenu par scène.
GIF de démonstration README gratuit : npx remotion render Explainer out/demo.gif --codec=gif.

Avant de terminer :

npx remotion still se rend proprement à l'image 0, à une image à l'intérieur du plan tenu de chaque scène, et à la dernière — pas d'erreurs, pas d'actifs/polices manquants.
À chaque image de scène échantillonnée, le sous-titre et la ligne de VO parlée correspondent au visuel à l'écran (pas de dérive).
Les sous-titres sont dans les zones de sécurité, ≤2 lignes, lisibles ; le texte est exact et non coupé.
Uniquement piloté par les images — pas de Date.now() / Math.random() / timers ; les props livrées se rendent correctement (pas seulement defaultProps).
MP4 complet encodé et lu avec narration ; (optionnel) GIF rendu pour le README.

Fichiers de référence

references/script-to-screen-workflow.md — détails complets du pipeline : la formule du script problème→solution→fonctionnement→récompense avec un exemple travaillé et un budget de mots, des tableaux de timing VO, un modèle de storyboard à remplir avec des codes temporels, une liste de vérification par scène, des conseils de création de sous-titres (VTT/SRT), et une fiche de spécification du système de style pour la cohérence entre les scènes.

vidéo-explicative

Qu'est-ce que vidéo-explicative ?

Demander à votre IA préférée

Documentation