pvsaravanan/bang-motion

Bang Motion: Web-Bewegtgrafiken, die keine PPT sind

v1.19.0 · von Bang Tutorial · MIT. Änderungshistorie findet sich im upstream CHANGELOG.md; Installationsanweisungen stehen im upstream README.md. Dieses Exemplar ist eine deutsche Übersetzung des upstream Skills.

Dieser Skill ist für jeden KI-Codierungsagenten (offenes Agent Skills Format). Er enthält die Gesetze und Rezepte für Bewegtgrafiken, die sich wie Video bewegen, nicht wie eine Präsentation. Befolge sie, bevor du Code schreibst.

Voraussetzungen: nur ein Browser

Das Auslieferungsergebnis (index.html) benötigt nur einen modernen Browser plus Internet für die CDNs (GSAP, Schriftarten). Python und Node sind optional und werden nur für Arbeitswerkzeuge verwendet: scripts/serve.py (No-Cache-Server, nur bei Verwendung lokaler Module erforderlich), Puppeteer (automatische Snapshots/Verifikation, scripts/export-frames.mjs → MP4). Wenn der Benutzer keins davon hat: (1) erstelle trotzdem eine einzelne Datei und öffne sie per Doppelklick; (2) überprüfe visuell mit ?debug=1 (Scrub-Panel) und manuellen Screenshots zu Schlüsselsekunden; (3) erstelle MP4 durch Bildschirmaufnahme (OBS / Browser-Tab-Aufnahme) und erkläre, dass eine Bildschirmaufnahme Frames auslassen kann und dass Frame-für-Frame-Rendering Node benötigt. Erstelle niemals ein Auslieferungsergebnis, das npm install nur zum ANSCHAUEN benötigt.

ffmpeg ist ebenfalls optional. Überprüfe zuerst (ffmpeg -version); wenn es fehlt:

Bedarf	Mit ffmpeg	Ohne ffmpeg
VO-Synchronisation (Satz-/Absatzgrenzen)	silencedetect	scripts/vo-pauses.html: öffne es im Browser, wähle die Audiodatei, kopiere SEG/PARA; gleiches Ergebnis (Web Audio, keine Installation)
Audiodauer/Format	ffprobe	die DUR-Nummer von vo-pauses.html; der Browser spielt wav/mp3/m4a/ogg direkt ab
MP4-Export	PNGs von export-frames.mjs zusammenführen	kein MP4: biete eine Ein-Befehl-Installation an (winget install Gyan.FFmpeg / brew install ffmpeg) oder Bildschirmaufnahme
Referenzvideo analysieren (Frames extrahieren)	fps= + tile=	bitte den Benutzer, Screenshots zu Schlüsselsekunden zu senden, oder öffne das Video im Browser und erfasse es zu bestimmten Sekunden

Ohne ffmpeg ist der Erklärvideo-Ablauf bis zur VO-Synchronisation immer noch vollständig; nur das MP4 benötigt eine Installation.

Player: keiner, Autoplay, Loop

Standard-Auslieferungsergebnis: kein Panel/Player auf dem Bildschirm, es spielt sofort beim Öffnen ab und startet von Anfang an, wenn es endet (onComplete → play(0); wenn es einen Ton gibt, loopt das Audio ebenfalls). Versteckte Steuerung: R startet neu, Leertaste pausiert. Das Scrub-/Uhren-Panel erscheint nur mit ?debug=1 (ein Überprüfungswerkzeug), und ?clean=1 hält Autoplay für den Export fest. Ton? Versuche play() sofort; wenn der Browser es blockiert, halte auf Frame 0 und beginne beim ersten Klick, ohne „Tippen zum Starten“-Text. Dies ist bereits in beide Starter eingebaut.

Strukturelle Verbote: PPT-Prüfungen, die du mechanisch durchführen kannst

Andere Modelle (und du, wenn du müde bist) werden trotz der folgenden Gesetze in diese Muster verfallen. Überprüfe vor der Auslieferung den CODE, nicht deine Gefühle:

1. grep -c "class=\"scene\"\|\<section" index.html: wenn es ≥ 3 Szenen aus <section>-Elementen gibt, die mit autoAlpha/Deckkraft ein- und ausgeschaltet werden, ist das eine Folienpräsentation. Szenen müssen sich ändern, weil sich die WELT/KAMERA bewegt (die Kamera bewegt sich, schwenkt in eine andere Ecke, drückt durch, der Hintergrund ändert sich), nicht weil ein Abschnitt ausgeblendet wird. Legitime Ausnahme: Cartoon-Bühne (references/cartoon-stage.md) verwendet einen Schnitt/96 px Rutscher zwischen den Bühnen. Das ist erlaubt, weil jede Bühne vollständig lebendig ist (≥10 Objekte in Aktion), nicht ein Standbild, das ausgeblendet wird.
2. Es gibt einen visuellen roten Faden: ein Subjekt (durchgehende Aktion) ODER eine Collage/Papier/weiße Welt, über die die Kamera reist (Cartoon, Foto, Katalog, Skizze). Vollflächige Fotos, die sich ohne gemeinsame Welt abwechseln → PPT. Ein Bild + ein Satz pro Szene, die jede Szene ausgetauscht werden → immer noch 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. Zähle Textknoten pro Szene: Eyebrow/Kicker + Titel + Körper/Credit = 3 Ebenen → PPT. Maximum zwei: eine große Zahl/ein Satz + eine Weltbeschriftung. Ein Dokument/Stempel/Datumsblock mit ≤ 3 kurzen Zeilen zählt als Objekt, nicht als Textebene.
4. Ken Burns (Skalierung 1,0→1,05 auf einem Foto) als einzige Bewegung → PPT. Bewegung muss jede Sekunde aus der HINTERGRUNDBEWEGUNGSSPRACHE stammen, die im Style-Brief aus dem techniques.md §7c Menü gewählt wurde (Kameraatmung auf einem texturierten Hintergrund, treibender Farbverlauf, schwebende Blobs, lebendiges Rauschen, ein Licht-Sweep pro Segment, eine große, sich langsam drehende Form, aufsteigende Partikel, atmendes Gitter, Geistertext, der treibt, Ken Burns + Parallaxe…). Balken/Linien/Stücke, die seitwärts kreuzen („Bahn“, „Bereich“, „Streifen“, horizontale Partikelregen) wurden BEREITS von zwei Projekten hintereinander unter verschiedenen Namen verwendet. Sie sind kein Standard; verwende sie nur, wenn das Thema wirklich Geschwindigkeit/Fluss ist, und niemals in zwei Projekten hintereinander.
5. Übergänge, die nur Ausblenden + Skalierungsbump + Lichtleck bei jedem Schnitt sind → PPT Vorlage. Schwenk in eine andere Ecke, Schnitt auf ein Instrument (Karte/Tacho/Profil), Durchdrücken.
6. Erklärvideos beginnen mit dem Starter für ihren STIL: starter-explainer-cartoon, -journalism, -catalog, -sketch (Collage-Modus: die Kamera reist über statische Assets), starter-explainer (durchgehende Aktion: die Welt fließt), oder starter-explainer-stage (Cartoon-Bühne: eine Bühne pro Szene, Gelenk-Rig, Kamera nur innerhalb der Bühne). NICHT von assets/starter-opener.html (Text-Opener), und nicht von Grund auf.
7. Eine Miniatur ist eine Folie. Die Kamera zoomt < 1,08, sodass ein Haus daumengroß ist und leerer Boden die Hälfte des Bildschirms füllt → PPT, auch wenn sich alles bewegt. Teile die Welt in bildschirmgroße Bühnen auf, anstatt eine große Karte zu erkunden (cartoon-stage.md Gesetz 1).
8. Vorlagen-Skelett (Opener/Promo). Überprüfe den Ablauf und den Code: die erste Szene ist Text, der wächst und dann links verschwindet; drei Feature-Kacheln/Karten nebeneinander; ein Eingabefeld/Suchleiste, in das getippt wird; der Order-Hook → Feature → Feature → Versprechen → Logo → CTA. Zwei oder mehr ohne Bedarf durch das Konzept → Vorlage, selbst mit neuem Skin. Wähle das Skelett erneut aus references/opener-concepts.md.

