Bewegungsgrafik-Studio (selbstverbessernd)

Was macht Bewegungsgrafik-Studio (selbstverbessernd)?

Erstelle eine 20-40 s vertikale Bewegungsgrafik-Anzeige, die ein Senior-Motion-Designer unterschreiben würde: Frame 0 ist bereits in Bewegung, ein Trägerobjekt durchläuft den Film, Übergänge werden in der Bewegung geschnitten und geschwindigkeitsangepasst, und jeder Klick, jedes Ablegen und jeder Whoosh ist an ein gesprochenes Wort oder einen Musikbeat gebunden. Der Film ist eine einzelne HTML-Seite (GSAP-Timeline + reine Zeitfunktionen). Er wird bildgenau in MP4 gerendert, und Skripte prüfen ihn, bevor ihn jemand ansieht. Soundeffekte werden aus der eigenen Ereignisliste des Films platziert, sodass die Audio-Synchronisation per Konstruktion und nicht nach Gehör erfolgt.

Jeder Durchlauf: Lies zuerst references/lessons.md und references/runs.md. Beende mit der Retrospektive (Schritt 13). Der Skill verbessert sich nur, wenn du die Lektionen zurückschreibst.

0. Preflight (immer)

python scripts/preflight.py [--elevenlabs-mcp yes]   # übergib yes, wenn du ElevenLabs-Tools verbunden hast

Verwendete Pfade: scripts/..., references/... und templates/... sind relativ zu diesem Skill-Ordner ($SKILLS/motion-ad-studio). $MOTIONMAXXING ist der Engine-Ordner ($SKILLS/motionmaxxing; preflight gibt ihn aus), und $SEAM_GATE ist das optionale Seam-Gate-Skript, das preflight findet (oder übergib --seam-gate DATEI).

Benötigt	Warum	Wenn fehlend
motionmaxxing-Engine (Apache-2.0)	render.mjs (Frames → MP4), look.py Tor, lint.mjs Design-Lint, runtime/vendor/gsap.min.js	git clone https://github.com/Tejashmakwana/motionmaxxing neben diesem Skill, oder setze MOTIONMAXXING
ffmpeg + ffprobe, Node 18+, Chrome/Chromium/Edge	rendern, untersuchen, mischen	installieren; setze CHROME_PATH, wenn Chrome nicht automatisch gefunden wird
Python 3.9+ mit numpy + Pillow	Beats, Synth-Bett, Mischen, Sheets	pip install numpy pillow
faster-whisper (optional)	Wort-Zeitstempel für wortgebundene Zeitsteuerung	pip install faster-whisper, oder jeder Aligner, der Wort-Start-/Endzeiten liefert
Seam Gate (optional)	beweist, dass jeder Übergang geschwindigkeitsangepasst ist	HyperFrames motion-doctrine + patches/seam-gate-camera-overlap.patch
ElevenLabs (optional, empfohlen)	ausdrucksstarke Sprachausgabe, komponierte Musik, benutzerdefinierte SFX	siehe nächster Abschnitt

ElevenLabs ist optional: Benachrichtige den Benutzer einmal, blockiere nie

Wenn preflight den HINWEIS ausgibt (kein API-Key und du hast keine ElevenLabs-Tools), leite ihn an den Benutzer in seiner Sprache vor dem Audio-Schritt in einer kurzen Nachricht weiter und lass ihn wählen:

• verbinden: Sie fügen einen ELEVENLABS_API_KEY hinzu oder verbinden den ElevenLabs MCP-Server. Führe preflight erneut aus.
• fortfahren: Baue den vollständigen Film mit dem Pfad ohne Schlüssel (siehe unten). Sage einmal im Lieferhinweis, dass ElevenLabs die Qualität von Sprachausgabe und Musik verbessern würde. Frage nicht erneut im selben Projekt. Wenn du nicht fragen kannst (Stapel- oder nicht-interaktiver Durchlauf), fahre ohne fort und setze die Empfehlung in NOTE.md.

