timeqsz/motion-atoms

Motion Atoms

Lassen Sie den Agenten Animationen nach Beschreibung erstellen und aus Referenzvideos wiederverwendbare Aktionen und Kombinationen extrahieren. Der Agent beobachtet, versteht den Verwendungszweck und die Orchestrierung; die Atome, Validierer und Rendering-Tools im Paket führen aus. Der Benutzer muss nicht vorher Effekte auswählen oder Atomnamen auswendig lernen. Das Verteilungspaket enthält 53 zweidimensionale Atome in 8 Familien, die mit der Website dieselbe Implementierung verwenden. Greifen Sie über relative Pfade auf die Paketressourcen zu, ohne auf die Online-Website, das Quellcode-Repository oder die npm-Installation angewiesen zu sein. Ersteinrichtung siehe Installation und Umgebung; manifest.json enthält die Paketversion, Dateien und Prüfwerte.

Nach Aufgaben lesen, nicht alle Verzeichnisse auf einmal laden

Aufgabe	Zuerst lesen	Dann verwenden
Nach Beschreibung generieren oder bestehenden Effekt ändern	Generierungs- und Änderungszyklus	Absichtsabbildung
Referenzvideo zerlegen oder analysieren, wie eine Aktion realisiert wird	Video-Bewegungszerlegung	Nach Beobachtung Atomliste und Verwendung prüfen, mit breakdown Originalausschnitt zuschneiden; nach Bewegungstyp getrennte Spuren, klare Abgrenzung zwischen Spuren, mehrere textlose Aktionsblöcke auf derselben Spur einzeln hervorheben
2D-Text, Grafiken, Eigenschaftsanimationen	2D-Liste, nur benötigte Familien filtern	atoms/<ID>.md und gleichnamige .mjs; Ein-/Ausgabekonventionen
2D-Materialdateien exportieren	Szenenorchestrierung	scripts/motion.mjs; genaue Felder siehe MotionSpec
Ruckeln, Versatz, Überlappung, Unleserlichkeit beheben	Zeit- und Bildprüfung	Tatsächliches Problem beheben, dann betroffene Frames und Wiedergabe prüfen

Bei der Erstellung zuerst Host, Bildformat, Bildrate, Zielobjekt und Liefergegenstand klären; bei der Zerlegung zuerst das ansehbare Video, den Bereich und den Analysezweck bestätigen, Quellzeitcodes beibehalten. Bereits getroffene Entscheidungen des Benutzers übernehmen. Bewegungsnamen, Parameter und Verhalten richten sich nach der Beschreibung im Paket.

Das vom Benutzer angeforderte Ergebnis liefern, nicht nur Kandidatenatome empfehlen; bei Änderungen an bestehenden Ergebnissen die Quelldatei behalten und die tatsächlichen Änderungen überprüfen. 2D-deliver kann unabhängige Vorschau, editierbare Szene, Ressourcen und Prüfbericht packen; der Bericht gibt keine Zahlenvalidierung als visuelle Abnahme aus. Wenn die implementierte Fähigkeit nicht ausreicht, die Lücke beschreiben und dann mit der Host-Implementierung des Aufrufers umsetzen; ähnliche Effekte nicht als bereits erfüllte Anforderung ausgeben.

Erstellungskern