Scheitere auch nur an einem Punkt → überarbeite, bevor du es dem Benutzer zeigst.

Abgedeckte Arbeiten

Dieser Skill ist für Web-Bewegtgrafiken im ALLGEMEINEN. Das Erklärvideo ist nur eine Art; es hat sein eigenes Dokument, weil sich seine Struktur unterscheidet, nicht weil es die Hauptsache ist.

Starter werden nach Kategorie benannt: starter-opener.html für Opener, Promos, Bumper, Intros und kinetische Typografie; starter-explainer-*.html für Erklärvideos, mit einem Modus/Stil-Suffix (-cartoon, -journalism, -catalog, -sketch = Collage; kein Suffix = durchgehende Aktion; -stage = Cartoon-Bühne). Cartoon-Bühne ist ein Erklärvideo-Modus (Stil 6), keine eigene Kategorie: sein Ziel ist es immer noch, mit VO zu erklären, nur die Art der Produktion unterscheidet sich.

Art	Übliche Länge	Merkmale	Rezept
Opener / Produkt-Promo	25–40 s	ein Konzept aus dem Menü (das Skelett kommt vom Produkt, nicht von einer festen Reihenfolge), ein besonderer Moment, Markenabschluss	references/opener-concepts.md + der Workflow unten + references/techniques.md
Bumper / Ident / Logo-Sting	3–8 s	Logo-Aufbau, eine Signaturbewegung, erledigt, bevor der Zuschauer es merkt	techniques.md (Logo-Aufbau, Lichtleck)
Channel-Intro / Outro	5–12 s	Kanalname + dieselbe Signaturbewegung jede Episode	Workflow unten
Kinetische Typografie / Liedtexte	15–60 s	Text ist das Subjekt; aufgeteilt pro Wort/Buchstabe; Rhythmus folgt dem Audio	techniques.md (Split + Richtungsunschärfe, Pro-Wort-3D-Pan)
Titel / Lower Third / Segment-Bumper	2–6 s	ein kleines Element über Filmmaterial, sauber rein und raus, transparenter Hintergrund	techniques.md
Erklärvideo / Erklärfilm	30–90 s	belegte Fakten, gezeigte Entitäten, wechselnde Blickwinkel, fünf Stile	references/explainer.md + der Starter für jeden Stil

Erklärvideos und Charaktere: vor der Entscheidung über Einstellungen lesen

Für einen flachen, pädagogischen Cartoon-Erklärfilm mit Charakteren (der sechste Stil, Cartoon- Bühne), oder eine Überarbeitung, die sich wie eine Diashow/Miniatur anfühlt, lies references/cartoon-stage.md: eine Bühne pro Szene, Zoom 1,08–1,95, durchgehend innerhalb einer Bühne und ein Schnitt/96 px Rutscher zwischen ihnen, ein Gelenk-Rig mit manuellen Transformationen, null Untertitel, eine helle, flache Palette. Unterscheide Satz, visuellen Beat, Bildausschnitt und Bühnenwechsel. Um es direkt in After Effects zu bauen, lies references/ae-bridge-higgsfield.md. Diese erklärvideospezifische Anleitung schärft die Opener-Regeln unten; die Beispielschriftarten, Szenenanzahlen und Effekte sind keine universellen Rezepte.

Gesetz #1: Das ist Video, keine Folien

Die häufigste Krankheit: Das Modell legt Szenen wie Folien an, mit Titel + Untertitel