Ebene	Mit ElevenLabs	Ohne (wird trotzdem ausgeliefert)
Sprachausgabe	TTS mit Emotions-Tags, 2 Takes, wähle einen	die eigene Aufnahme des Benutzers (am besten), oder eine lokale/OS-TTS-Führungsstimme; oder ein musikgeführter Film ohne Sprachausgabe
Musik	Musik, die auf die Filmlänge generiert wird, Drop auf den Höhepunkt	scripts/synth_bed.py (prozedural, exaktes Beat-Raster), oder ein Track, für den der Benutzer die Rechte hat
SFX	1-3 Hero-Samples (Peitsche, Whoosh, Tippen)	scripts/mix_events.py synthetisiert jedes SFX lokal
Wortzeiten	Sprach-zu-Text mit Zeitstempeln (oder TTS-Zeitstempel)	scripts/words.py (lokales faster-whisper)

Details, Aufforderungen, Kosteneinsparungen und Lizenzregeln: references/audio-providers.md.

Pipeline

1. Arbeitsbereich. python scripts/new_film.py <projekt> kopiert das One-Take-Kit, die GSAP-Laufzeit und lokale Schriftarten. Rendere ein Standbild des unberührten Demos, um die Toolchain zu beweisen: node $MOTIONMAXXING/scripts/render.mjs <projekt>/film/index.html --still 1.2,16.4 <projekt>/stills.

2. Brand-Kit. Besorge die offiziellen Logodateien vom Benutzer und beschneide jede auf ihre Alpha-Bounding-Box. Wenn ein Träger in das Logo andocken soll, messe die Sub-Glyph-Rechtecke. Nimm Farben durch Zählen von #hex im Site-CSS und Schriftarten als lokales woff2 (scripts/fetch_fonts.py). Verwende den CTA-Kanal, den die Marke tatsächlich nutzt. Zeichne oder nähere ein Logo nie an: Frage danach.

3. Eine Idee + ein neuer Stil. Schreibe nur eine Idee, die diese Marke filmen könnte. Der Logo-Abdeckungstest: Verstecke das Logo und der Film sollte trotzdem auf diese Marke verweisen. Schreibe drei Richtungen, streiche zwei und wähle einen Stil, der sich von der letzten Zeile von references/runs.md UNTERSCHEIDET.

4. Hook. Schreibe 3 Varianten unter 12 Wörtern (Frage, Verneinung, Spezifität, Geschichte) und wähle eine aus. Frame 0 ist bereits geschäftig und in Bewegung, der Hook ist bis Frame 1 auf dem Bildschirm, und nichts blendet aus Schwarz ein.

5. Sprachausgabe. Schreibe etwa 2,5 Wörter/s (30 s ≈ 70-75 Wörter). Wenn das TTS Emotions-Tags unterstützt, markiere jede Zeile ([curious] [confident] [energetic] [playfully] [warmly]). Generiere oder nimm sie auf, trimme lange Pausen, passe die Länge mit atempo ≤ 1,1 an, dann erhalte Wortzeiten: python scripts/words.py audio audio/vo.wav --lang <code>. Whisper gibt dir nur ZEITEN. Der Untertiteltext stammt immer vom genehmigten Skript.

6. Musik. Generiere (Länge + BPM + „Drop bei <Höhepunkt s>”), lizenziere einen Track oder führe aus python scripts/synth_bed.py --bpm 120 --dur 32 --drop 15.8 --out audio/bed.wav. Erhalte das Raster mit python scripts/beats.py audio/music.mp3 audio/beats.json (synth_bed schreibt eine exakte .beats.json). Trimme den Musik- Kopf so, dass der Drop auf dem Höhepunkt-VO-Wort landet: Filmbeats k = erster_beat - trim + k·periode.

7. STORYBOARD.md + ledger.json (templates/one-take/ enthält ein ausgefülltes Beispiel). Enthalte:

   • die Seiten-Spezifikation, die Idee und die drei Richtungen;
   • ein Rhythmus-Blatt (Strecke / t / Energie 0-10 / Route / Musik);
   • eine Zeitsteuerungskarte: jedes Ereignis mit dem Wort w(i) oder Beat beat(k), an das es gebunden ist;
   • die Sprachausgabe und die Liste der illustrativen Daten;
   • das Hauptbuch: eine Zeile pro Naht (Exit/Achse + Richtung, Schnittzeit).

