jpoz/make-video

Was macht make-video?

Erstelle einen erzählten Film aus einer Eingabeaufforderung. Jeder Frame ist eine reine Funktion der Zeit t, gezeichnet auf einer Leinwand (@napi-rs/canvas) und codiert mit ffmpeg. Die Stimme wird lokal mit Kokoro generiert. Die Musik wird in Python synthetisiert. Jedes Bild ist zeitlich auf das Wort in der Stimme abgestimmt, das es benennt.

Der Ablauf ist festgelegt: Eingabeaufforderung → Storyboard (echte Stimme, echte Musik, ein echter Frame pro Szene) → der Benutzer iteriert über das Storyboard → finaler Render. Rendere den kompletten Film nicht, bevor der Benutzer das Storyboard genehmigt hat. Nimm in jedem Schritt echte Frames als Muster und behebe, was du siehst, bevor du es zeigst.

<skill> unten bezeichnet den Ordner, der diese SKILL.md enthält.

Voraussetzungen

node 20+, ffmpeg, uv (es führt die Python-Skripte aus und installiert ihre Abhängigkeiten) und python3. ./make.sh setup überprüft diese. Das Kokoro-Modell (~115 MB) wird einmalig beim ersten Sprachdurchlauf heruntergeladen, nach ~/.cache/make-video/models. Schriftarten werden nicht mitgeliefert: siehe references/fonts.md.

1. Verstehe den Film (aus der Eingabeaufforderung)

Lies, worum es in dem Film geht, bevor du eine Zeile schreibst: den PR, das Repository, die Dokumentation, die App, die Ankündigung. Finde die realen Dinge, die der Film zeigen kann: echte Bildschirme, echter Code, echte Ausgaben. Entscheide diese und frage den Benutzer nur nach dem, was du nicht selbst herausfinden kannst:

• Art und Länge. Feature-Intro oder -Ankündigung: 30–75 s, 6–10 Szenen, echte App-Bildschirme. Erklärvideo: 2–6 min, Kapitel mit Titelkarten, Diagrammen und Code. Faustregel: 2,5 Wörter Sprache pro Sekunde.
• Zielgruppe und die eine Sache, die sie am Ende wissen oder tun müssen.
• Look. Die ink-Palette (fast schwarz, roter Akzent) oder navy (tiefes Blau, Himmel und Bernstein) in theme.mjs, oder die eigenen Farben und Schriftarten des Produkts.
• Musikstil. pop (hell, fröhlich) oder chip (leise Chiptune), oder none.

2. Erstelle das Projekt

<skill>/scripts/new-project.sh ~/Developer/<topic>-video <topic>-video

Dies kopiert <skill>/template (einen funktionierenden 30-Sekunden-Beispielfilm) und führt npm install aus. Besorge die Schriftarten (references/fonts.md). Das Projekt ist in sich geschlossen. Bearbeite diese Dateien:

