TaherZiad/montage-crew

Bang Motion — Motion Graphic, kein PPT

v1.19.0 · von Bang Tutorial · MIT. Änderungshistorie in CHANGELOG.md; Installation in README.md.

Dieses Skill ist für jeden KI-Coding-Agenten (offenes Agent Skills Format). Es enthält Regeln und Rezepte für Motion Graphics, die sich wie Videos bewegen, nicht wie Präsentationen – befolge sie, bevor du Code schreibst.

Voraussetzungen – nur Browser

Das abzuliefernde Artefakt (index.html) benötigt nur einen modernen Browser + Internet für CDN (GSAP, Schriftarten). Python und Node optional, nur für Arbeitswerkzeuge: scripts/serve.py (No-Cache-Server, nur bei lokalen Modulen nötig), puppeteer (automatische Schnappschüsse/Überprüfung, scripts/export-frames.mjs → MP4). Falls der Benutzer keines von beiden hat: (1) trotzdem eine einzelne HTML-Datei erstellen, per Doppelklick öffnen; (2) visuelle Überprüfung mit ?debug=1 (Scrub-Panel) und manuellen Screenshots zu jedem Schlüsselbild; (3) MP4 per Bildschirmaufnahme (OBS / Browser-Tab aufnehmen) – erkläre, dass Bildschirmaufnahmen Frames verlieren können und dass ein Frame-für-Frame-Rendering Node erfordert. Erstelle niemals ein Artefakt, das npm install zum ANSEHEN benötigt.

ffmpeg ebenfalls optional. Prüfe zuerst (ffmpeg -version); falls nicht vorhanden:

Bedarf	Mit ffmpeg	Ohne ffmpeg
VO-Synchronisation (Satz-/Absatzgrenzen)	silencedetect	scripts/vo-pauses.html – im Browser öffnen, Audio auswählen, SEG/PARA kopieren; Ergebnis identisch (Web Audio, keine Installation)
Audiodauer/-format	ffprobe	DUR-Wert aus vo-pauses.html; Browser spielt wav/mp3/m4a/ogg direkt ab
MP4-Export	PNGs aus export-frames.mjs zusammenfügen	Kein MP4 – Installation anbieten (winget install Gyan.FFmpeg / brew install ffmpeg) oder Bildschirm aufnehmen
Referenzvideos analysieren (Frames extrahieren)	fps= + tile=	Benutzer bitten, Screenshots zu Schlüsselbildern zu senden, oder Video im Browser öffnen und zu bestimmten Zeitpunkten abfotografieren

Ohne ffmpeg ist der Ablauf für Erklärvideos bis zur VO-Synchronisation vollständig; nur das MP4 benötigt eine Installation.

Player – nicht vorhanden, Autoplay, Loop

Standardmäßiges Artefakt: kein Panel/Player auf dem Bildschirm, startet sofort beim Öffnen und wiederholt von Anfang, wenn es endet (onComplete → play(0); bei Ton wird Audio mitgeloopt). Ausgeblendete Steuerung: R = Neustart, Leerzeichen = Pause. Scrub-Panel/Uhr nur mit ?debug=1 (Überprüfungswerkzeug), ?clean=1 unterdrückt Autoplay für den Export. Ton vorhanden? play() direkt versuchen; falls vom Browser blockiert, bei Frame 0 anhalten und beim ersten Klick starten – kein "Zum Starten tippen"-Text. Dies ist in beiden Startern verankert.

Strukturelle Verbote – mechanisch prüfbare Präsentationsfolien-Tests

Andere Modelle (und du, wenn müde) verfallen in dieses Muster, selbst nachdem sie die unten stehenden Regeln gelesen haben. Vor der Abgabe CODE prüfen, nicht Gefühl:

1. grep -c "class=\"scene\"\|\<section" index.html – wenn ≥ 3 Szenen als <section> mit autoAlpha/opacity ein-/ausgeschaltet werden → das ist eine Folienpräsentation. Szenen müssen wechseln, weil sich die WELT/KAMERA bewegt (Kamerafahrt, Schwenk in eine andere Ecke, Durchstoß, Hintergrundwechsel), nicht weil eine Section ausgeblendet wird. Erlaubte Ausnahme: Bühnen-Cartoon (references/kartun-panggung.md) mit Schnitt/96-Pixel-Verschiebung zwischen den Bühnen – erlaubt, da jede Bühne vollständig lebt (≥ 10 agierende Objekte), keine statischen Bilder mit Überblendung.