8. Bauen. Kopiere Muster aus dem Kit (references/one-take-kit.md):

   • Uhren w(i) / we(i) / beat(k);
   • Pro-Frame-Reihenfolge tl.seek → PRE (Kameras, bewegliche Anker) → Cursor (lese Live-Rechtecke) → UP (UI, die folgt);
   • keyframed 3D-Kamera und eine Cursor-Engine, die auf Live-DOM-Rechtecke zielt;
   • Tipp-/Text-/Klassen-Updater als reine Funktionen von t;
   • sfx()-Ereignisse und von der Kamera abgeleitete Whooshes.

   Vertrag, den der Renderer benötigt: #main trägt data-composition-id="main" data-width data-height data-duration. window.__seek / __duration / __timelines / __events / __player / __ready / __playerReady / __renderReady. Montage-Stil-Filme (geschichtete Szenen, flache UI, Logoträger): references/montage-kit.md.

9. Anschauen. Rendere 15-20 Standbilder (node $MOTIONMAXXING/scripts/render.mjs ... --still t1,t2,... stills), kacheln sie (python scripts/sheet.py stills sheet.jpg 6 220) und führe einen Bilddurchlauf durch: eine Zeile pro Frame, dann eine Fehlerliste. Behebe und wiederhole 2-3 Durchläufe.

   • Geometrie-Wahrheit (was wo ist, sichtbar, seine Deckkraft) kommt von node scripts/probe.mjs index.html "t1,t2" "#a,#b".
   • Text-Wahrheit kommt von einem Vollauflösungs-Crop: Bildanalyse liest herunterskalierte arabische und CJK-Schriftzeichen fälschlicherweise als „Tippfehler", die nicht vorhanden sind.

10. Seam Gate (empfohlen). Serve den Filmordner auf localhost, dann führe aus node "$SEAM_GATE" verify --ledger ledger.json --url http://127.0.0.1:<port> --comp-url http://127.0.0.1:<port>/index.html. Das Ziel ist 0 FEHLER. Zeilen, bei denen eine One-Take-Kamera-Peitsche beide Fenster auf dem Bildschirm hält, benötigen "overlap": "camera" plus den Patch in patches/. Stoppe den Server danach. Siehe references/qa-gates.md.

11. Mischen. Jedes SFX lebt in window.__events ({t, type:'sfx', name, gain, dur?, speed?}).

    • Entleere sie mit node $MOTIONMAXXING/scripts/render.mjs index.html --still <t> ev, was ev/events.json schreibt.
    • Mische: python scripts/mix_events.py --events ev/events.json [--vo vo.wav --vo-at 0.10] [--music bed.wav --music-trim s] --dur <s> --out audio/mix.wav [--music-db -24] [--tp -2.5] [--whip/--whoosh/--typing samples] [--lift t0:t1:dB] [--fade t].
    • Pegel: Sprachausgabe bei -18 dBFS RMS, Musik bei -30 mit Ducking unter der Sprachausgabe, Whooshes spitzenausgerichtet zum schnellsten Frame der Kamera, zwei Durchgänge loudnorm auf -14 LUFS / TP ≤ -1.

12. Rendern + Tore + liefern.

    • Rendern: node $MOTIONMAXXING/scripts/render.mjs index.html <NEUER-name>.mp4 --audio ../audio/mix.wav --crf 17 --grain 0.03. Verwende einen neuen Ausgabenamen für jeden Versuch: Zwei Renderings in eine Datei beschädigen sie.
    • ffmpeg -v error -i x.mp4 -f null - darf nichts ausgeben. Dann führe aus python $MOTIONMAXXING/scripts/look.py x.mp4 --out look --expect <dur> --expect-audio (G0/G2/G3/G5 BESTANDEN) und node $MOTIONMAXXING/scripts/lint.mjs index.html.
    • Liefern: das 9:16-Master, ein 4:5-Crop (crop=1080:1350:0:200 sobald das Layout geprüft ist), 2-3 Cover-PNGs, NOTE.md (Idee, Zeitsteuerungskarte, echte vs. illustrative Daten, Audioquellen + Lizenzen, Tor-Nummern, was zu verbessern ist) und ein project/-Ordner (Film + Audio + Skripte).
    • Aufräumen: Stoppe Server und verwaistes Headless-Chrome.

13. Retrospektive (VERPFLICHTEND, vor deiner endgültigen Antwort). Füge datierte Regel + warum-Lektionen an references/lessons.md an. Füge eine Zeile zu references/runs.md hinzu (Datum, Produkttyp, Stil, Länge, Tor-Nummern, Urteil sobald bekannt). Patche diese Datei, ein Skript oder das Kit, wenn sich ein Schritt geändert hat. Wenn der Benutzer später reagiert, zeichne das Urteil auf. Lektionen enthalten nur Methoden, niemals Kundennamen oder private Daten.

