calesthio/motion-graphics-direction

Motion Graphics Direction (Regie für Bewegungsgrafiken)

Verwenden Sie dieses Skill, um eine Videobriefing in Bewegungsgrafiken zu verwandeln, die erklären, hervorheben, markenbildend wirken oder das Tempo des Stücks bestimmen. Behandeln Sie Bewegung als redaktionelle Richtung: Jede Bewegung sollte Bedeutung offenbaren, Aufmerksamkeit lenken, die Struktur verdeutlichen oder ein bewusstes Gefühl erzeugen.

Dies ist anbieterunabhängig. Verwenden Sie es, bevor Sie ein Modell, einen Renderer, eine Animationsbibliothek, ein Bearbeitungswerkzeug oder eine Compositing-Umgebung auswählen.

Evidenzhaltung

Dokumentierte Fakten:

• WCAG 2.2 verlangt, dass Webinhalte Blitze oberhalb der Drei-Blitze-Schwelle vermeiden und dokumentiert, dass interaktionsausgelöste Bewegung deaktivierbar sein sollte, sofern nicht wesentlich. Verifiziert am 10.07.2026 aus den W3C WCAG Understanding-Seiten.
• Die W3C-Technik C39 dokumentiert prefers-reduced-motion als eine Möglichkeit, Nutzern zu erlauben, Animationen zu verhindern. Verifiziert am 10.07.2026.
• Die WCAG-Kontrastrichtlinie legt für normalen Text 4,5:1 und für großen Text 3:1 auf Stufe AA fest, mit höheren AAA-Verhältnissen. Verifiziert am 10.07.2026.
• Apple, Material Design, Microsoft Fluent und IBM Carbon behandeln Bewegung alle als ein Verhalten des Designsystems mit Zweck, Timing, Easing, Barrierefreiheit und Konsistenzbeschränkungen und nicht als Dekoration. Verifiziert am 10.07.2026.
• Die Netflix-Richtlinien für zeitgesteuerte Texte verwenden maximal zwei Zeilen und sprachspezifische Zeilenlängenbeschränkungen, z. B. 42 Zeichen pro Zeile für viele lateinische Schriftarten bei Untertiteln. Verifiziert am 10.07.2026.
• Datawrapper erklärt, warum Balken- und Säulendiagramme normalerweise bei Null beginnen sollten, da die Balkenlänge die Größe codiert. Verifiziert am 10.07.2026.

Empirische Beobachtungen aus der Produktionspraxis:

• Zuschauer lesen Bewegungsgrafiken in einer kleinen Anzahl von Aufmerksamkeitsfenstern: Eintritt, Halten, Betonung, Austritt. Zu viele gleichzeitige Änderungen beeinträchtigen oft das Verständnis.
• KI-generierte und vorlagenbasierte Videos scheitern oft, weil Overlays mit dem Motiv konkurrieren, Datenmarkierungen ohne Maßstabskontext animiert werden und Typografie nach Stil statt nach Lesbarkeit ausgewählt wird.
• Starke Motion-Pakete wirken meist einfach, weil viele versteckte Entscheidungen festgelegt sind: Schriftgröße, Raster, Sicherheitsbereiche, Easing-Familie, Timing-Verhältnisse, Übergänge, Untertitelpolitik und Datenbeschriftungspolitik.

Produktionsheuristiken:

• Wenn Bewegung nicht ändert, was der Betrachter versteht, sich erinnert oder fühlt, entfernen Sie sie oder machen Sie sie leiser.
• Animieren Sie Aufmerksamkeit in Schichten: höchstens eine primäre Idee, einen unterstützenden Hinweis und ein Hintergrundverhalten.
• Bevorzugen Sie Bewegungskontrast gegenüber Bewegungsvolumen: Eine einzelne präzise Enthüllung wirkt oft hochwertiger als viele animierte Teile.
• Entwerfen Sie aus Gründen der Barrierefreiheit bereits in der Konzeptphase einen reduzierten Bewegungspfad, nicht als späten Patch.

Beginnen Sie mit der Aufgabe der Grafik