• Zuerst den Zweck, dann die Bewegung auswählen. Ein klares Produkt, Ereignis oder eine Zustandsänderung präsentieren; jedes Atom muss seine Funktion erklären können. Referenz-PV zu Thema, Rhythmus und Übergängen betrachten, nach tatsächlichem Ansehen Methoden extrahieren, nicht Bildschirme kopieren, keine irrelevanten Symbole, unechte Steuerelemente oder dekorative Bewegungen zur Mengenfülle verwenden. Kurzvideos auf der Website ca. 5 Sekunden, 2–3 Atome; dies ist keine zeitliche oder mengenmäßige Beschränkung für alle Videos.
• Veränderungen orchestrieren, kein Poster mit Effekten behängen. Zuerst Haupt- und Nebenordnung festlegen, dann Einzug, Änderung, Verweilen und Auszug klar beschreiben; Aktionen haben eine kausale oder visuelle Verbindung, Schlüsseländerungen sind auf einen Blick erkennbar. Jede Gruppe verwendet eine für das Subjekt passende Ein- und Ausgangsweise, nach dem Stillstand von Text ausreichend Lesezeit lassen; unnötige kleine Ränder und Kleinschrift entfernen.
• Bewegungen müssen vollständig und kohärent sein. Nicht vorzeitig abbrechen, nicht einheitlich rückwärts abspielen; Kameraschenkel müssen Position, Richtung, Geschwindigkeit und Helligkeit berücksichtigen. Endliche Bewegungen und kontinuierliche Schleifen getrennt entwerfen, Schleifen auf tatsächlichen Anfang und Ende prüfen, keine Überblendung oder Erhöhung der nominellen Bildrate zur Kaschierung von Unterbrechungen verwenden.
• Subjekt als Ganzes. Bilder, Wortmarken, Logos teilen korrekte Koordinaten und Drehpunkte; echte Masken und Zeichenreihenfolge bestimmen Überlappungen. Ein- und Auszug bei gesamten Textgruppen und Details prüfen, nicht nur die Grundplatte verlassen lassen; auf tatsächlichem Bildformat und Anzeigegröße Ausrichtung, Schärfe und Beschneidung prüfen.
• Material dient der Bewegung. Lizenzrechtlich nachverfolgbare, gebührenfreie Materialien auswählen, die zum Zweck passen; Namensnennung und Quellverteilung gemäß Lizenz handhaben; nicht dasselbe Material für verschiedene Fälle verwenden. Materialladevolumen kontrollieren; bei gleicher Szene auf Website und Werbevideo Material und Bewegung synchronisieren.
• Mit tatsächlicher Ausgabe abnehmen. Bei Webseiten echte Wiedergabe und Zielgröße prüfen; bei Videoproduktion zuerst Storyboard, dann bildweise rendern, Video zusammensetzen, codierten Einzug/Stillstand/Auszug/Naht stichprobenartig prüfen und vollständig abspielen. Nicht angesehene Teile nicht als geprüft ausgeben; abspielbares Ergebnis zusammen mit Prüfumfang liefern. Detailtechnische Prüfung siehe Zeit- und Bildprüfung.

2D: In Host-Rendering einbetten

Nur die benötigten .mjs kopieren; wenn Zeichnung erforderlich, atoms/draw.mjs kopieren. Atome werden nach expliziten Frames ausgewertet, haben keinen eigenen Player. Der Host steuert Zeichenreihenfolge, Koordinaten und Zeit. Die acht Familien beantworten je eine Frage: Eigenschaft (was ändert sich), Rhythmus (wie ändert es sich), Schleife (bewegt sich dauernd), Orchestrierung (wer zuerst, wer später), Übergang (erscheint/verschwindet), Text (Bewegung von Schrift), Textur (darübergelegt), Erzeugung (aus dem Nichts).

import move from './atoms/prop.move.mjs';
import spring from './atoms/timing.spring.mjs';
import breathe from './atoms/loop.breathe.mjs';
import { drawAtom } from './atoms/draw.mjs';

const subject = { points: [[-50,-50],[50,-50],[50,50],[-50,50]], closed: true, fill: true };
const curve = (t) => spring({ frame: t, durationFrames: 1 }).value;   // Rhythmus: nur Kurve
function renderFrame(ctx, frame) {
  const shape = move({ frame, durationFrames: 30, subject, params: { fromPx: -200, toPx: 0 }, ease: curve });
  const breath = breathe({ frame, startFrame: 30, durationFrames: 90 });   // Schleife: darübergelegt
  drawAtom(ctx, { ...shape, scale: shape.scale * breath.scale }, { x: 320, y: 200, color: '#f4f1ea' });
}

• Die params unabhängiger Funktionen können nur geänderte Elemente übergeben; MotionSpec clips müssen alle Parameter vollständig enthalten. Diese beiden Konventionen nicht mischen.
• Bei gleichzeitiger Kombination zuerst Rollen und writes prüfen: Verschiebung, Winkel werden addiert; Skalierung, Transparenz, Streckung werden multipliziert; Filter nacheinander verkettet; Orchestrierungsatome geben copies zurück, der Host zeichnet nach Offset und Verzögerung der Kopien jeweils einmal. Der Umriss eines Subjekts darf nicht durch Objektspread mit zwei layers überlagert werden.
• Eigenschaftsanimationen derselben Eigenschaft in MotionSpec dürfen sich zeitlich nicht überlappen, können aber hintereinander geschaltet werden; der Endwert des vorherigen Abschnitts muss an den Startwert des nächsten Abschnitts anschließen. Rhythmus, Schleife, Orchestrierung und Textur werden überlagert. Der Dateiexport übernimmt nicht automatisch die Schleifenwiedergabestrategie der Website.
• Grafikkoordinaten relativ zum Ursprung des Subjekts; Textposition ist Basislinie der ersten Zeile links. Geräteschriften (system, mono) können direkt verwendet werden; präzise maschinenübergreifende Schriftbilder erfordern feste Schriftart-Assets.
• Ausführbares Minimalbeispiel: atoms/example.html, Array × Versatz × Verschiebung × Feder.