• Fließtext + einer Reihe von Abzeichen. Das liest sich sofort als „PPT“ und wird abgelehnt.

Die harten Regeln:

• Für Opener: ein kurzer Satz + höchstens ein Hauptobjekt pro Szene. Kein Kicker („01 — FUNKTIONEN“), Untertitel, erklärender Absatz, Funktions-Chip/Abzeichen oder technische Metadaten (Paketname, lange URL). Chips, Buttons und Labels, die Teil der verwendeten Produkt-UI sind, zählen nicht.
• Neue Information = eine neue visuelle Antwort. In einem Erklärvideo ändere den Zustand/die Aktion in derselben Welt, wenn sie noch verwandt ist; ein neuer Satz muss nicht die Einstellung ändern.
• Ersetze Aufzählungspunkte durch visuelle Elemente, nicht automatisch durch drei Kacheln. Wähle den Weg aus dem Feature-Menü in references/opener-concepts.md (eine demonstrierte Funktion, Wörter, die sich austauschen, ein Objekt, das sich transformiert, gemischte Karten, ein Kachelraster…); zwei Opener hintereinander verwenden nicht denselben Weg.
• Szenen müssen lebendig sein. Die Kamera darf ruhen, während Objekte die Aktion tragen. Bewege die Kamera, um etwas zu verfolgen oder zu enthüllen; verlasse dich nicht auf Textüberblendungen/-rutschen über einem statischen Hintergrund oder auf wiederholte Schwenks/Zooms in jedem Segment.
• „Zoom rein-raus“ = Einstellungsgröße, nicht Kameraatmung. Wenn das Video statisch wirkt oder der Benutzer nach Zoom fragt, bewegt sich die Kamera auf das Element zu, das die Geschichte erzählt (Amerikanische Einstellung / Nahaufnahme) und zieht sich dann entsprechend dem Beat des Inhalts zurück zur Totalen; eine Atmung von wenigen Prozent ist nahezu unsichtbar (techniques.md §3b).

Lies references/anti-ppt.md BEVOR du Szenen entwirfst. Es listet echte Verstöße zusammen mit ihren Korrekturen auf.

Gesetz #2: Deterministisch oder tot

Keine einzige Zeile liest die Systemuhr. Jedes visuelle Element ist eine reine Funktion von tl.time() (der GSAP-Timeline-Zeit): Spektrum, laufende Zahlen, Partikel, Kamera- Schütteln (hochfrequenter Sinus, nicht Math.random()), die Position von Objekten, die „fließen“ (tweene DISTANZ, akkumuliere keine Geschwindigkeit pro Frame). Die Konsequenz: Scrubben ist exakt wie eine After Effects-Timeline, und die Frame-für-Frame-Wiedergabe zu MP4 erzeugt jedes Mal identische Bilder.

Gesetz #3: Stil wird aus dem Thema geboren, nicht aus dem Starter, nicht aus einer Referenz

Ein häufiger Fehler: Ein Opener für ein anderes Produkt kommt mit EXAKT dem Skin des vorherigen Opener-Produkts: dunkel, blauer Akzent, Glühen, Nebel, dieselbe Schriftart, weil das Modell seinen Stil vom Starter genommen hat. Die Animation kann gut sein und trotzdem fehlschlägt: Ein Opener ist das Gesicht eines Produkts, und zwei Produkte dürfen sich kein Gesicht teilen.