Klassifizieren Sie jede Bewegungsgrafik nach ihrer Produktionsaufgabe, bevor Sie sie entwerfen:

Aufgabe	Verwenden Sie es für	Richtungstest
Orientierung	Titelsequenz, Abschnittskarte, Kapiteleröffnung, Karten-/Ortsmarkierung	Kann der Betrachter beantworten "Wo bin ich in der Geschichte?"
Identifikation	Bauchbinde, Sprecherlabel, Produktlabel, Quellenangabe	Ist das Label lesbar, bevor die Aufmerksamkeit zum Filmmaterial zurückkehrt?
Betonung	Callout, Hervorhebung, Zoom-Box, Zeiger, Preis-/Funktionsenthüllung	Zeigt es auf eine Sache, ohne die Beweise zu verdecken?
Erklärung	Diagramm, Prozessablauf, kinetische Typografie, UI-Walkthrough	Offenbart Bewegung Kausalität oder Reihenfolge?
Beweis	Daten-Callout, Diagramm, Claim-Karte, Zitat, Vorher/Nachher	Sind Quelle, Nenner, Einheit und Zeitrahmen sichtbar genug?
Rhythmus	Taktsynchrone Schrift, Übergang, visuelle Interpunktion	Unterstützt es das Tempo, ohne den Inhalt zu verdecken?
Brand-Affekt	Logo-Sting, Launch-Film, Social-Anzeige, Hero-Titel	Drückt es die Haltung der Marke aus, nicht nur ihre Farben?

Wenn eine Grafik versucht, mehr als zwei Aufgaben zu erfüllen, teilen Sie sie in Bewegungen auf.

Entscheiden Sie über Bewegungszweck vor Stil

Schreiben Sie für jede Grafik einen ein-sätzigen Bewegungszweck:

• "Die Dreischritt-Sequenz in derselben Reihenfolge enthüllen, in der der Erzähler sie erklärt."
• "Die Produktmetrik glaubwürdig erscheinen lassen, indem Quelle und Ausgangsbasis lange genug gehalten werden, um sie zu lesen."
• "Die Bauchbinde leise eintreten lassen, damit sie den Sprecher identifiziert, ohne die Emotion zu unterbrechen."
• "Einen scharfen Typografie-Snap auf das Kampagnenversprechen verwenden, dann eine ruhige Haltung zur Wiedererkennung."

Lehnen Sie Zwecke wie "dynamisch machen", "Energie hinzufügen" oder "cool aussehen" ab, es sei denn, sie werden in einen Zuschauereffekt übersetzt.

Hierarchie über die Zeit aufbauen

Die Hierarchie von Bewegungsgrafiken ist ebenso zeitlich wie visuell. Geben Sie dem Betrachter einen kontrollierten Lesepfad:

1. Rahmen etablieren: wohin das Auge zuerst schauen soll.
2. Hauptidee enthüllen: ein Titel, eine Zahl, ein Label oder eine visuelle Änderung.
3. Kontext hinzufügen: Einheit, Label, Quelle, Sprecherrolle, UI-Position, Vergleich.
4. Halten: genug Ruhe zum Lesen und Verstehen lassen.
5. Austritt oder Beruhigung: den Rahmen räumen, bevor die nächste Idee konkurriert.

Für kurze Social-Media-Inhalte kann dies in unter zwei Sekunden geschehen; für dichte Erklärvideos oder Datengrafiken können fünf bis acht Sekunden nötig sein. Wählen Sie die Dauer nicht nur aus Plattformnormen, sondern aus der Leselast, dem Erzähltempo und der visuellen Komplexität.

Timing- und Easing-Richtung

Beschreiben Sie Timing in Schlägen, nicht in vagen Adjektiven. Eine nützliche Spezifikation umfasst:

• Eintrittsdauer;
• Haltedauer;
• Betonungsmoment;
• Austrittsdauer;
• Easing-Charakter;
• Beziehung zu Erzählung, Musik oder Schnittpunkt;
• was still bleibt.

Häufige Timing-Heuristiken:

