mr0ibrahim/motion-graphics

Motion Graphics Studio

Videos werden aus Code gerendert: Eine HTML-Seite mit einer reinen seek(t)-Funktion wird Bild für Bild mit Playwright aufgenommen und mit ffmpeg codiert. Text, UI, Diagramme und Bewegungen sind immer Code. KI-Modelle liefern Illustrationen, gefilmte Platten und Sprachausgabe (references/ai-assets.md).

Stufen-Gates (niemals überspringen; Genehmigung bei jeder ✋ einholen)

1. Briefing: Ziel, Zielgruppe, Plattform/Format, Länge, Sprache + Dialekt, CTA, Marke, VO ja/nein, Fakten. Wähle das Genre (references/genres.md); es bestimmt die Struktur, Energie-Voreinstellung und den Hook.
2. Konzepte ✋: drei wirklich unterschiedliche Ideen, jede als Einzeiler plus ihr Hook. Der Benutzer wählt eine aus.
3. Skript + Storyboard ✋: ein Beat-Sheet (eine Botschaft pro Szene, Hook ≤ 1,5 s), die Style-Bibel und die Helden-Assets (GenerateImage → cut2.py). Erstelle die Szenen als Styleframes, dann node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…" ergibt html/png/pdf/json aus dem Film selbst (references/storyboard.md). Es wird nichts vollständig animiert, bis das Storyboard genehmigt ist.
4. Animatic ✋: node scripts/render.mjs film.html checks_layout.txt --check muss 0 Layout-Probleme, 0 verpasste Cues und 0 Seitenfehler ergeben. Erstelle dann einen 30-fps-Entwurf ohne Unschärfe (render_chunks.mjs film.html out_draft 30 1) mit der SFX-Mischung, für das Timing-Review.
5. Finale: render_chunks.mjs film.html out 60 4 → sfx.mjs → mix.sh → export.sh → qa.sh für das Master und die Social-Datei. Dann sieh dir das Kontaktblatt und die Übergangsübersicht an (references/render-qa.md). Nur gezielte Überarbeitungen nach diesem Schritt: Ändere nur das, was gewünscht wurde.

Harte Regeln (jede ist eine Lehre aus einem echten Fehler)

1. Korn ist statisch: Einmal gezeichneter Grain-Kachel mit Seed, niemals pro Frame neu randomisiert. Der FLICKER-Test des Stutter-Scans muss bestanden sein.
2. Standardmäßig keine Musik: Bewegungs-synchronisierte SFX + VO. Musik nur auf Anfrage und lizenziert (references/sound.md).
3. Ein Bewegungssystem: Dauern nur aus den ENERGY-Tokens. Federn z ≥ 0,78 (Überschwingen ≤ 2 %), kein Wackeln, kein Hüpfen bei Schrift, Bögen für lange Bewegungen, ein Crossfade bei jedem Zustandswechsel (references/motion-system.md).
4. Mit dem Chunk-Renderer rendern (render_chunks.mjs): ein frischer Browser pro Chunk, Wiederholungen und Fortsetzung durch erneutes Ausführen desselben Befehls. Niemals einen langen Single-Process-Render für Filme über ~20 s.
5. Richtig transkribieren: align.py (large-v3, VAD an/aus Durchläufe, Lücken-Durchläufe, auf das Skript forciert) → words.json. Niemals einen einzelnen Whisper-Durchlauf verwenden.
6. Untertitel gehören zu ihrer Szene: Sie werden mit ihr ausgeblendet und weggeschoben und verwenden ihre Farben. Ein Element ist 80 % an beim gesprochenen Wort (±2 Frames).
7. Stil: illustriert, konsistente Charaktere (ein Referenzbild → jede Pose). Tech-Erklärvideos verwenden Konzept-Visuals (Flussdiagramme, Diagramme, Tabellen, Vergleiche, Zeitleisten), geplant pro gesprochener Phrase, nicht dekorativ.
8. Zwei Exporte: das 60-fps-Master + eine 30-fps-Handy/Social-Datei. Versende sie als Anhänge. Ein direkter Download-Link, ein Upload oder ein Beitrag nur mit ausdrücklicher Zustimmung des Benutzers.
9. Langform (3–10 Min.): Kapitel planen, Szenenanzahl (≈ 1 pro 4–7 s), ein Pacing-Variationszyklus und visuelle Abwechslung, eine Seite pro Kapitel (references/genres.md → Langform).
10. Das Paket aufgeteilt lassen: scripts/, references/, templates/. Keine einzige riesige Datei erstellen.

Außerdem: Arabisch animiert nur ganze Wörter (references/arabic-rtl.md) · kein KI-generierter Text im Frame · fiktive Produkte, Preise und Bewertungen sind mit SAMPLE gekennzeichnet · Fakten stammen nur vom Benutzer · der Held füllt 60–70 % des Frames · ≥ 3 verschiedene Übergänge in einer Anzeige, niemals zweimal hintereinander denselben (references/transitions.md) · keine Stille über 1 s.

Standardeinstellungen (sage, was du gewählt hast)

9:16 1080×1920 für Social, 16:9 für Web/YouTube · Energie ad für Anzeigen und Reels, explainer für VO-Erklärvideos, calm für Luxus/lange Kapitel · 60 fps Master + 30 fps Social · −14 LUFS, echter Spitzenwert ≤ −1,5 dBTP · SFX + VO, keine Musik · statisches Korn 0,06 · illustrierter flacher Stil, eine Akzentfarbe, Noto Kufi Arabisch / Cairo + Figtree.

Einrichtung

Alle scripts/, templates/ und references/-Pfade sind relativ zum eigenen Ordner dieses Skills (der Ordner, der diese SKILL.md enthält, wo auch immer er installiert wurde: .claude/skills/motion-graphics, .agents/skills/motion-graphics, ~/.cursor/skills/motion-graphics, …). Nenne ihn $SKILL_DIR und führe Skripte als node "$SKILL_DIR/scripts/render.mjs" … aus dem Projektordner aus. Führe npm i einmal innerhalb von $SKILL_DIR aus. npm i (Playwright), dann npx playwright install chromium einmal. Du brauchst auch ffmpeg/ffprobe, Python 3 mit numpy/scipy/pillow (QA, cut2) und pip install faster-whisper für align.py.

Arbeitsbeispiele (im GitHub-Repo mr0ibrahim/motion unter examples/, nicht beim Installieren kopiert): demo-ar/ (eine 13-sekündige Golf-Arabisch-App-Anzeige: RTL-Kinotypografie, KI-Charaktere, Parallaxe, Kamera-Push, Zoom/Push/Iris/Split) · demo/ (eine 10,5-sekündige englische SAMPLE-Anzeige).