Vidéo de Présentation

Que fait Vidéo de Présentation ?

Transformez un diaporama ou un plan de pitch en une vidéo animée et narrée qui avance automatiquement. Chaque diapositive est reconstruite sous forme de graphiques animés — révélations échelonnées des éléments, vraies transitions, timing verrouillé sur la voix-off — pas un enregistrement d'écran de quelqu'un cliquant dans PowerPoint.

Quand l'utiliser

• Un pitch deck, un webinaire ou un module de cours qui doit devenir une vidéo auto-lisante.
• Un plan à puces qui doit devenir des diapositives animées et narrées.
• Un diaporama dont le timing doit suivre exactement une voix-off (avance automatique, pas de clic).

Reconstruire, pas enregistrer

Un enregistrement écran hérite de l'aspect statique du diaporama, des à-coups de souris et des coupures abruptes. Reconstruire en code (Remotion) offre : des révélations déterministes par image, des transitions qui s'adoucissent réellement, un texte net à n'importe quelle résolution, et des durées de diapositives dictées par la longueur audio. Le diaporama devient le script ; la vidéo est un artefact nouveau.

Flux narratif : le diaporama est un argument unique, pas N diapositives

Avant le timing ou l'animation, corrigez l'histoire. Une vidéo de présentation qui s'avance elle-même n'a pas de présentateur pour rattraper un fil perdu — la structure doit porter la logique seule. Construisez d'abord la colonne vertébrale ; les diapositives sont des points sur cette colonne.

• Un fil rouge (la colonne vertébrale). Énoncez le message principal du diaporama en une phrase. Chaque diapositive doit faire avancer cette phrase ; si une diapositive ne le fait pas, supprimez-la ou déplacez-la en annexe. Le spectateur doit pouvoir résumer le fil rouge après un visionnage.
• Un message par diapositive. Une diapositive fait exactement un point — son titre est ce point, formulé comme une affirmation (« Le churn est notre véritable taxe de croissance »), pas comme une étiquette (« Churn »). Deux idées signifient deux diapositives.
• Les transitions portent la logique, pas seulement le mouvement. La coupure entre les diapositives doit répondre à « et ensuite ? » — donc, mais, ce qui signifie, voici la preuve. Associez le mouvement à l'étape logique : un fondu doux pour « et aussi », une poussée plus forte pour « nouvel acte ». Une transition qui ne marque pas une étape logique n'est que décoration.
• Commencez par un accroche, terminez par un appel à l'action. La première diapositive doit capter l'attention en ~5s — une question pertinente, une statistique surprenante, les enjeux — pas un ordre du jour ou un logo fixe. La dernière diapositive énonce l'action unique que vous souhaitez (« Lancez le pilote », « Investissez 2M$ pour 15% »), immobile comme cadre de conclusion.

Tension → résolution (la colonne vertébrale du pitch)

Un pitch est un drame, pas une liste de fonctionnalités. Séquençez-le pour que la tension monte puis se résolve — chaque acte prépare le suivant.

Acte	Temps	Rôle
Problème	« Voici ce qui est cassé / en jeu »	Créer une tension que le spectateur ressent
Insight	« Voici ce que tout le monde manque »	Le tournant non évident ; mériter la solution
Solution	« Voici notre réponse »	Résoudre la tension que le problème a créée
Preuve	« Voici pourquoi ça marche »	Traction, démo, chiffres
Demande	« Voici ce que nous voulons »	Un appel à l'action concret

Ne révélez pas la solution avant que le problème ne soit posé — une solution non méritée ressemble à une fonctionnalité, pas à un soulagement. Mappez vos diapositives sur ces actes ; si un acte manque, l'argument a un trou.

Rythme : gardez la construction synchronisée avec la voix

Le fil rouge se déroule dans le temps, donc la construction à l'écran et la voix-off doivent avancer ensemble — la narration possède l'horloge (section suivante), et les révélations sont programmées en fonction pour que le spectateur lise la ligne au moment où elle est prononcée, jamais en avance. Un message par diapositive rend cela naturel : une diapositive porte un point exactement aussi longtemps que la voix le défend, puis la transition marque l'étape logique vers la suivante. Une narration longue sur un point signifie diviser la diapositive, pas accélérer la construction.

La règle d'or : la narration possède l'horloge

Chaque diapositive dure exactement aussi longtemps que son audio de narration, plus une petite marge. Mesurez la durée réelle de chaque clip voix-off, convertissez-la en images, et faites-en la longueur de la diapositive. Ne jamais estimer « cette diapositive fait ~5s » — cela dérive toujours et l'audio est coupé ou se termine trop tôt.

import { getAudioDurationInSeconds } from "@remotion/media-utils";
// Dans une étape calculateMetadata() / de construction Remotion, par diapositive :
const sec = await getAudioDurationInSeconds(slide.audioUrl);
const HANDLE = 0.4; // marge de respiration après la voix
slide.durationInFrames = Math.ceil((sec + HANDLE) * fps);

Ensuite, les révélations à l'intérieur de la diapositive sont programmées par rapport à cette durée — les puces arrivent sur les mots, pas sur une grille fixe.