2. Es gibt einen durchgehenden roten Faden: ein Subjekt (kontinuierliche Aktion) ODER eine Collagen-/Papier-/weiße Welt, die von der Kamera bereist wird (Cartoon, Foto, Katalog, Skizze). Wechselnde Full-Bleed-Fotos ohne gemeinsame Welt → PPT. Ein Bild + ein Satz pro Szene, die jede Szene wechseln → dennoch eine Diashow, selbst wenn die Kamera sich bewegt: Jede Szene hat 3–5 Elemente, die schrittweise pro Phrase eintreten (explainer.md "Eine Szene = 3–5 Elemente").

3. Pro Szene Textebenen zählen: Eyebrow/Kicker + Titel + Body/Credit = 3 Ebenen → PPT. Maximum zwei: eine große Zahl/ein großer Satz + ein Welt-Label. Dokumente/Stempel/Datumsblöcke mit ≤ 3 kurzen Zeilen gelten als Objekt, nicht als Textebene.

4. Ken Burns (Scale 1.0→1.05 bei Fotos) als einzige Bewegung → PPT. Bewegung pro Sekunde muss aus der im Style Brief ausgewählten HINTERGRUND-BEWEGUNGSSPRACHE aus dem Menü techniques.md §7c stammen (atmende Kamera bei texturiertem Hintergrund, wandernder Verlauf, schwebende Blobs, lebendige Körnung, Lichtstreifen pro Segment, langsam rotierende große Formen, aufsteigende Partikel, atmendes Raster, Geistertext, der sich verschiebt, Ken Burns + Parallaxe…). Balken/Linien/ Stücke, die seitlich vorbeiziehen ("Lane", "Range", "Streak", horizontaler Partikelregen) wurden BEREITS in zwei aufeinanderfolgenden Projekten unter verschiedenen Namen verwendet – das ist kein Standard; nur wenn das Thema wirklich Geschwindigkeit/Fluss ist und nicht in zwei aufeinanderfolgenden Projekten.

5. Nur Fade + Scale Bump + Light Leak bei allen Schnitten → PPT-Vorlage. Schwenk in eine andere Ecke, Schnitt zu Instrument (Karte/Tacho/Profil), Durchstoß.

6. Erklärvideo mit dem passenden STARTER beginnen: starter-explainer-kartun, -jurnalisme, -katalog, -sketsa (Collagenmodus: Kamera bereist statische Assets), starter-explainer (kontinuierliche Aktion: Welt fließt), oder starter-explainer-panggung (Bühnen-Cartoon: eine Bühne pro Szene, Gelenk-Rig, Kamera nur innerhalb der Bühne). Collage hat ein Rig; Bühne hat ein anderes. NICHT aus assets/starter-opener.html (Text-Opener) und nicht von Grund auf neu.

7. Miniaturen sind Folien. Kamerazoom < 1,08, so dass ein Haus daumennagelgroß ist und leerer Boden die Hälfte des Bildschirms füllt → PPT, selbst wenn alles sich bewegt. Die Welt wird in bildschirmgroße Bühnen aufgeteilt, nicht in eine große Karte, die erkundet wird (kartun-panggung.md Regel 1).

8. Vorlagenrahmen (Opener/Promo). Prüfe Ablauf und Code: erste Szene besteht aus vergrößertem Text, der nach links austritt; drei parallele Feature-Kacheln/Karten; eingegebene Eingabefelder/Suchleiste; Reihenfolge Hook → Feature → Feature → Versprechen → Logo → CTA. Zwei oder mehr ohne konzeptionelle Anforderung → Vorlage, selbst wenn die Oberfläche neu ist. Rahmen aus references/opener-konsep.md neu auswählen.

Scheitert nur ein Punkt → vor dem Zeigen an den Benutzer umbauen.

Abgedeckte Arbeitstypen

Dieses Skill gilt ALLGEMEIN für Web-Motion-Graphics. Erklärvideo ist nur eine Art – es hat ein eigenes Dokument, weil die Struktur anders ist, nicht weil es die Hauptsache ist.

Starter sind nach Kategorie benannt: starter-opener.html für Opener, Promos, Bumper, Intros und Kinetic Typography; starter-explainer-*.html für Erklärvideos, mit Modus-/Stil-Endung (-kartun, -jurnalisme, -katalog, -sketsa = Collage; ohne Endung = kontinuierliche Aktion; -panggung = Bühnen-Cartoon). Bühnen-Cartoon ist ein Erklärvideo-Modus (Stil 6), keine eigene Kategorie: Ziel bleibt das Erklären mit VO, nur die Produktionsweise unterscheidet sich.