2D: Materialdateien ausliefern

Die folgenden Befehle im entpackten Verzeichnis motion-atoms/ ausführen; Ausgabe in das eigene Arbeitsverzeichnis schreiben. Vor dem Export bei Bedarf Browser/FFmpeg des lokalen Systems prüfen, diese Tools nicht bei der Basissuche anfordern.

node scripts/motion.mjs describe transition.slices
node scripts/motion.mjs scaffold transition.slices --out work/slices.scene.json --width 1920 --height 1080 --fps 30 --duration 60
node scripts/motion.mjs validate work/slices.scene.json
node scripts/motion.mjs frames work/slices.scene.json --out work/check --frames 0,20,40,59 --transparent
node scripts/motion.mjs render work/slices.scene.json --out work/slices.mov --transparent

Szenen mit mehreren Atomen können direkt verwendet werden, z.B.:

node scripts/motion.mjs preview assets/examples/showcase.scene.json --out work/showcase.html
node scripts/motion.mjs breakdown assets/examples/showcase.scene.json --out work/showcase-breakdown.gif --title "Kopf · Atomzerlegung"

preview ist HTML, kein Video. render kann MP4 (undurchsichtig), MOV / WebM (transparent) ausgeben; frames gibt PNG aus; breakdown fügt unterhalb des Bildes eine Atomzeitachse hinzu, gibt GIF, MP4 oder WebM aus: bei Eingabe einer Szene die eigenen Animationen erklären, bei Eingabe einer Zerlegungsdatei Ausschnitte aus Referenzvideos für die Zerlegung extrahieren (siehe Video-Bewegungszerlegung). verified: true belegt nur Dateiprüfungen wie Größe, Bildanzahl, Dauer, beweist nicht korrekte Komposition, Rhythmus oder Verdeckung. Vor der Auslieferung gemäß Bildprüfung das codierte Ergebnis und die tatsächliche Wiedergabe prüfen und den tatsächlichen Prüfumfang angeben. Dateipfad, Szenenpfad, Bildrate, Dauer und Transparenzkanal zurückgeben; diese Materialien haben keine Tonspur.

Fähigkeitsgrenzen

• Die Videozerlegung erfolgt durch den Agenten mithilfe der Wiedergabe-, Bildentnahme- und Hörtools des Hosts; das Paket-CLI hat keine Videobefehle, breakdown extrahiert gemäß der vom Agenten geschriebenen Zerlegungsdatei Originalausschnitte und zeichnet darunter die Atom-Zeitachse. Es können über das Paket hinausgehende Aktionen analysiert werden, aber klar zwischen direkt verwendbar, teilweise ähnlich und vom Host selbst zu realisieren unterscheiden; nicht aus dem fertigen Video auf das ursprüngliche Projekt, Plugin oder präzise Parameter schließen; die extrahierten Originalausschnitte dienen nur der Analyse, nicht als Material zur Weiterveröffentlichung.
• 2D-Szenen haben nur text/path-Knoten, keine Bilder, Videos, Audio, Eltern-Kind-Gruppen oder z-Index-Felder. Eigenschaften, Kurven und Kopierausgaben können vom Host auf Bilder oder Videos angewendet werden; geometrische Atome verarbeiten nur Linienzug-Grafiken. Der Host ist für Bild- und Videosynthese zuständig.
• Übergänge und Texturen können auf Text und Grafiken angewendet werden; der Begrenzungsrahmen von Text wird anhand der tatsächlichen Schriftart beim Rendern gemessen. Schleifen und Rhythmen lesen kein Audio.
• Standardbeispiele und scaffold verwenden Systemschriften, das Paket enthält keine Schriftbibliothek. Für maschinenübergreifende Konsistenz muss der Host eine lizenzierte feste Schriftart bereitstellen, Pfad und Hash angeben und die Schriftart prüfen.
• Derzeit keine 3D-Atome; 3D-Szenen werden vom Host selbst realisiert.
• Die gesamte Videoproduktion verwendet weiterhin das Storyboard, den Ton, den Schnitt und den Lieferprozess des Aufrufers; dieses Skill erzwingt keinen bestimmten Host, visuellen Stil oder einheitlichen Übergang.

Referenzen und Danksagungen

Die frühe Bewegungskatalogidee dieses Pakets, das zum MotionFlux-Projekt gehört, wurde von der Motion Periodic Table von Kazuki Akamine inspiriert. Danke für die Anregung zur Katalogisierung und Darstellung grundlegender Bewegungen. MotionFlux ist ein unabhängiges Projekt.