Bang Motion — Motion Graphic Web, kein PPT
In der Motion-Explainer-Bibliothek. Der folgende Text ist das eigenständige Bang-Motion-Regiehandbuch für eine einzelne, in sich geschlossene index.html (HTML + CSS + GSAP). Innerhalb dieser Bibliothek wird derselbe Look auch als drei Engines ausgeliefert, die in die normale Pipeline eingebunden sind, sodass ein Reel ihn wie jeden anderen Stil aufgreifen kann:
style.json: das Manifest (bang-motion, Canvas 1080x1920 bei 30 fps, Enginesremotion,fframesundkyfram)remotion/:kit/(GlowHorizon,GrainyMeshBlob,GlassCard,KineticTitle,StatusPill,BangBanner,GlassCaptions,LivingGrain),template/,sync_kit.sh,CATALOG.md,AGENT_BRIEF.mdfframes/:Cargo.toml,src/(lib, tokens, kit, look, video, main),tools/ff.shkyfram/PRELUDE.lgv: Paletten-Token und das Beat-Mobiliar (drawBackdrop,drawBanner,drawCaptions,drawPanel,drawDot,drawFrame) für.lgv-Szenendocs/style-guide.mdunddocs/style-prompt.md: das komprimierte Stylesheet und der portable Prompt
Erstelle eine Episode mit ./core/new_episode.sh <series-dir> 01-slug Episode out-name --style bang-motion --engine remotion (oder --engine fframes|kyfram). Die Pipeline-Skills übernehmen den Stilnamen als $MOTION_STYLE, sodass sich sonst nichts im Workflow ändert.
Die DNA des Stils, in einem Satz: eine durchgehende Welt, ein Hintergrund aus mindestens zwei Ebenen (tiefe Basis plus ein leuchtender Horizont), der sich immer bewegt, ein Korn, das sich von t und nicht von zufälligem Rauschen ableitet, eine atmende Kamera anstelle eines statischen Bildausschnitts, motivierte Übergänge anstelle eines einzelnen, sich wiederholenden Wipes, und eine Aussage pro Einstellung anstelle einer Foliendosis an Informationen.
v1.19.0 · von Bang Tutorial · MIT. Änderungshistorie in CHANGELOG.md;
Installationsanleitung in README.md.
Dieser Skill ist für jeden KI-Coding-Agenten geeignet (offenes Agentenskills-Format). Er enthält die Regeln und Rezepte für Motion Graphics, die sich wie Video bewegen, nicht wie Präsentationen – halte dich daran, bevor du Code schreibst.
Voraussetzungen – nur Browser
Das Deliverable (index.html) benötigt nur einen modernen Browser + Internet für CDN
(GSAP, Schriftarten). Python und Node sind optional und werden nur für Arbeitswerkzeuge verwendet:
scripts/serve.py (No-Cache-Server, nur nötig bei lokalen Modulen),
Puppeteer (automatische Snapshots/Überprüfung, scripts/export-frames.mjs → MP4).
Falls der Benutzer keines von beiden hat: (1) erstelle trotzdem eine einzelne Datei, öffne sie durch
Doppelklick; (2) visuelle Überprüfung über ?debug=1 (Scrub-Panel) und
manuelle Screenshots pro Schlüsselsekunde; (3) MP4 über Bildschirmaufnahme (OBS / Browser-Tab-Aufnahme)
– erkläre, dass Bildschirmaufnahmen Frames verlieren können und ein Frame-für-Frame-Rendering
Node benötigt. Erstelle niemals ein Deliverable, das npm install zum ANSEHEN benötigt.
ffmpeg ist ebenfalls optional. Überprüfe zuerst (ffmpeg -version); falls nicht vorhanden:
| Anforderung | 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 – biete Installation mit einem Befehl an (winget install Gyan.FFmpeg / brew install ffmpeg) oder Bildschirmaufnahme |
| Analyse von Referenzvideos (Frame-Extraktion) | fps= + tile= | Bitte Benutzer, Screenshots zu Schlüsselsekunden zu schicken, oder öffne das Video im Browser und mache Screenshots zu bestimmten Sekunden |
Ohne ffmpeg ist der Explainer-Workflow bis zur VO-Synchronisation vollständig; nur das MP4 benötigt eine Installation.
Player – keiner, Autoplay, Loop
Standard-Deliverable: kein Panel/Player auf dem Bildschirm, startet sofort
beim Öffnen und wiederholt von Anfang an, wenn es fertig ist (onComplete → play(0); bei Ton wird das Audio ebenfalls wiederholt). Versteckte Steuerung: R zum Wiederholen, Leertaste zum Pausieren. Scrub-Panel/Uhr erscheint nur mit ?debug=1 (Review-Tool),
und ?clean=1 unterdrückt Autoplay für den Export. Ton vorhanden? Versuche play()
direkt; falls vom Browser blockiert, pausiere bei Frame 0 und starte beim ersten Klick
– ohne Text "Zum Starten tippen". Dies ist bereits in beiden Startern verankert.
Strukturelle Verbote – PPT-Test, der maschinell überprüfbar ist
Andere Modelle (und du, wenn müde) verfallen in diese Muster, selbst wenn sie die untenstehenden Regeln gelesen haben. Überprüfe vor der Abgabe den CODE, nicht das Gefühl:
-
grep -c "class=\"scene\"\|\<section" index.html– wenn ≥ 3 Szenen als<section>mitautoAlpha/opacity ein- und ausgeschaltet werden → ist das eine Diashow. Szenen müssen wechseln, weil sich die WELT/KAMERA bewegt (Kamera bewegt sich, Whip in eine andere Ecke, Push-Through, Hintergrundwechsel), nicht weil eine Section ausgeblendet wird. Gültige Ausnahme: Bühnen-Cartoon (references/kartun-panggung.md) verwendet Cut/Shift um 96px zwischen den Bühnen – erlaubt, da jede Bühne voll belebt ist (≥ 10 agierende Objekte), nicht ein Standbild, das ausgeblendet wird. -
Es gibt einen visuellen roten Faden: ein Subjekt (kontinuierliche Aktion) ODER eine Collage-/Papier-/weiße Welt, die die Kamera erkundet (Cartoon, Foto, Katalog, Skizze). Wechselnde Vollbildfotos ohne gemeinsame Welt → PPT. Ein Bild + ein Satz pro Szene, die Szene wechselt jedes Mal → bleibt 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").
-
Zähle die Textebenen pro Szene: Eyebrow/Kicker + Titel + Body/Credits = 3 Ebenen → PPT. Maximum zwei: eine große Zahl/ein Satz + ein Welt-Label. Dokumente/Stempel/Datumsblöcke mit ≤ 3 kurzen Zeilen gelten als Objekt, nicht als Textebene.
-
Ken Burns (Skalierung 1.0→1.05 auf einem Foto) als einzige Bewegung → PPT. Jede Sekunde Bewegung muss aus der HINTERGRUND-BEWEGUNGSSPRACHE stammen, die im Style-Brief aus dem Menü
techniques.md§7c ausgewählt wurde (atmende Kamera auf strukturiertem Hintergrund, wandernde Farbverläufe, schwebende Blobs, lebendiges Korn, Lichtwische pro Segment, langsam rotierende große Formen, aufsteigende Partikel, atmendes Gitter, wandernde Geistertexte, Ken Burns + Parallax…). Balken/Linien/Streifen, die seitlich vorbeiziehen ("Lane", "Range", "Streak", horizontaler Partikelregen) wurden bereits in zwei aufeinanderfolgenden Projekten mit unterschiedlichen Namen verwendet – das ist kein Standard; nur wenn das Thema tatsächlich Geschwindigkeit/Fluss ist, und nicht in zwei aufeinanderfolgenden Projekten. -
Nur Fade + Scale Bump + Light Leak bei allen Schnitten als Übergang → PPT-Vorlage. Whip in eine andere Ecke, Cut zu einem Instrument (Karte/Tacho/Profil), Push-Through.
-
Explainer beginnt mit dem STARTER SEINES STILS:
starter-explainer-cartoon,-journalism,-catalog,-sketch(Collage-Modus: Kamera erkundet Stand-Assets),starter-explainer(kontinuierliche Aktion: Welt fließt), oderstarter-explainer-stage(Bühnen-Cartoon: eine Bühne pro Szene, Gelenk-Rigg, Kamera nur innerhalb der Bühne). Collage hat ein Rigg; Bühne hat ein anderes. NICHT vonassets/starter-opener.html(Text-Opener), und nicht von Null. -
Miniaturen sind Folien. Kamera-Zoom < 1,08, so dass ein Haus daumengroß ist und leerer Boden die Hälfte des Bildschirms füllt → PPT, auch wenn sich alles bewegt. Die Welt wird in bildschirmgroße Bühnen aufgeteilt, nicht in eine große, zu erkundende Karte (
kartun-panggung.mdRegel 1). -
Vorlagen-Skelett (Opener/Promo). Überprüfe Ablauf und Code: Erste Szene ist ein Text, der vergrößert wird und dann links verschwindet; drei parallel angeordnete Feature-Tiles/Karten; ein Eingabefeld/Suchfeld, das getippt wird; Reihenfolge Hook → Feature → Feature → Versprechen → Logo → CTA. Zwei oder mehr ohne konzeptionelle Anforderung → Vorlage, auch wenn die Haut neu ist. Wähle ein neues Skelett aus
references/opener-concept.md.
Ein einzelner Punkt nicht bestanden → überarbeite, bevor du es dem Benutzer zeigst.
Abgedeckte Arbeitstypen
Dieser Skill ist für Motion Graphic Web im ALLGEMEINEN. Explainer ist nur einer der Typen – er hat ein eigenes Dokument, weil seine Struktur anders ist, nicht weil er der wichtigste ist.
Starter werden nach ihrer Kategorie benannt: starter-opener.html für Opener, Promo,
Bumper, Intro und kinetische Typografie; starter-explainer-*.html für Explainer,
mit einem Suffix für den Modus/Stil (-cartoon, -journalism, -catalog, -sketch = Collage;
kein Suffix = kontinuierliche Aktion; -stage = Bühnen-Cartoon). Bühnen-Cartoon ist ein
Explainer-Modus (Stil 6), keine eigene Kategorie: Ziel ist weiterhin die Erklärung mit
VO, der Unterschied liegt nur in der Produktionsweise.
| Typ | Übliche Dauer | Merkmal | Rezept |
|---|---|---|---|
| Opener / Produkt-Promo | 25–40 s | ein Konzept aus dem Menü (Skelett entsteht aus dem Produkt, nicht aus einer Standard-Reihenfolge), ein besonderer Moment, Markenabschluss | references/opener-concept.md + Workflow 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 + charakteristische Bewegung, die in jeder Episode gleich ist | Workflow unten |
| Kinetische Typografie / Liedtext | 15–60 s | Text ist das Subjekt; Split pro Wort/Buchstabe; Rhythmus folgt dem Audio | techniques.md (Split + gerichtetes Blur, 3D-Pan pro Wort) |
| Title / Lower Third / Segment-Bumper | 2–6 s | kleines Element über Footage, sauberes Ein-/Ausblenden, transparenter Hintergrund | techniques.md |
| Explainer / Erklärvideo | 30–90 s | belegte Fakten, erscheinende Entitäten, wechselnde Perspektiven, fünf Stile | references/explainer.md + Starter pro Stil |
Explainer und Charaktere: Vor der Shot-Auswahl lesen
Für flache, charakterbasierte Bildungs-Cartoon-Explainer (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 innerhalb der Bühne und Cut/Shift um 96px zwischen ihnen,
Gelenk-Rigg mit manueller Transformation, null Untertitel, helle, flache Palette.
Unterscheide Satz, visuellen Beat, Bildausschnitt und Bühnenwechsel. Für den direkten
Aufbau in After Effects lies references/ae-bridge-higgsfield.md.
Diese speziellen Explainer-Richtlinien präzisieren die Opener-Regeln unten;
Schriftart-Beispiele, Szenenanzahl und Effekte sind keine universellen Rezepte.
Regel #1 – Das ist ein Video, keine Folie
Die häufigste Krankheit: Modelle bauen Szenen wie Folien auf – Titel + Untertitel
- Fließtext + eine Reihe von Badges. Das wirkt sofort wie "PPT" und wird abgelehnt.
Die harten Regeln:
- Für Opener: ein kurzer Satz + maximal ein Hauptobjekt pro Szene. Kein Kicker ("01 – FEATURE"), Untertitel, Beschreibungstext, Feature-Chips/Badges oder technische Metadaten (Paketname, lange URL). Chips, Schaltflächen und Labels, die Teil der verwendeten Produkt-UI sind, sind ausgenommen.
- Neue Information = neue visuelle Antwort. Bei Explainer ändere den Zustand/die Aktion in derselben Welt, wenn sie noch zusammenhängen; ein Satzwechsel erfordert nicht zwingend einen Kamerwechsel.
- Aufzählungspunkte werden durch Visuals ersetzt, nicht automatisch durch drei Kacheln. Wähle eine
Methode aus dem Feature-Menü in
references/opener-concept.md(ein Feature wird demonstriert, Wörter ändern sich, Objekt transformiert sich, Karten werden gemischt, Kachelraster…); zwei aufeinanderfolgende Opener verwenden nicht dieselbe Methode. - Szenen müssen leben. Die Kamera darf verweilen, während Objekte die Aktion tragen. Bewege die Kamera, um etwas zu verfolgen oder zu enthüllen; verlasse dich nicht auf Text-Fade/Slide über einem statischen Hintergrund oder wiederholtes Pan/Zoom in allen Segmenten.
- "Zoom in-out" = Bildgröße, nicht Kameraatmung. Wenn sich das Video statisch anfühlt oder
der Benutzer nach Zoom fragt, nähert sich die Kamera dem erzählenden Element (Halbnah /
Nah) und geht dann wieder in die Weite, dem Inhaltsrhythmus folgend; Atmung von wenigen Prozent
ist fast unsichtbar (
techniques.md§3b).
Lies references/anti-ppt.md, BEVOR du Szenen desigst – es enthält eine Liste echter
Verstöße und deren Korrekturen.
Regel #2 – Deterministisch oder tot
Keine einzige Zeile liest die Systemuhr. Alle Visuals sind reine Funktionen
von tl.time() (GSAP-Timeline-Zeit): Spektrum, laufende Zahlen, Partikel,
Kamerazittern (hochfrequente Sinuswelle, nicht Math.random()),
Position von "fließenden" Objekten (Tween über STRECKE, nicht Geschwindigkeitsakkumulation pro
Frame). Konsequenz: Scrub ist präzise wie in einer After Effects Timeline, und das
Frame-für-Frame-Rendering zu MP4 liefert jedes Mal identische Bilder.
Regel #3 – Stil entsteht aus dem Thema, nicht aus dem Starter, nicht aus Referenzen
Ein häufiger Fehler: Ein Opener für ein anderes Produkt sieht GENAU SO aus wie der Opener des vorherigen Produkts – dunkel, blaue Akzente, Glow, Nebel, dieselbe Schriftart – weil das Modell seinen Stil aus dem Starter übernommen hat. Die Animationen mögen gut sein, trotzdem gescheitert: Der Opener ist das Gesicht des Produkts, und zwei Produkte dürfen nicht dasselbe Gesicht haben.
- Style-Brief zuerst, Code danach. Bevor du den Starter anfasst, schreibe
diese sechs Zeilen und zeige sie dem Benutzer zusammen mit der Szenenübersicht:
- Thema/Produkt + …