Communitygithub.com

ErtanLabs Motion

Erstelle, rendere und überprüfe Motion Graphics mit einer deterministischen HTML-zu-Video-Pipeline. Jedes Stück leiht seine visuelle Grammatik von einem echten Artefakt aus der „Quellwelt“, protokolliert jede Entscheidung in einem Entscheidungsprotokoll, plant das Timing in einem frame-nummerierten Beat-Sheet, rendert frame-genau MP4, ProRes (mit Alpha) oder WebM über einen gebündelten parallelen Renderer und wird von einem integrierten Prüfer auf Haltezeiten, Lautstärke, Blitze, Farb-Tags und Plattform-Sicherheitszonen gemessen. Nutze es für kinetische Typografie, Erklärvideos, Video-Essays mit Voice-Over und Paper-Collage-Dokumentationen (der Look, den Leute „Vox-Stil“ nennen), filmische Showreels und Markenfilme, Titelsequenzen, animierte Diagramme, Karten, Globen und Flugrouten, Produkt-Promos, Lower Thirds, Zähler, soziale Vertikale (Reels, Shorts, TikTok) und Editor-Overlays, für Remotion- oder HyperFrames-Projekte und immer dann, wenn jemand eine Idee, ein Drehbuch oder einen Datensatz in ein kurzes Video verwandeln möchte, selbst wenn die Worte „Motion Graphics“ nie fallen.

Was ist ErtanLabs Motion?

ErtanLabs Motion ist eine KI-Fähigkeit, die die Erstellung von Motion Graphics durch eine deterministische HTML-zu-Video-Pipeline grundlegend verändert und sich an Benutzer von Claude Code, Cursor und Codex richtet. Es erzwingt einen entscheidungsbasierten Workflow, bei dem jede visuelle Wahl (Schriftart, Farbe, Timing, Bewegung) in einem Quellwelt-Artefakt begründet und in einer `ledger.md` protokolliert werden muss, wobei Standardlösungen durch bewusste Alternativen ersetzt werden. Die Pipeline plant jede Bewegung in einem frame-genauen Beat-Sheet, rendert über einen gebündelten parallelen Renderer (Node/Playwright oder externer Browser) und validiert automatisch mit `check.py` Metriken wie Halteverhältnisse, Lautstärke, Blitze und Sicherheitszonen. Es unterstützt mehrere Produktionsebenen (Grafik und Film) und Modi wie Sprint, Studio, Serie und Revision, mit spezieller Unterstützung für Voice-Over-Erklärvideos, Datenvisualisierung und kinetische Typografie, und integriert sich in Remotion- oder HyperFrames-Projekte oder kann eigenständig mit HTML-Vorlagen arbeiten. Das System stellt sicher, dass jedes Video eine einzigartige visuelle Identität hat, die aus dieser entscheidungsbasierten Pipeline resultiert, anstatt generische Ergebnisse zu liefern.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ErtanLabs/ertanlabs-motion/tree/HEAD/skills/ertanlabs-motion

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht ErtanLabs Motion?

Bewegungsarbeit wird auf vorhersehbare Weise generisch: Jede Entscheidung, die ein Briefing offen lässt, wird mit dem gefüllt, was am häufigsten vorkommt, und ein Video aus häufigsten Entscheidungen ist von Tausenden anderen nicht zu unterscheiden. Diese Fähigkeit macht die offenen Entscheidungen explizit, gibt jeder eine nachvollziehbare Quelle, rendert deterministisch und misst die Datei, bevor sie jemand sieht.

Hausregel: Jede sichtbare Entscheidung hat einen Besitzer. Wenn du nicht darauf zeigen kannst, woher eine Schriftart, Farbe, Kurve oder ein Sound stammt, hat niemand sie gewählt.

Der Weg