• Labels und Bauchbinden: schneller Eintritt, stabiles Halten, leiser Austritt. Der Eintritt sollte spürbar, aber nicht theatralisch sein, es sei denn, das Stück wird von der Marke geleitet.
• Kinetische Typografie: nur die Wörter bewegen, die Bedeutung tragen. Unterstützende Wörter ruhiger halten.
• Diagramme: jeweils eine Beziehung enthüllen; jeden kausalen Link abschließen, bevor der nächste beginnt.
• Daten-Callouts: das Maß animieren, dann den Endwert mit seiner Einheit und Quelle halten.
• UI-Overlays: mit der Benutzeraktion synchronisieren. Wenn ein Zeiger/Callout zu spät kommt, könnte der Betrachter auf den falschen UI-Zustand schauen.
• Übergänge: als Interpunktion behandeln. Ein harter Schnitt, eine Überblendung, ein Wisch, ein Morph oder ein Typografie-Burst sollte die logische Beziehung zwischen den Szenen widerspiegeln.

Easing-Vokabular:

• Linear: mechanisch, konstant, meist am besten für Fortschritt, Uhren, Scannen oder absichtlich robotische Systeme.
• Ease-out: schnelle Ankunft mit sanftem Einpendeln; nützlich für Labels, Karten und Callouts, die in die Aufmerksamkeit des Betrachters gelangen.
• Ease-in: verzögerte Beschleunigung; nützlich für Austritte, Züge oder "sich entfernende" Elemente.
• Ease-in-out: kontrollierte Bewegung zwischen zwei Zuständen; nützlich für UI-Zustandsänderungen und Diagramme.
• Spring/Überschwingen: ausdrucksstark, physikalisch, verspielt, kann aber billig oder ablenkend wirken, wenn es bei ernsthaften Behauptungen, juristischen Texten oder dichten Daten verwendet wird.
• Step/halten: redaktionell, rhythmisch, nützlich für Titelcards, Terminal-/UI-Demos und kinetische Typografie.

Designsystemquellen unterscheiden sich in den genauen Werten. Verwenden Sie die Brand-Tokens des Projekts, wenn verfügbar; beschreiben Sie andernfalls die Kurvenintention und bitten Sie die Implementierung, passende Tokens in der gewählten Laufzeitumgebung auszuwählen.

Komposition und Layout

Führen Sie Regie für Bewegungsgrafiken innerhalb eines echten Rahmens, nicht auf einer leeren Zeichenfläche.

Prüfen Sie:

• Subjektfreiheit: Gesichter, Hände, Produktinteraktionen, medizinische/rechtliche Haftungsausschlüsse, Untertitel oder das Schlüsselobjekt nicht verdecken.
• Sicherheitsbereiche: Ränder für Plattform-UI, Untertitel und Zuschneidevarianten reservieren. Für Social-Media-Auslieferungen bei Bedarf 9:16, 1:1, 16:9 und zugeschnittene Derivate separat angeben.
• Augenführung: Grafiken dort platzieren, wo der Betrachter bereits hinschaut oder wohin das Auge als nächstes reisen soll.
• Tiefenbeziehung: Entscheiden, ob Grafiken auf einer Glasschicht über dem Filmmaterial leben, an Objekten in der Szene haften oder als redaktionelle Karten zwischen den Aufnahmen existieren.
• Kontrastzone: Scrims, Panels, Unschärfe oder lokale Schatten hinzufügen, wenn das Filmmaterial zu unruhig für Text ist.
• Negativraum: einen ruhigen Bereich zum Lesen lassen. Wenn das Filmmaterial keinen bietet, einen durch Zuschnitt, Neurahmung, Unschärfe oder Karte schaffen.
• Kontinuität: Ankerpositionen über eine Sequenz hinweg tragen, damit wiederkehrende Labels leicht zu finden sind.

Vermeiden Sie "schwebende Dekoration", die nicht auf das Filmmaterial, Raster, Subjekt oder die Erzählung ausgerichtet ist.

Typografie für Bewegtbild

Typografie muss Bewegung, Kompression, kleine Bildschirme und kurze Haltezeiten überstehen.