Typ	Übliche Dauer	Merkmale	Rezept
Opener / Produkt-Promo	25–40 s	ein Konzept aus dem Menü (Rahmen entsteht aus dem Produkt, nicht Standardschema), ein besonderer Moment, Brand-Abschluss	references/opener-konsep.md + Arbeitsablauf unten + references/techniques.md
Bumper / Ident / Logo-Sting	3–8 s	Logo-Aufbau, eine charakteristische Bewegung, vorbei bevor der Zuschauer es merkt	techniques.md (Logo-Aufbau, Light Leak)
Intro / Outro Kanal	5–12 s	Kanalname + gleichbleibende, charakteristische Bewegung in jeder Episode	Arbeitsablauf unten
Kinetic Typography / Liedtexte	15–60 s	Text ist das Subjekt; Aufteilung pro Wort/Buchstabe; Rhythmus folgt dem Audio	techniques.md (Split + gerichteter Blur, 3D-Pan pro Wort)
Titel / Lower Third / Segment-Bumper	2–6 s	kleines Element über Videomaterial, sauber ein- und ausblendend, transparenter Hintergrund	techniques.md
Erklärvideo	30–90 s	belegte Fakten, Entitäten treten auf, Perspektivwechsel, fünf Stile	references/explainer.md + Starter pro Stil

Erklärvideo und Charaktere: Vor der Einstellungsplanung lesen

Für flache Charakter-Cartoon-Erklärvideos (sechster Stil, Bühnen-Cartoon), oder Überarbeitungen, die sich wie Diashow/Miniatur anfühlen, lies references/kartun-panggung.md: eine Bühne pro Szene, Zoom 1,08–1,95, kontinuierlich in der Bühne und Schnitt/96-Pixel-Verschiebung zwischen ihnen, Gelenk-Rig mit manueller Transformation, keine Captions, helle, flache Palette. Unterscheide Sätze, visuelle Beats, Framing und Bühnenwechsel. Für die direkte Erstellung in After Effects lies references/ae-bridge-higgsfield.md. Diese spezifischen Richtlinien für Erklärvideos verdeutlichen die Opener-Regeln unten; Schriftartbeispiele, Szenenanzahl und Effekte sind keine universellen Rezepte.

Regel #1 – Das ist ein Video, keine Folie

Häufigste Krankheit: Modelle bauen Szenen wie Folien – Titel + Untertitel

• Fließtext + Badge-Reihe. Das wird sofort als "PPT" erkannt und abgelehnt.

Die harten Regeln:

• Für Opener: ein kurzer Satz + maximal ein Hauptobjekt pro Szene. Kein Kicker ("01 – FUNKTION"), Untertitel, Beschreibungsabsatz, Funktions-Chip/Badge oder technische Metadaten (Paketname, lange URL). Chips, Buttons und Labels, die Teil der gerade genutzten Produkt-UI sind, sind ausgenommen.
• Neue Information = neue visuelle Antwort. Bei Erklärvideos ändere Zustand/Aktion in derselben Welt, wenn noch zusammenhängend; ein Satzwechsel erfordert nicht zwingend einen Einstellungswechsel.
• Aufzählungspunkte werden durch Visuals ersetzt, nicht automatisch drei Kacheln. Wähle einen Weg aus dem Funktionsmenü in references/opener-konsep.md (eine Funktion wird demonstriert, Wörter wechseln, Objekt transformiert sich, Karten werden gemischt, Tile-Grid…); zwei aufeinanderfolgende Opener verwenden nicht denselben Weg.
• Szenen müssen lebendig sein. Kamera darf verweilen, während Objekte Aktion tragen. Bewege die Kamera, um etwas zu verfolgen oder zu enthüllen; verlasse dich nicht auf Text-Fade/Slide über statischem Hintergrund oder wiederholtes Schwenken/Zoomen in allen Segmenten.
• "Zoom rein-raus" = Einstellungsgröße, nicht Kamera-Atmung. Wenn das Video statisch wirkt oder der Benutzer Zoom wünscht, nähert sich die Kamera dem erzählenden Element (Medium Close-Up / Close-Up) und geht dann zurück zur Weitaufnahme, dem Inhaltsbeat folgend; eine Atmung von wenigen Prozent ist kaum sichtbar (techniques.md §3b).

Lies references/anti-ppt.md, BEVOR du Szenen entwirfst – es enthält eine Liste realer Verstöße und deren Korrekturen.

Regel #2 – Deterministisch oder tot

Keine einzige Zeile liest die Systemzeit. Alle Visuals sind reine Funktionen von tl.time() (GSAP-Timeline-Zeit): Spektrum, laufende Zahlen, Partikel, Kamera-Wackeln (Hochfrequenz-Sinus, nicht Math.random()), Position von "fließenden" Objekten (ENTFERNUNGS-Tween, keine Geschwindigkeitsakkumulation pro Frame). Konsequenz: Scrub präzise wie eine After-Effects-Timeline, und Frame-für-Frame-Rendering zu MP4 erzeugt jedes Mal identische Bilder.