Révélations de construction : animer pour révéler, jamais pour décorer

Le but d'une construction est le rythme : montrer chaque élément lorsque la narration l'atteint, afin que le spectateur lise la ligne prononcée — pas trois lignes à l'avance. Échelonnez les éléments entrants ; gardez les titres, logos et formes d'arrière-plan statiques.

Choix	Recommandation	Pourquoi
Mouvement d'entrée	fondu + montée de 12–24px	Raffiné, calme ; se lit comme « arrivée »
Durée par élément	0.25–0.5s	Assez rapide pour fluidité, assez lent pour être perçu
Décalage entre puces	0.15–0.4s	Séquentiel, pas un mur de texte
Éviter	entrée volante, rotation, rebond, machine à écrire	Se lit comme décoration ; concurrence la voix

Pilotez le décalage avec useCurrentFrame() pour qu'il reste synchronisé avec l'audio rendu (voir references/slide-components.md pour le composant complet).

import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";

const Bullet: React.FC<{ index: number; children: React.ReactNode }> = ({ index, children }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const STAGGER = 8;                         // images entre puces (~0.27s à 30ips)
  const enter = frame - index * STAGGER;     // chaque puce commence plus tard
  const p = spring({ frame: enter, fps, config: { damping: 200 }, durationInFrames: 12 });
  return (
    <li style={{ opacity: p, transform: `translateY(${interpolate(p, [0, 1], [18, 0])}px)` }}>
      {children}
    </li>
  );
};

Transitions entre diapositives

Séquencez les diapositives avec <TransitionSeries> de @remotion/transitions. Chaque diapositive est une Sequence avec sa durationInFrames dérivée de la narration ; une Transition se trouve entre elles. Gardez les transitions discrètes (fondu court ou glissement doux) — le contenu est la star, et un effet de transition chargé sur chaque coupe devient vite fatigant.

import { TransitionSeries, linearTiming } from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";

<TransitionSeries>
  {slides.map((s, i) => (
    <React.Fragment key={s.id}>
      <TransitionSeries.Sequence durationInFrames={s.durationInFrames}>
        <Slide {...s} />
      </TransitionSeries.Sequence>
      {i < slides.length - 1 && (
        <TransitionSeries.Transition
          timing={linearTiming({ durationInFrames: 15 })}
          presentation={fade()}
        />
      )}
    </React.Fragment>
  ))}
</TransitionSeries>

Réservez une transition plus grande (un glissement/poussée) pour les séparateurs de section uniquement — cela signale « nouveau sujet » et mérite le mouvement supplémentaire. Une transition emprunte des images aux deux voisins, donc ajoutez sa longueur au budget de la diapositive si la narration d'une diapositive doit être jouée en entier. Voir references/sequencing.md.

Titre et séparateurs de section

Une carte titre et des séparateurs de section donnent du rythme à la vidéo et laissent le spectateur respirer entre les diapositives denses. Traitez un séparateur comme une courte « diapositive » en soi : un grand numéro/mot de section, le titre de la section, un maintien d'environ 1,5 à 2 secondes, et une transition plus prononcée de chaque côté. Gardez le langage visuel du séparateur (couleur, typographie) cohérent pour qu'il se lise comme une ponctuation, pas comme une vidéo différente.

Gardez le texte lisible et conforme à la marque

Les diapositives sont denses en texte, donc la lisibilité est l'enjeu principal.

• Échelle typographique, pas échelle du diaporama. Un diaporama vu sur un ordinateur portable ≠ une vidéo vue dans un fil d'actualité. Augmentez le corps à ≥ 28–32px en 1080p ; titres 56–80px. Si une diapositive a besoin d'une note de bas de page en 16px pour tenir, elle doit être divisée en deux diapositives.
• Une idée par diapositive. Si la narration d'une diapositive est longue, divisez-la — ne réduisez jamais la taille de la police pour faire tenir.
• Contraste + marges de sécurité. Maintenez un ratio de contraste ≥ 4.5:1 ; gardez tout le contenu dans les 90% centraux pour survivre au recadrage des plateformes.
• Verrouillez la marque dans un objet thème. Couleurs, polices, logo et espacements vivent dans un seul theme pour que chaque diapositive soit cohérente et qu'un changement de marque soit une modification sur une seule ligne.

export const theme = {
  bg: "#0B0B12", fg: "#F5F5F7", accent: "#6C5CE7",
  font: "Inter, system-ui, sans-serif",
  titlePx: 72, bodyPx: 30, maxWidthPct: 90,
} as const;

Flux de travail

1. Plan → script. Une diapositive = une idée + la ou les lignes de narration exactes. C'est la source de vérité.
2. Générer/enregistrer la narration par diapositive. Un fichier audio par diapositive (TTS ou enregistré).
3. Mesurer l'audio → définir les durées des diapositives. getAudioDurationInSeconds → images (la règle ci-dessus).
4. Construire les composants de diapositive avec des révélations échelonnées liées à useCurrentFrame().
5. Séquencer avec <TransitionSeries> ; ajouter le titre et les séparateurs de section.
6. Monter l'audio de chaque diapositive à l'intérieur de sa Sequence pour que la voix et les visuels ne puissent jamais dériver.
7. Passage lisibilité/marque, puis rendu en MP4.

