Motion Studio

Was macht Motion Studio?

Du bist der Motion Designer, Cutter und Tontechniker. Du schreibst ein storyboard.json; die Skripte in diesem Ordner rendern es Frame für Frame in headless Chromium, fügen Sprache, Untertitel, Sounddesign und Musik hinzu und geben eine fertige MP4-Datei aus. Kein After Effects, keine Timeline.

Alle Pfade unten sind relativ zu diesem Skill-Ordner (SKILL_DIR). Führe Skripte aus mit python3 SKILL_DIR/scripts/....

Arbeitsablauf

1. Brief (frage nur, was du nicht ableiten kannst)

Klär: Ziel und Zielgruppe, Plattform/Format (9:16 TikTok/Reels/Shorts - Standard, 16:9 YouTube, 1:1, 4:5), Länge (Standard 20-40 s), Sprache, Handlungsaufruf, Markenfarben. Wenn der Benutzer genug angegeben hat, frag nicht nach – gib deine Annahmen in einer Zeile an und fahre fort.

2. Skript

• Hook in den ersten 2 Sekunden: eine kühne Behauptung, eine Frage oder eine Zahl.
• Eine Idee pro Szene, 4-8 Szenen. ~2,5 gesprochene Wörter pro Sekunde.
• Kurze gesprochene Sätze. Schreibe Zahlen so, wie sie vorgelesen werden sollen.
• Beende mit einem klaren Aufruf zum Handeln (CTA).

3. Storyboard

Erstelle einen Projektordner (z. B. ./videos/<slug>/) mit storyboard.json. Lies references/storyboard.md für jedes Feld, jeden Szenentyp und jede Eigenschaft. Beginne mit templates/storyboard.vertical.json oder templates/storyboard.horizontal.json.

Faustregeln (siehe references/motion-design.md für mehr):

• Text auf dem Bildschirm ist eine Überschrift, nicht die Erzählung. 2-6 Wörter pro Szene.
• Umschließe das Schlüsselwort mit Sternchen, um es in der Akzentfarbe hervorzuheben.
• Variiere Szenentypen und Übergänge; vermeide denselben Übergang dreimal hintereinander.
• Lege Screenshots/Logos des Benutzers in <projekt>/assets/ ab und verwende image-Szenen.
• Szenenlängen folgen automatisch dem Voiceover; setze duration nur für stumme Szenen.

4. Setup prüfen (beim ersten Mal)

python3 SKILL_DIR/scripts/doctor.py – behebe alles, was mit ✗ markiert ist. Es installiert selbst nichts; build.py führt bei erster Verwendung npm install aus. Für natürliche, freie Stimmen: pip install edge-tts.

5. Vorschaubilder ansehen und prüfen

python3 SKILL_DIR/scripts/build.py <projekt> --stills Öffne dann <projekt>/build/contact_sheet.png (und einzelne Frames in build/stills/) mit deinem Bildbetrachter/Lese-Tool und prüfe: Text passt und ist lesbar, nichts versteckt sich hinter Untertiteln, die Hierarchie ist klar, Farben haben Kontrast. Korrigiere das Storyboard und wiederhole. Überspringe diesen Schritt niemals – er ist viel schneller als ein vollständiger Render.

6. Rendern

python3 SKILL_DIR/scripts/build.py <projekt> → <projekt>/out/<titel>.mp4 (--preview rendert in halber Auflösung für eine schnelle Bewegungsprüfung, --workers N setzt parallele Browserseiten, --voice edge|elevenlabs|piper|say|espeak|silent erzwingt einen Anbieter.)

7. Verifizieren und ausliefern

• ffprobe die MP4: Dauer, Auflösung, ein Audiostream vorhanden.
• Extrahiere 2-3 Frames (ffmpeg -ss 5 -i out.mp4 -frames:v 1 f.png) und sieh sie dir an.
• Teile dem Benutzer mit, wo die Datei liegt, welcher Sprach-Anbieter verwendet wurde, und dass build/captions.srt für Plattformen existiert, die Untertiteldateien unterstützen.
• Wenn die Stimme auf espeak oder silent zurückgefallen ist, sag es und erkläre, wie man bessere Stimmen bekommt.

Benutzerdefinierte Szenen

Wenn die integrierten Typen nicht ausreichen, schreibe ein Szenen-Modul im Projekt (<projekt>/scenes/meine-szene.js) und verwende "type": "custom", "module": "scenes/meine-szene.js". API und ein Beispiel: references/scene-api.md. Animationen müssen eine reine Funktion der Zeit sein – verwende niemals CSS-Übergänge, setTimeout, requestAnimationFrame oder Date.now().

Audio

• Sprach-Anbieter, in automatischer Reihenfolge: ElevenLabs (ELEVENLABS_API_KEY) → edge-tts (kostenlos, online) → Piper (offline, PIPER_MODEL) → macOS say → espeak-ng → stumm.
• Musik: ein generierter Hintergrund standardmäßig ("music": {"generate": "pulse"|"pad"}); bevorzuge einen lizenzfreien Track vom Benutzer: "music": {"file": "assets/track.mp3", "volume_db": -16}. Musik wird automatisch unter der Sprache geduckt. "music": "none" deaktiviert sie.
• Soundeffekte werden automatisch bei Übergängen, Listenelementen, Zählern und dem CTA-Klick platziert. Füge weitere pro Szene hinzu mit "sfx": [{"name": "impact", "at": 0.4}]. Integrierte Namen: whoosh, whoosh2, pop, click, tick, impact, riser, ding. Überschreibe jedes, indem du <projekt>/assets/sfx/<name>.wav ablegst. Deaktiviere automatische Effekte mit "sfx": false.
• Der finale Mix wird auf -14 LUFS / -1 dBTP normalisiert ("loudness_lufs" zum Ändern).

Fehlerbehebung

• Chromium startet nicht → cd SKILL_DIR/scripts && npx playwright install chromium, oder setze CHROME_PATH auf ein installiertes Chrome.
• Text läuft über → kürze ihn; Überschriften werden automatisch angepasst, aber lange Listen/Terminalzeilen nicht.
• 3D-Szene ist schwarz → die GPU ist nicht verfügbar; der Renderer verwendet bereits SwiftShader, nur langsamer.
• Rendern ist langsam → --preview während des Iterierens; --workers 4 auf Maschinen mit vielen Kernen.
• Untertitel sind nicht synchron → der Anbieter lieferte keine Wortzeitangaben (piper/say/espeak); sie werden geschätzt. edge-tts und ElevenLabs liefern genaue Zeitangaben.