Qualitätslatte

• Hook: Echte Kundenformulierung oder eine Neugierlücke. Frame 0 in Bewegung, der Hook bis Frame 1 lesbar, kein Einblenden aus Schwarz.
• Kontinuität: Ein Träger durch den Film (Cursor, Chip, Logo-Marke), keine Überblendungen und 2-3 Übergangstypen wiederholt. Schnitte erfolgen mittendrin in der Bewegung und geschwindigkeitsangepasst. Behalte eine aktuelle Richtung bei: für „nächstes", RTL-Filme bewegen Inhalte links→rechts und LTR-Filme rechts→links. Reservierte Vektoren werden für Bedeutung ausgegeben.
• Zeitbindung: Jeder Klick, jedes Ablegen und Landen sitzt auf w(i) oder beat(k), und der Musik-Drop sitzt auf einem VO-Wort. Whooshes leiten sich von der Kamerageschwindigkeit ab. Die Zeitsteuerungskarte listet jedes Ereignis und woran es gebunden ist auf.
• Kein müßiges Wackeln: Jedes Halten hat eine Kamerabewegung mit Absicht, eine inszenierte Enthüllung oder Live-UI. Stille gehört nur kurz vor einem Höhepunkt.
• Sicherheitszonen (1080×1920):
  • bezahlte Meta-Platzierungen: lesbarer Text in y 270-1250 und x 60-960 (die rechten 120 px sind Buttons);
  • organische Reels/TikTok: halte die unteren 320-370 px frei;
  • setze die Untertitel-Schiene unter die UI-Panels, niemals über einen Komponisten;
  • die Fall-Schiene zeigt Wörter, die das Bild bereits zeigt.
• Ende: Wortmarke plus ein CTA im echten Kanal der Marke. Halte das Ende 0,6-1,4 s und der letzte Schuss ≤ 25 % des Films.
• Ehrlichkeit: Deklariere illustrative Daten in NOTE.md. Erfinde niemals Leistungsbehauptungen, Preise oder Testimonials.
• Ziele: look.py G0/G2/G3/G5 BESTANDEN, Bewegungsenergie ≥ 5/255 mittlere Luma-Änderung (dunkle UI-Filme liegen nahe 2), Schnitt-Synchronisation ≥ 35 % (der gemessene Profi-Benchmark), -14 LUFS ± 0,5 mit True Peak ≤ -1 dBTP, 0 Dekodierungsfehler.

Plattformhinweise

• Hintergrundaufträge auf Windows git-bash: rufe node.exe auf, nicht den node winpty-Alias („stdin is not a tty").
• Ein ESM-Import eines absoluten Windows-Pfads benötigt file:///C:/....
• Headless-Chrome leckt aus unterbrochenen Durchläufen. Liste am Ende Browser auf, die mit --headless=new und --remote-debugging-port=0 gestartet wurden, deren Eltern verschwunden sind, und töte die Wurzel mit ihrem Baum.
• Rendergeschwindigkeit: flache UI ≈ 4 min pro 35 s bei 1080×1920. Eine 3D-Welt ≈ 4-5 min bei ~4 fps, aber nur wenn die 3D-Schicht- Anzahl klein bleibt.

Dateien

• scripts/:
  • preflight.py: Abhängigkeiten und ElevenLabs-Hinweis;
  • new_film.py: Gerüst eines Projekts;
  • fetch_fonts.py: lokales woff2;
  • words.py: Wortzeiten;
  • beats.py: Beat-Raster und Drop;
  • synth_bed.py: Musik ohne Schlüssel;
  • mix_events.py: ereignisgesteuertes Mischen;
  • sheet.py: Kontaktbogen;
  • probe.mjs: Live-Geometrie.
• templates/one-take/: der vollständige One-Take-3D-Kamera-Film als ausführbares Demo (fiktives Produkt, arabische RTL-Kopie), mit STORYBOARD.md und ledger.json.
• references/:
  • research.md: Landschaftsumfrage, vorgelagerte Skills, Sicherheitshinweise, Plattform-Spezifikationen;
  • lessons.md, runs.md: das selbstlernende Gedächtnis;
  • audio-providers.md, one-take-kit.md, montage-kit.md, qa-gates.md.
• patches/seam-gate-camera-overlap.patch: optionales Seam-Gate-Regelwerk für One-Take-Kamera-Filme.