X Motion

Was macht X Motion?

Erstelle Bewegtbilder, die etwas Bestimmtes vermitteln. Geschmack ist kontextabhängig: Eine leise technische Demonstration und ein ausgelassener Musik-Ident benötigen unterschiedliche Entscheidungen. Ein leistungsfähiger Renderer ist keine Garantie für gutes Design. Die Qualität der Arbeit entsteht durch künstlerische Leitung, Ausführung, Beobachtung und Überarbeitung.

Dies ist eine originelle, portable Motion-Design-Methode, die von der Design-Agent-Diskussion im LangChain-Artikel inspiriert ist. Sie hängt nicht von LangChain-Code oder -Diensten ab und impliziert keine Zugehörigkeit.

Arbeitsvertrag

• Folge den Anweisungen des Host-Projekts und dem tatsächlichen Umfang des Benutzers. Diese Fähigkeit erteilt keine Erlaubnis zu veröffentlichen, Ausgaben zu tätigen, Modelle aufzurufen, Anmeldeinformationen zu erhalten oder unlizenzierte Assets zu verwenden.
• Verwende zu einem bestimmten Zeitpunkt eine visuelle These und einen dominanten Brennpunkt. Komplexität darf die These unterstützen; sie darf nicht versehentlich mit ihr konkurrieren.
• Gestalte Typografie, Abstände, Bildbearbeitung, Bewegung und Ton als ein System. Dekoriere keine schwache Idee zu scheinbarer Raffinesse auf.
• Wähle Werkzeuge für die Aufgabe und die verfügbare Umgebung. Es ist kein bestimmtes Modell, Framework oder Rendering-Engine erforderlich.
• Trenne technische Beweise von ästhetischen Urteilen. Erfinde niemals eine Geschmacksnote, Publikumsreaktion oder Zustimmung. Behaupte niemals, ein Video gesehen zu haben, wenn nur dessen Standbilder inspiziert wurden.
• Halte Assets lokal und ihre Herkunft explizit. Fixiere Abhängigkeiten. Halte generierte Renderings außerhalb der Versionskontrolle, es sei denn, das Projekt verlangt dies bewusst.

Wähle den kleinsten sinnvollen Prozess

Kleine Bearbeitung: Eine Korrektur des Textes, eine Anpassung des Timings, ein Austausch von Assets oder eine isolierte Easing-Korrektur kann ein neues Briefing, Storyboard und Animatic umgehen. Behalte die genehmigte Richtung bei; inspiziere den betroffenen Beat und seine Nachbarn, rendere neu und führe relevante Prüfungen durch. Eskaliere zum vollständigen Prozess, wenn die Änderung die Botschaft, Hierarchie oder Erzählung verändert.

Neue Komposition oder umfangreiches Redesign: Folge den unten stehenden Phasen. Skaliere die Artefakte auf den Auftrag; ein sechs Sekunden langer Titel benötigt keine Produktionsbibel. Wenn eine entscheidende Absicht fehlt, stelle eine gezielte Frage. Wenn keine Fragen verfügbar sind, kennzeichne eine konservative Annahme und vermeide irreversible Arbeit.

1. Brief → visuelle These

Lege Publikum, beabsichtigte Erkenntnis, Betrachtungskontext, Dauer, Seitenverhältnis, Ergebnisse, erforderliche Texte/Assets, Markenrichtlinien, Barrierefreiheitsanforderungen und fest, ob Ton Bedeutung tragen kann. Markiere harte Anforderungen getrennt von Präferenzen.

Schreibe eine These in dieser Form:

Für [Publikum] lasse [Idee] sich durch [visuellen Mechanismus] [spezifische Qualität] anfühlen, damit sie [Ergebnis] verstehen oder tun.

Benenne die organisierende Metapher, das dominierende Subjekt, die typografische Rolle und die Bewegungslogik. Eine Liste wie „hochwertig, cineastisch, sauber“ ist keine Richtung. Erkläre, welche Entscheidungen diese Wörter greifbar machen. Verwende Referenzen, um Prinzipien zu identifizieren, nicht um die Identität eines anderen Werks zu reproduzieren.

