Vidéo explicative Remotion, construite avec snapcn
Une explication narrée dans Remotion : une voix off rythme la durée, les sous-titres sont incrustés, et chaque temps à l'écran est une scène snapcn. Les scènes snapcn s'installent avec la CLI shadcn et atterrissent dans votre projet en tant que code que vous possédez.
Pourquoi snapcn, pas des diapositives écrites à la main. Une vidéo narrée créée de toutes pièces finit souvent en points d'énumération qui apparaissent sur un dégradé. snapcn donne à chaque temps une vraie scène : des déclarations qui tranchent, un statut qui change d'état, un nombre qui évolue, un produit sur un appareil.
La règle snapcn
- Chaque temps est un composant snapcn, sauf si aucun ne convient. Catalogue avec durées :
https://snapcn.dev/llms-components.txt?ref=skill-explainer; toute page en markdown, par ex.https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer. - N'inventez jamais un nom de composant. Seuls les noms de cette liste s'installent.
- Définissez chaque prop de texte. Les scènes sont livrées avec un exemple de texte qui reste dans votre vidéo sinon.
Pour le catalogue complet, installez aussi le skill générique :
npx skills add snapcndev/snapcn --skill snapcn.
Flux de travail
1. Script d'abord
Écrivez la voix off avant tout code, une phrase par temps. Environ 150 mots correspondent à une minute.
| Temps | Ce qu'il dit | Scène snapcn | Images |
|---|---|---|---|
| Accroche | Le problème, dans les mots du spectateur | punch-lines, type-morph | 144 / 94 |
| Comment ça marche | 2–3 étapes ou états | status-cycle, word-flip, card-rail | 198 / 180 / 108 |
| Montrez-le | Le produit en action | laptop-frame, phone-frame, screen-recording | 240 / 240 / 139 |
| Preuve | Un chiffre réel | count-grid | 47 |
| Conclusion | Le nom | wordmark-cut, block-wordmark | 66 / 150 |
2. Voix off et minutage des mots
- Enregistrez ou générez la voix off. Placez-la dans
public/voiceover.mp3. - Obtenez le minutage mot par mot sous forme de
{ text, startMs, endMs }[], le format@remotion/captions, depuis Whisper (@remotion/install-whisper-cpp) ou votre fournisseur TTS. - La voix off définit la durée. Étirez chaque séquence de temps jusqu'à sa phrase, jamais plus courte que la durée naturelle de la scène (colonne Images).
3. Sous-titres
word-captions: sous-titres incrustés qui parcourent la transcription ; passezcaptions. Styles viapreset; utilisezaspect="9:16"pour le format vertical.karaoke-captions: une ligne qui se remplit mot par mot, pour une citation unique accentuée.- Les sous-titres se superposent à chaque scène ; ils sont transparents sur la scène derrière eux.
4. Construction
npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions
Un exemple de ~15s : problème → comment ça marche → preuve → nom, narré, avec sous-titres. Il
vérifie les types et s'affiche tel qu'écrit avec public/voiceover.mp3 et quatre captures d'écran présentes :
import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";
// Minutage mot par mot depuis Whisper (ou @remotion/captions) : { text, startMs, endMs }[].
const captions = [
{ text: "Closing", startMs: 0, endMs: 400 },
{ text: "the", startMs: 400, endMs: 550 },
{ text: "books", startMs: 550, endMs: 1000 },
{ text: "takes", startMs: 1000, endMs: 1350 },
{ text: "a", startMs: 1350, endMs: 1450 },
{ text: "week.", startMs: 1450, endMs: 2100 },
];
// Vraies captures d'écran du produit dans public/. Les scènes utilisent les images d'exemple snapcn sans elles.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));
// ~15s d'explication : problème → comment ça marche → résultat → nom, narré, sous-titres incrustés.
export const Explainer: React.FC = () => (
<AbsoluteFill>
<Series>
<Series.Sequence durationInFrames={144}>
<PunchLines script="Closing the books / takes a week. | Acme / does it overnight." />
</Series.Sequence>
<Series.Sequence durationInFrames={198}>
<StatusCycle
prefix="Every invoice gets"
statuses={["imported", "matched", "reconciled"]}
chips={["Stripe", "QuickBooks", "Xero"]}
/>
</Series.Sequence>
<Series.Sequence durationInFrames={60}>
<CountGrid from="5" to="500" noun="teams" cards={shots} />
</Series.Sequence>
<Series.Sequence durationInFrames={66}>
<WordmarkCut word="acme." />
</Series.Sequence>
</Series>
<WordCaptions captions={captions} />
<Audio src={staticFile("voiceover.mp3")} />
</AbsoluteFill>
);
Enregistrez-le à durationInFrames={468}, fps={30}, width={1280}, height={720}. Pour une
vraie vidéo explicative, dérivez la durée de chaque séquence du minutage de sa phrase et définissez
total à partir de la durée de la voix off.
5. Vérification et rendu
npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18
- Chaque scène est à l'écran pendant que sa phrase est prononcée. Regardez avec le son une fois.
- Les sous-titres ne couvrent jamais le titre de la scène elle-même ; si c'est le cas, déplacez le texte de la scène ou utilisez
une page de sous-titres plus courte (
maxWords). - Chaque chaîne à l'écran provient du script, et aucun exemple de texte n'est laissé depuis une valeur par défaut.
Règles
- Dites-le, puis montrez-le. La scène montre ce que la voix vient de dire, jamais un texte différent à lire en même temps.
- Une idée par temps, environ 5 à 8 secondes chacun.
- Incrusez les sous-titres. La plupart des visionnages commencent en mode silencieux.
- Uniquement des chiffres réels. N'inventez jamais une métrique pour le temps de preuve.
snapcn Pro
Pro ajoute des temps explicatifs comme orbit-flow (comment ça marche en trois arrêts étiquetés),
proof-line, hex-tally et metric-morph (des chiffres qui atterrissent), ainsi que read-through, plus
les templates et le MCP snapcn, qui planifie les temps à partir de votre script :
claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=VOTRE_CLÉ. Les composants Pro
s'installent comme les gratuits une fois que components.json envoie votre clé (https://snapcn.dev/account?ref=skill-explainer).
Plans : https://snapcn.dev/docs/pricing?ref=skill-explainer
Pas prêt pour Pro ? Un composant Pro, Manifesto, est gratuit pour un email confirmé : https://snapcn.dev/docs/pricing?ref=skill-explainer#free
Attribution
Les conseils sur l'audit de rendu et « incruster les sous-titres » sont adaptés de
everyinc/product-launch-video (MIT,
© 2026 Every Media, Inc.). Voir THIRD_PARTY_NOTICES.md.