PhaseSchrittHinterlässt
A · EntscheidenA1 Die Maschine prüfen--doctor-Ergebnis, gewähltes Backend
A2 Das Briefing auseinandernehmenLogline, Canvas, Inventar, Soundtrack, Leitplanken, getaggte Annahmen
A3 Die Quellwelt findenDas Artefakt, dessen Grammatik das Stück entlehnt, Story-Device, Hero-Beat
A4 Den Standard schreiben, dann umstoßenDie häufigste Version und ihre Ersetzungen
A5 Das Protokoll führenledger.md neben der Komposition
B · MachenB1 In Frames planenBeat-Sheet mit geplanten Halten
B2 Jedes Element wiegenGewichtsklassen, Lead und Follow
B3 Die Welt Schriftart, Farbe, Sound setzen lassenProtokollzeilen, die aus der Quelle gefüllt werden
B4 Prüfen, dann rendernInspizierte Hero-Frames, dann die Datei
C · BeweisenC1 Messen und betrachtencheck.py-Bericht, Kontaktbogen, Tells-Index
C2 Behauptungen taggen und übergebenEvidenz-gruppierte Übergabe

Arbeitsmodi

  • Sprint (kurze Ein-Ideen-Stücke oder „mach es einfach“): Wähle die Quellwelt selbst, schreibe ein fünfzeiliges Protokoll (Logline, Welt, Hero-Beat, drei ersetzte Voreinstellungen, Canvas), baue. Prüfung und Messung laufen trotzdem.
  • Studio (Markenarbeit, längere Stücke, unklare Briefings): Rendere den Hero-Frame für zwei Kandidaten-Quellwelten mit --stills und zeige die beiden Bilder nebeneinander; Menschen beurteilen Bilder schneller als Beschreibungen. Der Benutzer wählt; wenn niemand verfügbar ist, behalte diejenige, deren Hero-Frame den Daumennagel-Test (C1) überlebt, und notiere den Grund im Protokoll.
  • Serie (Episoden für einen Kanal oder eine Kampagne): Lies zuerst jedes frühere ledger.md im Projekt. Eine neue Episode darf nicht sowohl die vorherige Quellwelt als auch die vorherige Hero-Beat-Struktur wiederholen; Markenkonstanten tragen ein fixed-Tag und sind ausgenommen.
  • Revision (Anmerkungen zu einem gelieferten Stück): Ordne jede Anmerkung Beat-Sheet-Zeilen zu und schreibe die Änderung als Beat-Sheet-Diff, alte Zeile → neue Zeile. Beispiel: „zu langsam am Anfang“ → grid 6-30 → 4-16, hold 30-60 → 16-40, jede spätere Zeile verschiebt sich um -20 Frames. Rendere nur den geänderten Bereich (--range) zur Überprüfung, dann das gesamte Stück, und hänge den Diff an das Protokoll an.
  • Erzähltes Erklärvideo (Video-Essays, Dokumentationen, Geschichte, Geld, Kriminalität oder Wissenschaftsstücke, die von Voice-Over angetrieben werden, Paper-Collage-Looks): Die Erzählung ist die Uhr und jeder Satz wird zu einem Beat. Zwei Regeln tragen die meiste Qualität: Ein Halt endet mit seinem Satz, und jede Tatsache auf dem Bildschirm wird entweder gesprochen oder auf einem Zettel mit Quelle angegeben. Lies references/paper-collage-explainer.md und beginne mit assets/collage-template.html.

Produktionsebene

Unabhängig vom Modus hat jedes Stück eine Ebene, die im Protokoll festgehalten wird:

  • Grafik (Standard): Die Grammatik der Quellwelt auf einer flachen Leinwand. Geeignet für Overlays, Lower Thirds, UI-Elemente, Datenhits und alles, was ein Editor compositet.
  • Film: Das Artefakt an seinem Ort, durch eine Kamera gesehen, von einer Quelle beleuchtet, die die Welt erklärt, mit Materialien, Leben zwischen den Beats, drei oder vier Szenen und gestaltetem Sound mit Musik. Geeignet für Showreels, Landing Pages und Repository-Startseiten, Markenfilme, Launches, Karten- und Routen-Präsentationen und immer dann, wenn jemand nach „filmisch“, „lebendig“, „Premium“ oder „weniger flach“ fragt. Lies vor der Planung references/film-level.md; es fügt eine Szenenliste oberhalb des Beat-Sheets und eigene Prüfungen hinzu.

Phase A · Entscheiden

A1 Die Maschine prüfen

node scripts/render.mjs --doctor