Lies Art Direction für die Lösung von Briefings, Referenzanalyse und eine kohärente visuelle Sprache.

2. Storyboard → lesbares Argument

Plane Beats, bevor du Frames polierst. Halte für jeden Beat fest:

Zeitbereich	Was der Zuschauer lernt	Brennpunkt / Schlüsselszene	Übergang und Begründung	Audio-Cue
Start–Ende	Eine Botschaft	Subjekt und Hierarchie	Was sich ändert und warum	Ereignis oder bewusste Stille

Zeichne oder rendere repräsentative Frames mit echtem Text und realistischen Asset-Proportionen. Gib Lese- und Erkennungszeit genug; verteile nicht jeden Beat aus Gewohnheit gleichmäßig. Bestätige das Eröffnungsversprechen, die kausalen Verknüpfungen zwischen den Beats und die endgültige Erkenntnis. Validiere kritische Texte oder Richtungen bei Bedarf mit dem Menschen, bevor teure Produktion beginnt.

Lies Typografie, bevor du die Komposition oder das Text-Timing festlegst.

3. Animatic → Timing günstig testen

Baue grob getimte Frames, Blöcke oder detaillarme Bewegung. Verwende Scratch-Ton nur, wenn es rechtmäßig und klar gekennzeichnet ist. Teste die volle Laufzeit in der beabsichtigten Geschwindigkeit, nicht nur durch Scrubbing.

Prüfe, ob die Aufmerksamkeit dort ankommt, wo die Information ist, ob Text gelesen werden kann und ob das Ende genug Raum zum Landen hat. Behebe Struktur hier. Oberflächliche Unsicherheit über die Richtung, anstatt sie wegzupolieren.

Lies Animation und Kamera für zeitliches Design und deterministischen Szenenaufbau; lies Audio, wenn Ton Teil des Stücks ist.

4. Produktion → absichtliche Ausführung

Verfeinere genehmigte Beats mit endgültiger Typografie, Assets, Beleuchtung oder grafischer Behandlung, Bewegungskurven, Übergängen und Ton. Bewahre die These. Jeder hinzugefügte Effekt muss eine Aufgabe haben: aufdecken, verbinden, betonen, orientieren oder auflösen. Wenn er keine dieser Aufgaben erfüllt, entferne ihn oder rechtfertige seine ausdrucksstarke Rolle.

Optionaler HTML-Renderer-Vertrag

Bei Verwendung des X Motion HTML-Renderers stellt jede Komposition bereit:

window.motion = { width: 1920, height: 1080, duration: 8, fps: 30, poster: 5.5 };
window.renderFrame = function (tSeconds) {
  // Setze jede animierte Eigenschaft von diesem Zeitstempel und festen Szenendaten.
  // Wiederholte Aufrufe, einschließlich Aufrufe außerhalb der Reihenfolge, erzeugen denselben Frame.
};
window.renderAudio = async function ({ sampleRate }) {
  // Optional. Erstelle die Partitur in einem OfflineAudioContext und gib ihren AudioBuffer zurück.
};

Diese Zahlen sind illustrativ, keine Designvorgaben. Höhe und Breite sind Pixel; Dauer, poster und tSeconds sind Sekunden; fps ist die Bildrate. poster ist optional und benennt den Frame, der als Miniaturansicht verwendet wird. Passe sie an das Brief an.

• Berechne den Zustand direkt aus dem gelieferten Zeitstempel. Keine Wanduhrzeit, autonome CSS-Animationen, akkumulierende Simulationsschritte, Netzwerk-Assets oder nicht gesäte Zufälligkeit.
• Lade und dekodiere lokale Assets und Schriftarten vor der Erfassung. Führe keine asynchronen Frame-Mutationen ein, nachdem renderFrame zurückkehrt; überprüfe den Bereitschaftsmechanismus des Host-Renderers.
• Definiere das Verhalten an den Beat-Grenzen und außerhalb des aktiven Intervalls. Teste wiederholte Zeitstempel und Rückwärtssuchen.
• Die Frame-Funktion definiert das Visuelle, nicht die Audiowiedergabe. Ton kommt nur von renderAudio: ein oder zwei Kanäle, offline gerendert, bei jedem Aufruf identisch. HTML-Medienwiedergabe wird nie erfasst.