Regel #3 – Stil entsteht aus dem Thema, nicht aus dem Starter, nicht aus Referenzen

Häufiges Versagen: Ein Opener für ein anderes Produkt kommt mit GENAU derselben Oberfläche wie der vorherige Opener – dunkel, blauer Akzent, Glow, Nebel, dieselbe Schriftart – weil das Modell seinen Stil aus dem Starter nimmt. Die Animation kann gut sein, trotzdem gescheitert: Ein Opener ist das Gesicht eines Produkts, und zwei Produkte dürfen nicht dasselbe Gesicht haben.

1. Style Brief zuerst, Code später. Bevor du den Starter anfasst, schreibe diese sechs Zeilen und zeige sie dem Benutzer zusammen mit dem Szenenablauf:
   • Thema/Produkt + drei Adjektive für das Gefühl, das hinterlassen werden soll;
   • Konzept & struktureller Fingerabdruck (Opener/Promo): drei Konzeptkandidaten aus references/opener-konsep.md, einer ausgewählt mit Begründung vom Produkt, dann Konzept · Szenenanzahl · Hauptobjekt pro Szene · Eröffnung · Abschluss;
   • Palette: eine Hauptfarbe AUS der Marke/dem Thema (Logo, App-Symbol, Website, Verpackung), eine Hintergrundfarbe, ein Akzent – nenne Hex UND Quelle jeder Farbe; Farben, die nicht von der Marke stammen, mit "Abgeleitet: Grund" notieren;
   • Eine Display-Schriftart mit Charakter, die zum Gefühl passt (nicht Poppins/Inter/Roboto/Montserrat/Arial) + Begleitschriftart; Ausnahme: Konzept Behauptung → Weg → Ergebnis verwendet die UI-Schriftart des Produkts selbst (references/opener-konsep.md);
   • Textbetonung: keine Wort-Hervorhebung oder eine Form der Hervorhebung (nennen) – Wort-Hervorhebung OPTIONAL, nicht Standard in jedem Opener;
   • Hintergrundsprache pro Segment: eine Richtung aus der Tabelle "Stilrichtung" für alle, oder ein Wechselplan (welches Segment wechselt, wozu, warum, Auslöser);
   • Bewegungs-Fingerabdruck: eine Bewegungsart, die als Identität wiederholt wird (Objekt-Wipe, 3D-Roll pro Wort, fliegendes Papier, Linie, die zeichnet, Farbblöcke, die an den Rand stoßen…);
   • Hintergrundbewegung: eine Sprache aus dem Menü techniques.md §7c – nicht dasselbe wie der Bewegungs-Fingerabdruck und nicht automatisch "Objekte ziehen vorbei";
   • Hintergrundoberfläche: aus dem Menü §7d (Verlauf/Licht/Textur/Körniger Verlauf, ≥ 2 Schichten) – nicht flach;
   • Rendering-Stil für Objekte: eine Familie aus dem Menü techniques.md §7e (flach, Ton, glänzend, Glas, isometrisch, realistisch, Neon-Linien…);
   • Foto-Assets (falls das Konzept Fotos von Personen/Orten/Produkten verwendet): Quelle – Benutzerfotos, Generierung per MCP Higgsfield oder lizenzierte Stockfotos – BENUTZER FRAGEN, plus Liste der Einstellungen pro Akt (references/opener-konsep.md "Fotos im Opener");
   • Übergänge: bestimme, welche Grenzen einen Effekt benötigen und wo ein Schnitt ausreicht; wähle aus dem Menü §4c je nach Kontext, nicht zwingend zwei Arten oder zwingend 3D;
   • ein besonderer Moment (wo der teuerste Effekt einmalig eingesetzt wird).
2. Starter ist Architektur, nicht Stil. Die graue Farbe, Systemschriftarten und der WebGL-Hintergrund in assets/starter-opener.html sind PLATZHALTER. Wenn einer davon im Ergebnis noch sichtbar ist, wurde der Stil nicht abgeleitet. Der WebGL-Hintergrund (Nebel, Staub, Raster, Bloom) ist nur eine von acht Hintergrundsprachen; deaktiviere ihn, wenn die Stilrichtung anders ist.
3. Referenzen = Rhythmus, nicht Oberfläche. Aus dem Referenzvideo übernehme: Dauer pro Einstellung, Übergangsart, Aufmerksamkeitshierarchie, Energie, Bewegungssprache. ÜBERNIMM NICHT: Palette, Schriftarten, Texturen, Layout, Ornamentformen, Sätze, Szenenreihenfolge und einzigartige Momente (charakteristischer Anfang/Schluss, einmaliger Gimmick). "Mach es wie dieses" bedeutet "so energiereich", "so rhythmisch" – nicht "mit derselben Schriftart"