Datei	Was es ist
video.json	Das Skript: Szenen, Sprachzeilen, Cues, Timing, Musik, die Kurzbeschreibung für das Storyboard
scenes/*.mjs	Eine Zeichenfunktion pro Szenen-ID
theme.mjs	Palette, Schriftarten, Hintergrund
music.py	Die Partitur (Akkorde, Hooks, Instrumente), wenn die Standardeinstellungen nicht passen
shots/plan.mjs	Echte App-Bildschirmaufnahmen, die erstellt werden sollen, wenn der Film eine App zeigt

Bearbeite nicht timeline.json. timeline.py generiert es.

3. Schreibe das Skript (video.json)

Lies zuerst references/script.md. Kurz gefasst: eine Idee pro Szene, kurze einfache Sätze, mit einem Aufhänger beginnen und mit dem enden, was als Nächstes zu tun ist. Eine Zeile ist ein String oder {"text", "say"}, wenn sich Bildunterschrift und gesprochene Form unterscheiden ("video.json" wird "video dot jason" ausgesprochen). Ein Cue benennt das Wort, auf dem ein Bild landet: {"label": "badge", "at": "badge", "sound": "chime"}. Setze einen Cue auf jedes wichtige Erscheinen. Fülle brief aus (Aufmacher, Ansatz, offene Fragen); das Storyboard zeigt es an.

4. Zeichne die Szenen (scenes/*.mjs)

Lies references/drawing.md (die Szenen-API, Hilfsfunktionen, Layout- und Bewegungsregeln). Jede Szene erhält (ctx, t, S). Setze jedes Erscheinen auf S.cue(label) oder S.w('word'), und lasse jedes Element durch S.tout verschwinden. Verwende echtes Material:

• App-Bildschirme: nimm die echte Benutzeroberfläche mit shots/capture.mjs auf und zeige sie mit screens.mjs (Kamera, Cursor, Ringe). Siehe references/screens.md.
• Code: code.mjs liest die echte Datei zeilenweise, sodass ein Zitat nicht falsch sein kann.
• Programmausgaben: führe das echte Programm aus und zeichne seine echte Ausgabe. Zeichne keine Ausgabe, die du nicht gesehen hast.

Erstelle Muster während des Zeichnens. Führe nach jeder Szene ./make.sh scene <id> aus und schaue dir out/sheet.jpg an, bevor du zur nächsten Szene übergehst. Führe für jede knifflige Bewegung oder jeden Übergang ./make.sh clip A B aus und schaue dir out/clip.mp4 an. references/review.md enthält die Checkliste.

5. Das Storyboard: Hier iteriert der Benutzer

./make.sh storyboard

Dies führt aus: Sprachausgabe → Zeitlinie → Musik → Audio-Mix → ein Frame pro Szene → storyboard.html: eine in sich geschlossene Seite mit dem echten Sprach-Musik-Mix, einem Frame jeder Szene, dem Skript mit markierten Cue-Wörtern, den Zeitcodes und der Kurzbeschreibung. Beim Abspielen wird die aktuelle Szene und Zeile hervorgehoben.

Bevor du es zeigst, schaue dir jeden Frame in out/board/ an und behebe, was falsch ist. Gib dem Benutzer dann die Seite. Wenn deine Umgebung eine HTML-Seite oder ein Artefakt veröffentlichen kann, veröffentliche storyboard.html und teile den Link. Ansonsten gib den Dateipfad an, um ihn im Browser zu öffnen.

Iteriere dann mit dem Benutzer. Jede Änderung ist klein und schnell: bearbeite eine Zeile in video.json (nur die geänderten Zeilen werden neu vertont), verschiebe einen Cue, ändere die Energie einer Szene, gestalte neu, zeichne eine Szene neu. Führe dann ./make.sh storyboard erneut aus. Halte die offenen Fragen der Kurzbeschreibung auf dem neuesten Stand. Bleibe in dieser Schleife, bis der Benutzer das Storyboard genehmigt.

6. Der finale Render

Erst nach Genehmigung durch den Benutzer:

./make.sh film            # oder: ./make.sh film --blur 4   (Bewegungsunschärfe, ~4x langsamer)

Dies schreibt out/<name>.mp4 (1920×1080, 60 fps, AAC, Lautstärke −16 LUFS), out/<name>.srt und out/<name>.vtt. Überprüfe dann die echte Ausgabe, nicht den Code (siehe references/review.md, "Finaler Check"): ziehe Frames aus der codierten MP4-Datei, bestätige die Dauer und die Streams und höre den Mix an den Stellen, die sich geändert haben. Führe python3 storyboard.py --final aus, um die Storyboard-Seite den fertigen Film anzeigen zu lassen. Liefere die MP4-Datei, die Untertitel und das Storyboard aus. Wenn der Film eine Ankündigung ist, biete einen kurzen Beitrag an, der dazu passt, geschrieben aus demselben Skript.

Befehle

Befehl	Tut
./make.sh storyboard	Stimme, Zeitlinie, Musik, Mix, Board-Frames, storyboard.html
./make.sh scene ID [0.3,0.6,0.9]	Standbilder zu Bruchteilen einer Szene, plus out/sheet.jpg
./make.sh samples [24]	Standbilder verteilt über den gesamten Film, plus out/sheet.jpg
./make.sh stills 3,20.5	Standbilder zu exakten Sekunden, plus out/sheet.jpg
./make.sh clip A B	out/clip.mp4: Sekunden A bis B des echten Films, mit Ton
./make.sh voice / music / timeline	Nur ein Schritt
./make.sh film [--blur N]	Der finale Render und Mix
uv run tts.py --voices	Liste der Kokoro-Stimmen

Referenzen

• references/script.md: Wie man den Voice-Over und das gesamte video.json schreibt
• references/drawing.md: Die Szenen-API, die lib.mjs-Hilfsfunktionen, Layout, Bewegung, Szenenmuster
• references/screens.md: Aufnahme echter App-Bildschirme und Bewegung einer Kamera darüber
• references/audio.md: Stimmen, Musikstile, Cue-Klänge, der Mix, zusätzliches Audio
• references/review.md: Wie man Muster erstellt, die Feinschliff-Checkliste, der finale Check
• references/fonts.md: Wo man Schriftarten bekommt