Die Ausgabe bestimmt das Backend: Node, Playwright oder ein installiertes Chrome/Edge, ffmpeg, ffprobe, NVENC. Melde es dem Benutzer in einer Zeile. Wenn der HTML-Pfad nicht verfügbar ist, listet B4 die Alternativen auf; wenn der Benutzer bereits ein Remotion- oder HyperFrames-Projekt hat, arbeite darin.

A2 Das Briefing auseinandernehmen

  1. Logline: Der einzelne Satz, den das Video sagt. Ohne einen wird das Stück zur Dekoration; entwirf einen und bestätige ihn.
  2. Canvas: Seitenverhältnis, Länge, fps, Ziel. Größen und Sicherheitszonen: references/formats-and-safe-zones.md.
  3. Inventar: Filmmaterial, Bildschirmaufnahmen, Logos, Fotos, Daten, KI-Platten. Vorhandenes Material formt das Konzept, anstatt darauf gelegt zu werden.
  4. Soundtrack: Voice-Over, Musik oder keins. Mit VO oder Musik bestimmt das Audio das Timing (references/sound-and-sync.md). Vom Benutzer geliefertes Audio ist endgültig: Füge niemals Pausen hinzu oder entferne sie, schneide, dehne oder nehme es ohne die Zustimmung des Benutzers neu auf; passe stattdessen das Bild an.
  5. Leitplanken: Markenschriftarten und -farben, erforderliche und verbotene Elemente, Abgabetermin.

Unbekanntes wird zu Annahmen im Protokoll, getaggt mit assumed. Stelle eine Frage nur, wenn die Antwort die Quellwelt ändern würde.

A3 Die Quellwelt finden

Wähle nicht „einen Stil“. Wähle ein echtes Artefakt aus der Welt des Themas und entlehne seine Grammatik: eine Gezeitentabelle, einen Apothekenprospekt, eine Split-Flap-Abfahrtstafel, eine Seismographenrolle, ein geschwärztes Dossier, einen Redaktionstisch mit Ausschnitten. Ein Artefakt klärt mehrere Entscheidungen gleichzeitig - die Schriftart, in der es gesetzt ist, die Tinten und Materialien, die die Palette ergeben, die Art, wie sich Dinge darin verändern (umblättern, drucken, stempeln, füllen, plotten), seine Oberfläche - sodass die Entscheidungen miteinander übereinstimmen.

  1. Liste fünf Artefakte auf, die Menschen, die sich mit dem Thema beschäftigen, tatsächlich in der Hand halten oder lesen.
  2. Bevorzuge dasjenige mit eingebauter Bewegung: etwas, das von selbst umblättert, druckt, füllt, plottert, stempelt oder scrollt.
  3. Entlehne Regeln, nicht Bilder. Kein Foto eines Tickets hinter dem Text, sondern die Logik des Tickets: Eine Perforation trennt, eine Seriennummer zählt, ein Stempel annulliert.

references/source-worlds.md beschreibt 31 Welten, gruppiert nach ihrer Bewegungsart. Behandle es als Kalibrierung; die beste Welt für einen Job ist oft nicht auf der Liste.

Nenne zwei weitere Dinge:

  • Story-Device: Ein Satz, der beschreibt, wie die Logline sichtbar wird („die Gezeitenkurve zeichnet und das Wasser im Bild folgt dem Stift“).
  • Hero-Beat: Der Beat, der die Logline trägt. Er bekommt den längsten geplanten Halt und die größte Zustands- oder Größenänderung im Stück. Nach dem Rendern sollte der längste Halt, den check.py misst, der des Helden sein; wenn nicht, liegt die Betonung an der falschen Stelle. Unter einem Voice-Over endet der Halt dennoch mit seinem Satz und der Pause danach. Wenn der Held mehr Zeit braucht, bitte um eine längere Pause, während die Stimme noch geschrieben oder aufgenommen wird; bei einer fertigen Aufnahme lass den Halt passen und halte niemals das Bild über die nächste Zeile.

A4 Den Standard schreiben, dann umstoßen