Checkliste zur Richtung:

• Zuerst eine Schriftrolle wählen: Titel, Untertitel, Label, Beschriftung, Zahl, Quelle, rechtlicher Hinweis, UI-Anmerkung.
• Eine Schriftgrößenstaffelung mit klarem Kontrast zwischen den Rollen verwenden. Nicht nur auf Farbe verlassen.
• Zeilenlängen für Bewegtbild kurz halten. Wenn ein Satz nicht in einem einzigen Halt gelesen werden kann, in Schläge aufteilen.
• Gewichtsänderungen sparsam einsetzen; animierte Gewichtsänderungen können nach der Kompression flimmern.
• Dünne Striche, winzige Versalien und enge Laufweite über Video vermeiden.
• Markenschriften beibehalten, wenn vorhanden, aber für Untertitel, juristische Texte oder winzige UI-Labels bei Bedarf durch eine besser lesbare Ersatzschrift ersetzen.
• Für mehrsprachige/lokalisierte Versionen Erweiterungsraum reservieren und Layouts vermeiden, die von englischen Wortlängen abhängen.
• Bei Bauchbinden Name, Rolle, Organisation und optionalen Kontext in eine absichtliche Hierarchie trennen.
• Bei kinetischer Typografie semantische Betonung sichtbar machen: Nomen, Verben, Zahlen, Kontraste und Umkehrungen erhalten Bewegung; Füllwörter bleiben stabil oder gruppieren sich mit ihrem Satz.

Barrierefreiheitsanker:

• WCAG-Kontrast als Untergrenze für digitalen Text verwenden: 4,5:1 normaler Text und 3:1 großer Text bei AA; stärkeren Kontrast für mobiles Video, Kompression und Außenbetrachtung in Betracht ziehen.
• Bedeutung nicht allein durch Farbe vermitteln. Farbe mit Labels, Symbolen, Form, Position oder Text kombinieren.
• Wichtigen Text lange genug auf dem Bildschirm halten, um ihn in natürlichem Tempo vorzulesen, dann einen Puffer hinzufügen.

Markensysteme und Bewegungssprache

Übersetzen Sie Marke in Verhalten, nicht nur in Aussehen:

• Premium/minimal: weniger Bewegungen, längere Halte, präzises Easing, zurückhaltende Übergänge, großzügiger Negativraum.
• Redaktionell/Nachrichten: direkte Schnitte, quellenorientierte Bauchbinden, stabile Diagramme, zurückhaltende Betonung.
• SaaS/Produkt: UI-verankerte Overlays, klare Schrittsequenzierung, konsistente Callout-Grammatik, responsive Mikro-Bewegung.
• Jung/Sozial: größere Schrift, rhythmische Schnitte, Taktakzente, kräftigere Farbe, aber Lesbarkeit dennoch schützen.
• Technisch/Erklärung: Diagrammlogik, progressive Offenlegung, konsistente Symbole, weniger ornamentale Bewegung.
• Luxus/Markenfilm: langsame Enthüllung, kontrollierte Parallaxe oder Tiefe, taktiles Materialverhalten, weniger Behauptungen.

Erstellen Sie eine Bewegungspalette für das Projekt:

• Eintrittsstil;
• Austrittsstil;
• Betonungsstil;
• Übergangsfamilie;
• Bauchbindenverhalten;
• Datenenthüllungsverhalten;
• Alternative mit reduzierter Bewegung;
• verbotene Bewegungen.

Halten Sie diese Palette klein. Konsistenz ist es, die den Zuschauern ermöglicht, das System zu lernen.

Barrierefreiheit und Zuschauersicherheit

Wenden Sie diese als harte Einschränkungen an, es sei denn, das Ergebnis ist ein privater Entwurf mit ausdrücklichem Verzicht:

• Keine Blitze oberhalb der WCAG-Drei-Blitze-Schwelle erzeugen. Schnelles, kontrastreiches Flimmern vermeiden, auch wenn es technisch unter der Schwelle liegt.
• Eine Behandlung mit reduzierter Bewegung für interaktive/Web/App-Oberflächen und für Versionen, die wahrscheinlich in die UI eingebettet werden, bereitstellen oder spezifizieren.
• Unnötige Parallaxe, Drehungen, Wirbel, schnelle Zooms, großflächige Tiefenänderungen und mehrachsige Bewegungen vermeiden, wenn sie nicht wesentlich sind.
• Textkontrast und Nicht-Text-Kontrast gegen wechselndes Filmmaterial sicherstellen, nicht nur gegen ein statisches Design-Mockup.
• Wesentliche Informationen nicht nur in Bewegung platzieren; der endgültige gehaltene Zustand sollte den Kernpunkt immer noch vermitteln.
• Schnell bewegte Untertitel vermeiden. Die Bewegung von Untertiteln sollte nicht mit dem Lesen konkurrieren.
• Wenn ein Video kontinuierliche Animation, automatisch fortschreitende Grafiken oder Hintergrundschleifen enthält, Pausen-/Stoppverhalten spezifizieren, wenn es in einer interaktiven Umgebung veröffentlicht wird.
• Für Plattformvideos Untertitel oder untertitelsichere Layouts einfügen, wenn Sprache Bedeutung trägt.

Reduzierte Bewegung bedeutet nicht immer keine Animation. Bevorzugen Sie Deckkraft, einfache Schnitte, kürzere Reisewege, stabile Endzustände und niedrigere Geschwindigkeit, während Sie Orientierung und Bedeutung bewahren.

Daten-, Claim- und Quellenintegrität

Bewegung kann Behauptungen überzeugender erscheinen lassen, als die Beweise stützen. Behandeln Sie Datengrafiken als redaktionelle Beweise.

Erforderlich:

• Quelle;
• Datum oder Zeitrahmen;
• Nenner oder Grundgesamtheit;
• Einheiten;
• Vergleichsbasis;
• Unsicherheit, Schätzstatus oder Stichprobengröße, wenn relevant;
• Transformationshinweise wie indizierte Werte, Durchschnitte, Glättungen oder Prognosen.

Datenbewegungsregeln:

• Animieren Sie proportionale Markierungen ehrlich. Wenn Balkenlänge die Größe codiert, ist eine Null-Baseline normalerweise erforderlich, es sei denn, eine klar gekennzeichnete Alternative ist gerechtfertigt.
• Verwenden Sie kein 3D, keine Perspektive, kein elastisches Überschwingen oder dekorative Skalierung, wenn es den Vergleich verzerrt.
• Vermeiden Sie es, eine Zahl ohne den Nenner oder Zeitrahmen nach oben zu animieren.
• Keinen Start- oder Endrahmen auswählen, um einen Trend zu übertreiben.
• Diagrammachsen, -beschriftungen und -einheiten während des Haltens präsent halten, nicht nur vor oder nach der Animation.
• Wenn ein Claim qualitativ ist ("schnelleres Onboarding"), lassen Sie es nicht wie gemessene Daten aussehen, es sei denn, eine gemessene Quelle existiert.
• Für Vorher/Nachher-Aufnahmen Zuschnitt, Zeitpunkt, Beleuchtung und Maßstab anpassen, wenn Vergleichsfairness wichtig ist.
• Für Produkt-UI-Overlays zwischen "konzeptioneller UI", "Prototyp", "simulierten Daten" und "tatsächlicher Produktaufnahme" unterscheiden.

Wenn rechtliche, medizinische, finanzielle oder sicherheitsrelevante Behauptungen auftauchen, nach genehmigten Texten und Quellenmaterial fragen. Die Bewegungsrichtung kann keine Substantierung erfinden.

Arbeiten mit Filmmaterial oder generiertem Video

Bevor Sie Overlays hinzufügen, überprüfen Sie die tatsächliche Aufnahme:

• Wo ist die Aufmerksamkeit des Subjekts?
• Welche Bereiche sind visuell ruhig?
• Bekämpft die Kamerabewegung das Overlay?
• Macht die Schärfentiefe eine verfolgte Befestigung plausibel?
• Ist Platz für Untertitel und Plattform-UI?
• Gibt es Momente, in denen die Grafik verschwinden sollte, um Performance oder Beweise atmen zu lassen?