Ermittle zuerst die tatsächliche Position dieses Skill-Verzeichnisses, indem du allen Installations-Symlinks in den vollständigen X Motion Clone folgst. Das Repository-Root ist ../.. relativ zu diesem aufgelösten skills/x-motion-Verzeichnis, nicht relativ zum aktuellen Arbeitsverzeichnis des Benutzers. Wechsle in dieses Repository-Root, bevor du diese Befehle ausführst; Kompositionspfade unten sind relativ dazu.

Exportiere Storyboard-PNGs und manifest.json (standardmäßig kein Video). Füge --times 0.5,2,4.25 hinzu, um die Standbilder auszuwählen, und --audio, um auch sound.wav mit Lautstärkewerten zu exportieren:

node scripts/render.mjs pfad/zu/szene.html --out renders/name-storyboard --audio

Exportiere Storyboard-PNGs, vollständige Frames, poster.webp, film.mp4 (mit der Partitur als AAC gemuxt, wenn renderAudio existiert) und manifest.json:

node scripts/render.mjs pfad/zu/szene.html --out renders/name-video --video

Verwende für jede Überarbeitung ein neues Ausgabeverzeichnis. Überprüfe manifest.json und die tatsächlichen Ausgaben, bevor du Erfolg meldest: Es zeichnet einen Frame-Determinismus-Check, einen Audio-Determinismus-Check, integrierte Lautstärke, True Peak und beschnittene Samples auf. Die Videokodierung erfordert ffmpeg. Bewahre in einem anderen Host die deterministische Zeitstempelsemantik und passe den Exportbefehl an.

5. Kritik → Überarbeitung → Lieferung

Wenn Feedback eine veröffentlichte Video-ID nennt, lies Galerie-Feedback. Löse den genauen Film auf, bewahre seine Identität und das Feedback und veröffentliche Überarbeitungen unter neuen verknüpften IDs. Trage gewonnene Erkenntnisse aus dem Kontext weiter, nicht jede clip-spezifische Anweisung als universelle Regel.

Überprüfe gerenderte Artefakte, nicht nur den Quellcode. Betrachte das Storyboard für die Komposition und spiele das Video für den Rhythmus ab; höre das exportierte Audio an, wenn vorhanden. Wenn Wiedergabe oder Anhören nicht möglich ist, gib genau an, was ungeprüft bleibt.

Verwende Kritik und Lieferung, um messbare Fehler von subjektiven Belangen zu trennen. Behebe zuerst das Problem mit der höchsten Auswirkung. Begrenze die Kritik-/Überarbeitungsschleife auf drei Iterationen pro Richtung. Wenn die Richtung weiterhin ungelöst bleibt, stoppe, erkläre die widersprüchlichen Belange und bitte den Menschen, zu wählen oder zu klären, bevor du fortfährst. Ein technischer Durchlauf ist keine ästhetische Zustimmung.

Liefere den Speicherort des Artefakts, den Quellort, die Export-Spezifikationen, die Überprüfungsnachweise, die bekannten Einschränkungen und die ungelösten Genehmigungsfragen. Berichte, was du tatsächlich beobachtet hast. Veröffentliche nicht extern ohne Autorisierung.

Referenzkarte

Lade nur die für die aktuelle Phase benötigten Referenzen:

• Art Direction: Absicht, Geschmack, Referenzen, visuelle These.
• Animation und Kamera: Timing, Inszenierung, Übergänge, deterministisches Rendering.
• Typografie: Hierarchie, lesbare kinetische Schrift, Schriftartenverwaltung.
• Audio: Cue-Karten, Synchronisation, Stille, Exportprüfungen.
• Kritik und Lieferung: Beweise, begrenzte Überarbeitung, Übergabe.
• Galerie-Feedback: unveränderliche IDs, Chat-Feedback, behalten/verbessern/verwerfen und kontextbezogenes Lernen.