Die erste Idee ist normalerweise die häufigste. Mache sie sichtbar, ersetze sie dann:

  1. Schreibe die Standardversion dieses Videos in einer ehrlichen Zeile: Was ein durchschnittliches Modell aus dieser Eingabeaufforderung machen würde.
  2. Wähle mindestens drei Entscheidungen in dieser Zeile (Typografie, Palette, Layout, Eintritt, Übergang, Sound) und schreibe für jede eine Ersetzung mit ihrer Quelle: die Quellwelt, das Material, die Daten oder der Soundtrack.
  3. Ein Standard, den du nicht mit einem Grund ersetzen kannst, darf bleiben; er kommt mit dem Tag owned default ins Protokoll.

A5 Das Protokoll führen

Fülle es vor dem Bau aus, zeige es und speichere es als ledger.md neben der Komposition. Es ist auch das Gedächtnis für die nächste Episode.

PROTOKOLL · <Projekt> · <Datum>
Logline:
Canvas: 1080×1920 · 30 fps · 8 s · Reels · Sicherheitszone: vertikal
Quellwelt:
Story-Device:
Hero-Beat (Frames):
Standardversion (eine Zeile):

| Schicht | Entscheidung | Quelle / Grund | Ersetzter Standard |
|---|---|---|---|
| Typografie | | | |
| Palette | Hex-Werte + Aufgabe jeder | abgetastet von ... | |
| Layout | | | |
| Zeitbasis | fps, Gewichtsklassen, Halte | | |
| Textur | | | |
| Sound | | | |
| Übergänge | | | |

Rechte (Schriftarten, Musik, Daten, Bilder):
Annahmen:

Phase B · Machen

B1 In Frames planen

Ein Beat-Sheet ist ein kompaktes Belichtungsblatt: Bewegung als Daten vor Code geschrieben. Bereiche sind [Start, Ende) in Frames; Halte bekommen eigene Zeilen.

BEAT-SHEET · 30 fps · 240 Frames (8 s) · 1080×1920
| Beat | Frames | Element | Klasse | Aktion | Trägt | Sound |
|---|---|---|---|---|---|---|
| 1 | 6-30 | Raster | Marke | Linien plotten, gestaffelt | Eintritt | Stift |
| 1 | 30-60 | - | | HALT | | |
| 2 | 60-168 | Gezeitenkurve | Set Piece | plotet; Wasser folgt der Spitze | Verbindung | leichte Dünung |
| 2 | 168-198 | - | | HALT (Held) | | Stille |
| 3 | 198-200 | Überschrift | Stempel | landet im Wasser | Landung | ein Klopfen |
HALTE: 30-60, 168-198, 200-240 → geplantes Halteverhältnis 42%

Trägt benennt, was der Betrachter gewinnt: Ein Element tritt ein, zwei Dinge verbinden sich, ein Zustand ändert sich oder ein Beat landet auf dem Soundtrack. Eine leere Trägt-Zelle kennzeichnet Dekoration; schneide sie.

Halteverhältnis ist der Anteil der Frames, in denen sich nichts Sinnvolles bewegt. Erklärvideos und Titelsequenzen liegen normalerweise bei etwa 20-35%, Musik-Cut-Montagen niedriger, besinnliche Stücke höher. Körnung und langsame Drift unter 2 px sind Textur, keine Bewegung. check.py misst das Verhältnis, so dass Plan und Ergebnis verglichen werden können.

Mit VO oder Musik konvertiere Wort- und Beat-Zeitstempel in Framenummern und schreibe sie in das Blatt. Unter einem Voice-Over bekommt jeder Beat auch einen Cue, sein erstes betontes Wort: Das Hauptelement des Beats ist bis zum Cue an Ort und Stelle, und kein Halt läuft in den nächsten Satz hinein.

B2 Jedes Element wiegen

Gib jedem Element eine Gewichtsklasse; die Klasse wählt ihre Kurve und Dauer aus dem Satz in references/motion-and-timing.md, sodass sich Dauern unterscheiden, weil Massen unterschiedlich sind, nicht aus Geschmack.

