MrIago/whiteboard-explainer-video

Vidéo explicative de tableau blanc

Un tableau blanc qui se dessine pendant que le narrateur parle. La personne repart avec la carte complète en tête.

Ce qui fait le style, et qui ne peut pas être coupé :

• Tout se dessine au moment où la voix parle de cette chose. Rien n'apparaît prêt.
• Un seul tableau : la caméra se promène et ce qui a été expliqué reste en place.
• Le zoom arrière final montre le tableau entier et devient le résumé de la vidéo. Il ne fonctionne que si la carte est planifiée avant de dessiner.
• S'il existe une app ou quelque chose de réel, l'enregistrement d'écran dans une fenêtre dessinée prouve ce que le dessin affirme.

SD ci-dessous est le dossier de cette compétence. Commandes : node "$SD/scripts/...".

Avant de commencer

1. node "$SD/scripts/config.mjs". Sans clé, demandez à la personne une des suivantes et sauvegardez sans répéter la valeur dans le chat :
   • OpenRouter (openrouter.ai/keys), qui fait voix et transcription : node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=...
   • ElevenLabs (elevenlabs.io/app/settings/api-keys) : node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
2. Nécessite Node 20+ et ffmpeg. S'il manque quelque chose : dites comment l'installer sur son système.
3. Avant de construire, combinez : sujet, public cible, durée, langue et ce que la vidéo doit clarifier. Une fois la demande claire, suivez sans poser de questions.

L'ordre de production

#	Étape	Résultat
1	node "$SD/scripts/new-project.mjs" <dossier>	projet Remotion
2	Script en courts extraits, un sujet par extrait, sans numéro inventé	script/script.md
3	Vidéo de plus d'1 min : 3 échantillons (narrate.mjs <dossier> --samples "première phrase") et la personne choisit. Enregistrez dans script/voice.json. Test court utilise la valeur par défaut	la voix
4	node "$SD/scripts/narrate.mjs" <dossier>	public/audio/, src/data/narration.json
5	Enchaîner les extraits dans src/sections.ts	ligne de temps
6	Carte du monde : une région par extrait, regroupées par partie de la vidéo	constantes R_*
7	Une région à la fois : dessiner, ancrer sur les mots, vérifier avec un still	src/scenes/*.tsx
8	Caméra et fermeture	src/Video.tsx
9	npx remotion studio src/index.ts pour que la personne regarde, si elle veut réviser	ok
10	Rendu d'un morceau, planche, rendu entier, planche, loudness	out/video.mp4

La scène src/scenes/Example.tsx n'est qu'un modèle : supprimez-la et dessinez le tableau du sujet. Chaque vidéo a son propre dessin.

Lisez references/method.md avant l'étape 6. S'il y a un enregistrement d'écran dans la vidéo, lisez aussi references/screens.md.

Script

**s01**
Texte parlé de l'extrait, en un seul paragraphe.

• Phrase parlée, pas de texte écrit. Ponctuation simple : le tiret et les points de suspension créent un silence étrange.
• Écrire les nombres en toutes lettres lorsque la lecture importe.
• Chaque extrait doit donner un dessin. Si ce n'est pas dessinable, réécrivez.
• Pas de date dans la vidéo si elle doit durer, et chaque nombre a besoin d'une source.

Vérifier : vous ne regardez pas, alors lisez les planches

npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <dossier> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <dossier>/out/video.mp4 24    # planche : cherchez morceau répété et superposition
node "$SD/scripts/qa.mjs" scan  <dossier>/out/video.mp4       # secondes immobiles, cadre noir, cadre qui clignote
node "$SD/scripts/qa.mjs" loud  <dossier>/out/video.mp4       # visez -14 à -16 LUFS, pic jusqu'à -1 dBTP

Le scan mesure ce que l'œil ressent : au-dessus de 5% d'immobilité, la vidéo ressemble à un diaporama. Corrigez avant de livrer, même en test, avec plus d'éléments par phrase et des clés de caméra dans les détails ; la respiration de la caméra seule compte comme immobile.

Ouvrez les images. Ne dites pas que c'est bien sans avoir vu la planche et mesuré l'audio.

N'utilisez que l'effet de useCurrentFrame : les transition et animation CSS ne sortent pas dans le rendu.