Overlay-Strategien:

• Bildschirmflächen-Overlay: stabile Karten, Untertitel, Beschriftungen, Titelschriften.
• Szenenverankertes Overlay: verfolgte Labels, Pfeile, Produkt-Pins, Kartenpunkte. Nur verwenden, wenn die Tracking-Qualität es unterstützt.
• Redaktioneller Einschub: Vollbild-Diagramm oder Karte zwischen Filmmaterialbewegungen.
• Geteilte Komposition: Filmmaterial plus Diagramm/UI-Panel. Verwenden, wenn Beweise mehr Platz benötigen, als ein Overlay sicher bieten kann.
• Matcher Cut oder Morph: Übergang von einem Objekt/Filmmaterial zu einer Grafik, wenn die Aufnahme die Transformation unterstützt.

Iterations- und Handoff-Artefakte

Iterieren Sie zuerst in Ihrer Spezifikation, nicht durch Neuinterpretation des ausgerenderten Ergebnisses:

• Texten Sie die Bewegungsbeschreibung, bis sie die Absicht vermittelt, ohne Implementierungsjargon zu benötigen.
• Spezifizieren Sie je nach Kontext mit Storyboard-Notizen, Frame-by-Frame-Beschreibungen, Timing-Diagrammen, Zustandsmaschinen, Diagramm-Vorlagen oder verbalen Anweisungen.
• Fügen Sie Referenz-Standbilder aus dem Filmmaterial oder Mockups ein, die zeigen, was wann erscheint.
• Fügen Sie Zustandsbeschriftungen für jeden Frame hinzu: Eintritt, Halten, Betonung, Austritt.
• Kennzeichnen Sie, was für die Laufzeitumgebung fest codiert vs. datengesteuert vs. parametrisch vs. manuell ist.

Wiederkehrende Spezifikationselemente:

• Übergeordneter Bewegungszweck: Ein Satz pro Grafik.
• Timing-Blöcke: Dauer pro Zustand in Sekunden oder Bildern.
• Easing-Token oder Beschreibung: z. B. "Name des Brand-Keywords" oder "sanftes Ease-out" als Kurvenabsicht.
• Layout-Referenz: Position, Rand, Ausrichtung, Rasterplatzierung relativ zu Sicherheitsbereichen.
• Typografie-Spezifikation: Rolle, Schriftfamilie (Fallback-Stapel), Stärke, Größe, Zeilenabstand, Zeichenabstand.
• Farb-/Kontrastreferenz: Hex-, OKLCH- oder Token-IDs.
• Datenzuordnung: Welches Feld im Datensatz füllt welche visuelle Eigenschaft.
• Überprüfungspunkte für Barrierefreiheit: Reduzierte Bewegung, Lesegeschwindigkeit, Kontrast, Flash-Grenze.

Zusammensetzung der Konfiguration

Wenn Sie dies als fertiges Skill speichern (über den Konfigurationseditor), geben Sie folgende Struktur an:

• systemPromptFragment: Der Kernanweisungstext, den das Skill gelegentlich erneut bereitstellt.
• name: calesthio/motion-graphics-direction
• description: Ihre lokalisierte Beschreibung
• coordinates: { } (optional)
• modelAllowlist: [] (optional)

---
metadata:
  author: calesthio
  id: skill-abc123def
  category: Media Production
  version: 1.0.0
  tags: [motion-graphics, video-production, typography, accessibility, data-visualization]
---

(Hinweis: Das tatsächliche SKILL.md hat keinen YAML-Frontmatter mehr; dies dient nur zur Veranschaulichung für Setup-Tools.)

Weiterführende Literatur

• WCAG 2.2 Verstehen: Blitze
• WCAG 2.2 Verstehen: Bewegung durch Interaktion
• CSS prefers-reduced-motion (Mozilla)
• Richtlinien zur Barrierefreiheit von Untertiteln (Netflix)
• Datawrapper: Wann man Achsen bei Null beginnen lässt