KlasseTypische ElementeAnkunftAbreiseKurve
propPunkte, Tags, kleine Zahlen6-12 f4-8 fsettle rein, launch raus
panelTitel, Karten, Diagrammblöcke14-24 f10-16 fheavy
set pieceKamera, Wasserflächen, Karten, große Felder30-90 f20-45 fheavy; linear für Maschinen
markLinien, Routen, Unterstreichungen, HandschriftLänge ÷ ~30 px pro Frameverblassenpen
stampStempel, Endwerte, Schnitte1-2 f-step
  • Lead und Follow. Zu jedem Zeitpunkt führt eine Bewegung; jede andere Bewegung wird von ihr verursacht (die Stiftspitze erreicht das Extrem, also öffnet sich ihr Label).
  • Abhängigkeitsreihenfolge. Ein Element erscheint erst, nachdem das, wovon es abhängt, auf dem Bildschirm ist: eine Achse vor ihren Daten, eine Route vor ihrer Markierung.
  • Poster-Frame. Frame 0 ist oft das Thumbnail, also komponiere ihn als fertiges, lesbares Bild und lasse Bewegung daraus wachsen.
  • Frame-rein. Jeder Wert wird allein aus der Framenummer berechnet: kein Wanduhr-CSS, Timer oder ungesäter Zufall (references/composition-contract.md).

B3 Die Welt Schriftart, Farbe, Sound setzen lassen

  • Typografie wird von der Quellwelt geerbt. Betonung muss den Daumennagel-Test (C1) überleben: Ein Wort, das nur durch Farbton markiert ist, verschwindet in Graustufen bei kleiner Größe. Betone daher mit Größe, Gewicht, Platzierung oder Timing. Setze <html lang> und verwende gebietsschemabewusste Groß-/Kleinschreibung; render.mjs glyph-testet den tatsächlichen Text auf der Seite. Details: references/typography.md.
  • Farbe: Jede Farbe hat eine benannte Aufgabe (Hintergrund, Schriftart, Signal, eine Datenreihe). Eine Farbe ohne Aufgabe wird entfernt. Taste Werte ab, anstatt sie zu erfinden: python scripts/check.py --palette reference.jpg. Details: references/color-and-texture.md.
  • Sound-Aussagen sind immer nur Gemessen oder Nicht überprüft, weil Audio nicht visuell überprüft werden kann. Jeder Eintrag in der Sound-Spalte zeigt auf eine sichtbare Ursache oder auf das Bett. Details: references/sound-and-sync.md.

B4 Prüfen, dann rendern

BackendWann
HTML + render.mjsStandard, wann immer --doctor besteht. Beginne mit assets/composition-template.html (oder assets/collage-template.html für erzählte Erklärvideos); Vertrag in references/composition-contract.md.
Remotion / HyperFramesDer Benutzer arbeitet bereits in einem. Gleiches Protokoll und Beat-Sheet, andere Syntax: references/backends.md.
Artefakt-VorschauNur wenn die Umgebung einen Bewegungs- oder Video-Artefakttyp bietet, und nur als Vorschau; ein Liefergegenstand ist immer noch eine gerenderte Datei.
PlattenAufnahmen, die Code nicht überzeugend zeichnen kann (Menschen, reale Orte in Bewegung) stammen aus Filmmaterial oder einem Videomodell als Platten ohne Text; alles Typografische bleibt in der Komposition. references/backends.md.

Karten, Globen und Routen: Lies auch references/maps.md (§7a für Präsentationsrouten).

Beweise den Hero-Beat, bevor du den Rest baust:

node scripts/render.mjs comp/index.html --stills 0,170,last             # Poster, Hero, End-Frame
node scripts/render.mjs comp/index.html --range 150-210 --scale 0.5     # Hero-Beat bei halber Größe
node scripts/render.mjs comp/index.html -o comp/out.mp4                  # Vollständiger Render
node scripts/render.mjs comp/index.html --alpha -o comp/overlay.mov     # ProRes 4444 mit Alpha

Öffne Prüfbilder mit deinem Bildwerkzeug.

Phase C · Beweisen

C1 Messen und betrachten (Prüfbericht)

Führe nach dem Rendern aus:

python scripts/check.py comp/out.mp4

Die Ausgabe enthält fünf Abschnitte.

(fortgesetzt ...)

Verwandte Skills