Liste de vérification de sortie

• La durationInFrames de chaque diapositive est dérivée de son audio de narration, pas devinée.
• L'audio de chaque diapositive est monté à l'intérieur de sa propre Sequence (visuels + voix verrouillés ensemble).
• Les puces se révèlent séquentiellement via useCurrentFrame() ; titres/logos statiques.
• Les révélations sont en fondu+montée, 0.25–0.5s, sans effets décoratifs.
• Les transitions entre diapositives sont discrètes ; transitions plus grandes uniquement sur les séparateurs de section.
• Corps typographique ≥ 28px en 1080p, contraste ≥ 4.5:1, contenu dans les 90% centraux.
• Une idée par diapositive ; une narration longue divise la diapositive au lieu de réduire la police.

Livrer et vérifier (images rendues → MP4)

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

Remotion est déterministe par image — chaque construction de puce, transition et position de diapositive est une fonction pure de useCurrentFrame(), vous pouvez donc rendre n'importe quelle image exacte sans tête de lecture. Le livrable est un MP4 narré, donc l'inspection d'images capture un titre tronqué, une couleur hors marque ou une puce qui déborde avant de gaspiller un encodage complet.

Contrat de sortie :

• Un projet Remotion avec le diaporama enregistré (<Composition> + schéma zod + defaultProps), tout mouvement piloté par image (pas de timers / Date.now() / Math.random()) ; audio par diapositive monté dans sa propre Sequence.
• Livrable = le rendu out/*.mp4 (plus le projet, pour que l'utilisateur puisse re-rendre avec de nouvelles diapositives/narration).
• Les durées des diapositives sont dérivées de la narration — calculez le total + durationInFrames par diapositive dans calculateMetadata (il mesure chaque clip audio), jamais à la main.

Boucle de vérification — rendre des images → inspecter → encoder. Rendez d'abord des images uniques (bon marché, pas d'encodage vidéo), puis encodez une seule fois que chaque diapositive se construit et s'affiche correctement.

# 1. Images exactes — avec les props LIVRÉES. Prenez-en une dans l'état stabilisé de chaque diapositive :
npx remotion still Deck out/f-title.png --frame=20  --props='{"slides":[...]}'   # carte titre stabilisée
npx remotion still Deck out/f-mid.png   --frame=240 --props='{"slides":[...]}'   # diapositive contenu, puces construites
npx remotion still Deck out/f-end.png   --frame=899 --props='{"slides":[...]}'   # dernière image = durationInFrames - 1

# 2. Inspectez chaque PNG — FIDÉLITÉ (texte de la diapositive exact, chiffres/étiquettes corrects, couleurs/polices de marque appliquées)
#    ET artefacts (débordement de texte, corps trop petit, contenu en dehors des 90% centraux de recadrage sûr, police
#    manquante, faible contraste, puce prise en cours de construction là où la diapositive devrait être stabilisée).

# 3. Seulement après que les images sont vérifiées, encoder :
npx remotion render Deck out/deck.mp4 --props='{"slides":[...]}'

• Utilisez npx remotion compositions pour lire le durationInFrames/fps du diaporama et choisir l'image de fin ; échantillonnez une image à l'intérieur de chaque maintien de diapositive, pas sur une transition, pour juger l'état construit.
• Piloté par les données / par lots : vérifiez UN diaporama représentatif (diapositives réelles + narration) via des images avant de rendre chaque variante — attrapez un bug d'échelle typographique ou de débordement une fois, pas par diaporama.
• GIF de démonstration README gratuit : npx remotion render Deck out/demo.gif --codec=gif.

Avant de terminer :

1. npx remotion still rend proprement au titre, une diapositive de contenu et la dernière image — pas d'erreurs, pas de polices manquantes.
2. Le texte de la diapositive est exact, corps ≥ 28px en 1080p, contraste ≥ 4.5:1, tout le contenu dans les 90% centraux à chaque image.
3. Uniquement piloté par image — pas de Date.now() / Math.random() / timers de bibliothèque (déterminisme maintenu en CI).
4. Les props livrées rendent correctement (pas seulement defaultProps) — bonnes diapositives, narration montée, durées issues de l'audio.
5. MP4 complet encodé et jouable (voix + visuels verrouillés) ; (optionnel) GIF rendu pour le README.

Fichiers de référence

• references/slide-components.md — composants Remotion complets et exécutables Slide, BulletList échelonné, TitleCard animé et SectionDivider avec un thème partagé et une narration par diapositive montée via <Audio>.
• references/sequencing.md — le séquenceur complet du diaporama : calculateMetadata qui mesure chaque clip de narration et définit les durées totales + par diapositive, assemblage <TransitionSeries>, comptabilité du budget d'images de transition, et flux de données schéma JSON du diaporama → vidéo.