MrIago/whiteboard-explainer-video

Whiteboard-Erklärvideo

Ein Whiteboard, das sich zeichnet, während der Erzähler spricht. Der Zuschauer geht mit der gesamten Karte im Kopf.

Was den Stil ausmacht und nicht weggelassen werden darf:

• Alles zeichnet sich genau dann, wenn die Stimme darüber spricht. Nichts erscheint fertig.
• Eine einzige Tafel: Die Kamera wandert, und das bereits Erklärte bleibt an seinem Platz.
• Der abschließende Zoom-Out zeigt die gesamte Tafel und wird zur Zusammenfassung des Videos. Er funktioniert nur, wenn die Karte vor dem Zeichnen geplant wurde.
• Wenn es eine echte App oder ein reales Objekt gibt, beweist ein Screenrecording in einem gezeichneten Fenster, was die Zeichnung behauptet.

SD unten ist der Ordner dieser Skill. Befehle: node "$SD/scripts/...".

Bevor es losgeht

1. node "$SD/scripts/config.mjs". Ohne Schlüssel: Bitte die Person um einen der folgenden und speichere ihn, ohne den Wert im Chat zu wiederholen:
   • OpenRouter (openrouter.ai/keys), der Stimme und Transkription erledigt: node "$SD/scripts/config.mjs" OPENROUTER_API_KEY=...
   • ElevenLabs (elevenlabs.io/app/settings/api-keys): node "$SD/scripts/config.mjs" ELEVENLABS_API_KEY=...
2. Benötigt Node 20+ und ffmpeg. Fehlt etwas: Sage, wie man es auf ihrem System installiert.
3. Vor dem Bauen abstimmen: Thema, Zielgruppe, Dauer, Sprache und was das Video klar machen soll. Sobald die Anfrage klar ist, ohne Nachfragen weitermachen.

Die Produktionsreihenfolge

#	Schritt	Ausgabe
1	node "$SD/scripts/new-project.mjs" <ordner>	Remotion-Projekt
2	Skript in kurze Abschnitte, ein Thema pro Abschnitt, ohne erfundene Nummern	script/script.md
3	Video über 1 Min: 3 Proben (narrate.mjs <ordner> --samples "erster Satz") und die Person wählt aus. In script/voice.json speichern. Kurzer Test nutzt die Standardstimme	die Stimme
4	node "$SD/scripts/narrate.mjs" <ordner>	public/audio/, src/data/narration.json
5	Abschnitte in src/sections.ts verketten	Zeitachse
6	Weltkarte: eine Region pro Abschnitt, gruppiert nach Videoteil	Konstanten R_*
7	Eine Region nach der anderen: zeichnen, an Wörtern verankern, mit einem Still prüfen	src/scenes/*.tsx
8	Kamera und Schlusszoom	src/Video.tsx
9	npx remotion studio src/index.ts damit die Person zuschauen kann, falls sie nachprüfen möchte	ok
10	Render eines Teilstücks, Überprüfung, Vollrender, Überprüfung, Lautstärke	out/video.mp4

Die Szene src/scenes/Example.tsx ist nur eine Vorlage: Lösche sie und zeichne die Tafel zum Thema. Jedes Video hat seine eigene Zeichnung.

Lies references/method.md vor Schritt 6. Enthält das Video einen Screenrecording: Lies auch references/screens.md.

Skript

**s01**
Gesprochener Text des Abschnitts, in einem einzigen Absatz.

• Gesprochener Satz, kein Text. Einfache Zeichensetzung: Gedankenstrich und Auslassungspunkte erzeugen seltsame Stille.
• Zahlen ausschreiben, wenn die Lesart wichtig ist.
• Jeder Abschnitt muss eine Zeichnung ergeben. Wenn sich nichts zeichnen lässt, umschreiben.
• Kein Datum im Video, wenn es länger halten soll, und jede Zahl braucht eine Quelle.

Überprüfen: Du siehst nicht zu, also lies die Tafeln

npx remotion still src/index.ts Whiteboard /tmp/f.png --frame=N --scale=0.5
node "$SD/scripts/render.mjs" <ordner> --frames=0-299
node "$SD/scripts/qa.mjs" sheet <ordner>/out/video.mp4 24    # Überprüfung: Suche nach Wiederholungen und Überlappungen
node "$SD/scripts/qa.mjs" scan  <ordner>/out/video.mp4       # Stehende Sekunden, schwarzes Bild, flackerndes Bild
node "$SD/scripts/qa.mjs" loud  <ordner>/out/video.mp4       # Ziel -14 bis -16 LUFS, Spitze bis -1 dBTP

Der scan misst, was das Auge fühlt: Über 5% Stillstand wirkt das Video wie eine Diashow. Korrigiere vor der Abgabe, selbst im Test, mit mehr Bildern pro Satz und Kamerafahrten in die Details; die bloße Atmung der Kamera zählt als Stillstand.

Öffne die Bilder. Sage nicht, dass es gut aussieht, ohne die Überprüfung gesehen und das Audio gemessen zu haben.

Verwende nur useCurrentFrame für Effekte: CSS transition und animation erscheinen nicht im gerenderten Video.