1. Style-Brief zuerst, Code später. Bevor du einen Starter anfasst, schreibe diese Zeilen und zeige sie dem Benutzer zusammen mit dem Szenen-Ablauf:
   • Thema/Produkt + drei Adjektive für das Gefühl, das zurückbleiben soll;
   • Konzept- und Struktur-Fingerabdruck (Opener/Promo): drei Kandidatenkonzepte aus references/opener-concepts.md, eines ausgewählt mit einem Grund vom Produkt, dann Konzept · Szenenanzahl · Hauptobjekt pro Szene · Eröffnung · Abschluss;
   • Palette: eine Hauptfarbe, die von der Marke/dem Thema GENOMMEN wurde (Logo, App-Symbol, Website, Verpackung), eine Hintergrundfarbe, eine Akzentfarbe. Gib das Hex UND die Quelle jeder Farbe an; eine Farbe, die nicht von der Marke ist, wird als „abgeleitet: Grund“ geschrieben;
   • eine Auszeichnungsschriftart mit Charakter, die zu diesem Gefühl passt (nicht Poppins/Inter/Roboto/Montserrat/Arial) + eine Begleitschriftart; Ausnahme: das Anspruch → Wie → Ergebnis-Konzept verwendet die UI-Schriftart des Produkts selbst (references/opener-concepts.md);
   • Texthervorhebung: keine Worthervorhebung oder eine Form der Hervorhebung (benenne sie). Wort- Hervorhebung ist OPTIONAL, kein Standard jedes Openers;
   • Hintergrundsprache pro Segment: eine Richtung aus der Tabelle „Stilrichtungen“ für alles, oder ein Änderungsplan (welches Segment ändert sich, wohin, warum, ausgelöst durch was);
   • Signaturbewegung: eine Art von Bewegung, die als Identität wiederholt wird (Objekt-Wisch, 3D-Rolle pro Wort, fliegendes Papier, eine Linie, die zeichnet, Farbblöcke, die die Kante treffen…);
   • Hintergrundbewegung: eine Sprache aus dem techniques.md §7c Menü. Es ist nicht dasselbe wie die Signaturbewegung und nicht automatisch „Objekte kreuzen“;
   • Hintergrundoberfläche: aus dem §7d Menü (Farbverlauf/Licht/Textur/körniger Farbverlauf, ≥ 2 Schichten), nicht flach;
   • Objekt-Render-Stil: eine Familie aus dem techniques.md §7e Menü (flach, Ton, glänzend, Glas, isometrisch, realistisch, Neonlinie…);
   • Foto-Assets (wenn das Konzept Fotos von Personen/Orten/Produkten verwendet): die Quelle (Benutzerfotos, generiert über das Higgsfield MCP, oder lizenzierte Stockfotografie) wird beim Benutzer ERFRAGT, plus eine Einstellungsliste pro Akt (references/opener-concepts.md, „Fotos in Openern“);
   • Übergänge: entscheide, welche Grenzen einen Effekt benötigen und welche ein einfacher Schnitt sein können; wähle aus dem §4c Menü passend zum Kontext; zwei Arten oder 3D sind nicht zwingend;
   • ein besonderer Moment (wo der teuerste Effekt verwendet wird, einmal).
2. Ein Starter ist Architektur, nicht Stil. Die grauen Farben, die Systemschriftart 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, Dunst, …) muss durch etwas ersetzt werden, das zum Thema passt.

Gesetz #4: Eine Bühne nach der anderen (keine Leinwand)

Einer der am schwersten zu brechenden PPT-Reflexe: Der Code erstellt ein großes <div id="canvas"> füllt es mit absolut positionierten Szenen, die in display: none / display: block umschalten, während eine „Kamera“ nur die Deckkraft tweent. Das ergibt eine Diashow, kein Video.

Korrigiere es, BEVOR du den ersten Effekt hinzufügst:

1. Es gibt keine Leinwand. Das Viewport (<body>) ist das „Bild“. Jede Szene ist eine <div class="scene"> mit position: absolute; top: 0; left: 0; width: 100%; height: 100%;; alle Szenen sind zu jedem Zeitpunkt im DOM. „Szenenwechsel“ = die Kameragruppe (<g class="camera">), die sich innerhalb des Viewports bewegt, plus einige Szenenobjekte, die sich vor der Kamera verstecken oder hervorkommen. Siehe references/cartoon-stage.md für die genaue Implementierung des Bühnenwechsels.
2. Die Kameragruppe (<g class="camera">) wird mit CSS 3D transform bewegt (translate3d, rotateY, rotateX), nicht durch Tweening der left/top von Szenen. Die Bühne (Szenen-Container) hat perspective: 1000px; am Viewport.
3. Wenn alles andere fehlschlägt, schreibe das Szenen-Layout von Hand ohne Framework und verstecke keine Szenen. Animierte Szenen gleichzeitig. Die GSAP-Timeline wechselt zwischen ihnen durch Bewegen der Kamera und Verwalten der Sichtbarkeit einzelner Objekte innerhalb jeder Szene.

Gesetz #5: 0,8 KB sind immer noch 0,8 KB

Es gibt immer noch eine alte Codebasis in der Community, die auf Ressourcen-Strings angewiesen ist, die in JS eingebettet sind (Base64-Schriftarten, Base64-Bilder). Wenn du diesen Code findest, ersetze ihn durch CDN-Links. CDN für Schriftarten, SVG für Symbole, verlustbehaftete Bilder bei 80 % Qualität. Baue nicht für eine Offline-Nutzung, die nicht angefordert wurde.

Workflow: Von der Idee zur Auslieferung

1. Bestimme die Art der Arbeit (Opener / Bumper / Erklärvideo / kinetische Typografie…).
   • Wenn der Benutzer ein „Erklärvideo“ sagt oder ein Publikum, das erklärt werden muss, verwende starter-explainer.html (5 Stile, siehe Referenz).
   • Für alles andere verwende einen der reinen Web-Starter und wende die Referenz „Nicht-PPT“ an.
2. Schreibe den konzeptuellen Style-Brief wie in Gesetz #3: wähle ein Konzept aus dem Menü, wähle eine Palette, Schriftarten, Signaturbewegung, Hintergrundbewegung, Rendering-Stil. Zeige es dem Benutzer zur Genehmigung.
3. Erstelle das Szenen-Skelett mit einem leeren index.html und den erforderlichen CDN-Links. Definiere die Szenen und die grundlegende Kamerabewegung. Schreibe noch keinen Inhalt. Zeige es dem Benutzer als „Blaupause“.
4. Fülle den Inhalt für die erste Szene (Objekte, Text, Animation). Zeige sie dem Benutzer und iteriere. Fahre dann mit der zweiten Szene fort und wiederhole.
5. Füge nacheinander die Hintergrundbewegung, die Signaturbewegung, Übergänge und den besonderen Moment hinzu. Zeige nach jedem Schritt.
6. Füge den Ton hinzu (VO, Musik), synchronisiere die Timeline. Verwende vo-pauses.html (oder silencedetect), um die Pausen zu erhalten.
7. Exportiere zu MP4 (über Puppeteer + ffmpeg). Wenn der Benutzer ffmpeg nicht hat, biete eine Ein-Kommando-Installation an oder verwende Bildschirmaufnahme.
8. Liefere sowohl das HTML als auch die MP4-Datei aus.

Dieser Workflow stellt sicher, dass der Benutzer während des gesamten Prozesses einbezogen wird und dass der Stil früh festgelegt wird, bevor viel Code geschrieben wird.

Referenzen

• references/anti-ppt.md – Häufige PPT-Muster und wie man sie behebt
• references/opener-concepts.md – Konzepte und Skelette für Opener, Promos, Bumper
• references/explainer.md – Struktur und Stile für Erklärvideos
• references/cartoon-stage.md – Spezifische Regeln für Cartoon-Bühnen-Erklärvideos
• references/techniques.md – Techniken und Menüs für Effekte, Styles und Oberflächen
• references/ae-bridge-higgsfield.md – Brücke zu After Effects für Cartoon-Erklärvideos

Änderungsprotokoll

Siehe CHANGELOG.md im upstream Repository für die vollständige Änderungshistorie.

Lizenz

MIT. Siehe LICENSE-Datei.