Communitygithub.com

kohryan/unrealmotion

Erstellen Sie stille Motion-Graphics-Erklärvideos aus einer Eingabeaufforderung – mit ImageGen-Referenzen, echter Three.js-Rekonstruktion, kausaler Bewegung und deterministischem MP4-Rendering. Ideal für Prozesserklärer, Schnittansichten, Demontagen, Produktfilme, kinetische Typografie und Datenvisualisierung; nicht für reine Schnittbearbeitung.

Was ist unrealmotion?

UnrealMotion ist ein KI-Agenten-Skill, der es ermöglicht, aus einer einfachen Texteingabe professionelle, stanimierte Erklärvideos (MP4) zu erstellen – ohne zusätzliche API-Kosten oder externe Dienste. Der Skill nutzt Three.js, um basierend auf einer Bildgenerierung (ImageGen) ein reales 3D-Modell zu rekonstruieren, mit kausaler Bewegung und deterministischem Rendering. Er unterstützt verschiedene Szenarien wie Prozesserklärer, kinetische Typografie, Datenvisualisierung und Produktfilme. Der Workflow umfasst die Erstellung einer Plan-Datei (plan.json), die Generierung von Referenzbildern, den Aufbau von Three.js-Geometrien und die finale Ausgabe als MP4 mit editierbarem Projekt. Der Skill ist für Entwickler konzipiert, die Node.js, FFmpeg und Playwright nutzen, und bietet eine umfangreiche Bibliothek mit über 4.000 Referenzszenen zur Inspiration. Besondere Merkmale sind die deterministische Ausgabe (kein Zufall beim Rendern), die Unterstützung für verschiedene Kameraprofile und die Qualitätssicherung durch automatisierte Checks und manuelle Überprüfung. Der Skill ist nicht für reine Videobearbeitung oder fotorealistische Animationen ohne Lizenzmodelle geeignet.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kohryan/unrealmotion-skill/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht unrealmotion?

Liefern Sie ein abspielbares MP4 und die Quellen der Szene aus der Eingabeaufforderung des Benutzers. Der aktive Codierungsagent ist die kreative Engine; die gebündelten Skripte rufen Referenzen ab, bedienen die Szene, erfassen Einzelbilder und codieren das Video. Es wird kein separates Sprachmodell, kein API-Schlüssel und kein bezahlter Videodienst benötigt. Dies ist Three.js, nicht Unreal Engine.

Lösen Sie <skill> in das Verzeichnis auf, das diese Datei enthält; führen Sie Paketbefehle dort aus. Verwenden Sie für jede Produktion ein neues <project>-Verzeichnis und bewahren Sie frühere Arbeiten auf. Wenn Abhängigkeiten fehlen: npm ci und npx playwright install chromium. Überprüfen Sie node <skill>/scripts/unrealmotion.mjs doctor. Node 22+, Python 3.10+, FFmpeg und ffprobe werden benötigt; Python-Pakete werden nur benötigt, um den vollständigen Datensatzcode abzurufen.

Von der Eingabeaufforderung zum Film

  1. Erschließen Sie aus der Anfrage: Thema, Aktion, beabsichtigte Botschaft, Sprache, Dauer, Format und Realismus. Lesen Sie für Erklärvideos imagegen-threejs.md und explainers.md. Verwenden Sie ImageGen → echtes Three.js-Modell → stilles Video, beginnend mit --mode explainer: Standardmäßig 60 Sekunden, 1080 × 1920, 30 fps. Behalten Sie den etablierten, einfachen Pastell-Schnittansichtsstil bei, es sei denn, der Benutzer ändert ihn explizit. Die Eingabeaufforderung bestimmt das Thema, das Modell, die Geschichte und das Bewegungsrezept; ein gebündeltes Demo ist kein Standardinhalt. Kurze Präsentationen behalten 12 Sekunden, 1920 × 1080 bei 60 fps. Halten Sie die angeforderten Formate und Assets ein. Fahren Sie mit angemessenen Annahmen fort; kein erforderliches Vorlagen-/Genehmigungsformular.
  2. Lesen Sie art-direction.md und motion-library.md. Lesen Sie für neue Erklärvideos dynamic-story.md: Lesen Sie continuous-camera.md und verwenden Sie eine verbundene Welt mit einer tatsächlichen kontinuierlichen 3D-Kameraroute, ruhigem, lesbarem Pacing und 2–4 konsistenten ImageGen-Referenzen für unterschiedliche Erklärungskontexte. Lesen Sie text-motion.md für dynamische Kopien und data-motion.md, wenn Mengenangaben bei der Erklärung helfen. Wählen Sie eine Szenenbasis und ein Bewegungsprofil, erstellen Sie dann ein kompaktes plan.json: identitätsstiftende Geometrie, Materialpalette, Einstellungszeiten, Subjektaktionen, Kameratrajektorie, Übergänge, lokale Assets und Herkunft. Ein Adjektiv wie „realistisch“ benötigt konkrete Beweise: Proportionen, Oberflächenreaktion, Kontakt, kohärentes Licht und Bewegung.
  3. Durchsuchen Sie den gebündelten 4.146 Einträge umfassenden HF-Katalog mit englischen Begriffen für Subjekt/Material/Mechanismus. Lesen Sie dataset.md, um 1–3 relevante Codebeispiele abzurufen, wenn strukturelle Details hilfreich wären. Überprüfen Sie die tatsächliche HTML/JS-Konstruktion, nicht nur die Titel. Geben Sie Szenen-IDs in plan.json an. Kopieren Sie keine Reasoning-Traces. Der Datensatz ist ein Referenzkorpus, kein trainiertes oder feinabgestimmtes Modell. Für industrielle/objektbezogene Assets mit begrenztem Speicher lesen Sie simready-imagegen.md: Durchsuchen Sie den 2.677 Einträge umfassenden NVIDIA-Metadatenkatalog und rufen Sie nur ein relevantes, budgetiertes Thumbnail/Lizenz ab. Dies versorgt die ImageGen-Erscheinungsreferenzen und die ursprüngliche Netzrekonstruktion; laden Sie niemals das gesamte USD-/Textur-Korpus herunter. Lesen Sie für Zerlegung/Wiederzusammenbau auch reassembly.md.
  4. Erstellen Sie das Projekt. Generieren und überprüfen Sie für ein Erklärvideo das prompt-spezifische ImageGen-Referenzpaket, geben Sie stabile benannte Teile in reconstruction.json an und bauen Sie tatsächliche Three.js-Volumenkörper in model.mjs. Speichern Sie genaue Prompts/Provenienz in asset-plan.json. Erstellen Sie storyboard.json mit der Frage, dem kausalen Fortschritt, Aktion/Kopie pro Beat, 3D-Kamera und Auflösung. Behalten Sie eine Mesh-Hierarchie pro physischem Objekt durch Schnittansichten, Zerlegung und Betrieb bei; verwenden Sie persistente, benannte Szenenwurzeln für verbundene Kontexte mit Weltpositionen und einem kontinuierlichen cameraPath. Binden Sie jeden Beat an seine tatsächlichen Referenz-IDs. Kein Rasterebenen-/beschnittenes Bildsubstitut. Erstellen Sie für Präsentationen direkt scene.mjs. Die CLI ist ein Autoren-Starter, kein semantischer Prompt-Interpreter; ein geänderter Titel über einem nicht verwandten Modell ist keine Fertigstellung.
  5. Vorschau, Scrubbing, QA-Ausführung und Überprüfung repräsentativer Einzelbilder in nativer Auflösung. Befolgen Sie quality.md: Überprüfen Sie Wiedergabetreue, Mechanik/Anatomie, Materialien, Bildausschnitt, Kopie, Übergänge und sinnvolle Bewegung in der zweiten Hälfte. Korrigieren Sie Fehler und wiederholen Sie die betroffenen Prüfungen. Dokumentieren Sie ein wahrheitsgetreues review.json, gebunden an den Quell-Hash.
  6. Rendern mit --final, Metadaten überprüfen und das MP4, das editierbare Projekt sowie eine kurze Verifizierungsnotiz ausliefern. Eine Anfrage nach einem fertigen Film autorisiert den lokalen Export. Wenn der Benutzer nur eine Vorschau wünscht, liefern Sie stattdessen diese. Ersetzen Sie kein angefragtes Video durch Quell-HTML oder eine Kontaktseite.

Lokale Befehle

node <skill>/scripts/unrealmotion.mjs templates
node <skill>/scripts/unrealmotion.mjs create <project> --prompt „Film kamera titanium, lensa merakit presisi“ --template optical-studio --motion precision-assembly
# Erstellen Sie project/scene.mjs, project/project.json und project/plan.json für das Briefing.
node <skill>/scripts/unrealmotion.mjs preview <project>
node <skill>/scripts/unrealmotion.mjs qa <project>
# Überprüfen Sie output/qa/contact-sheet.png UND native-resolution frame PNGs, schreiben Sie dann review.json.
node <skill>/scripts/unrealmotion.mjs render <project> --final
node <skill>/scripts/unrealmotion.mjs probe <project>/output/video.mp4

--width, --height, --duration, --fps, --supersample sind Erstellungsoptionen. Neue Erklärvideos verwenden Version-2-Geschichten mit --pace calm --assets multi; wählen Sie --pace dynamic oder --assets single, wenn es das Briefing rechtfertigt. Bestehende Version-1-Projekte bleiben unterstützt. Verwenden Sie --output <new.mp4>, um einen Export zu erhalten; --force ersetzt ein explizit gewähltes Ausgabeziel. Ein optionales --audio <local.wav> polstert/trimmt eine bereitgestellte Audiospur auf das Video. Fügen Sie keine synthetische Erzählung oder Musik hinzu, es sei denn, dies wird angefordert. Die Vorschau gibt eine Loopback-URL mit Play/Pause und Frame-Scrubbing aus; es handelt sich nicht um eine öffentliche Bereitstellung.

Die Standard-Erklärvideo-Grundlage ist imagegen-explainer: prompt-spezifische Referenz → Three.js-Modell → Geschichte → Video. water-system-explainer ist die frühere SVG-Bewegungsstudie. Präsentations-Grundlagen sind optical-studio, architectural-light, kinetic-editorial, pelagic-bloom und mechanical-reassembly. Präsentations-Kameraprofile: cinematic-orbit, precision-assembly, macro-dolly, continuous-flow, editorial-spring. Erklärvideos wählen Bewegung nach dem Schema „Dem Fluss folgen“, Schnittansicht-Betrieb, Wiederzusammenbau, Schwellwert/Reaktion oder Vergleich mit einer selbst erstellten Kamerapfad. Rezepte ändern nicht den etablierten Stil. Siehe motion-library.md.

Unverhandelbare Produktionseigenschaften

  • Jeder sichtbare Zustand leitet sich von dem angeforderten Frame/Zeitpunkt ab, einschließlich Shader, Partikel, Rig-Posen, Materialänderungen und Kopien. Bewahren Sie createScene(config) → {update(seconds, normalizedTime), draw(), inspect()}; siehe runtime.md. Keine kumulativen Rotationen, Physics-Stepping, zufälliges Sampling während Updates oder Echtzeit-Bildschirmaufnahme für die endgültige Auslieferung.
  • Behalten Sie lokale Assets, fixierte Pakete, gesäte Szenengenerierung, eine einheitliche Farbkette, konsistenten physikalischen Maßstab und stabile Objektidentitäten bei. Der Renderer blockiert externe Anfragen. Laden Sie Modelle, Texturen und Schriftarten vor der Bereitschaft; fehlende Assets sind Fehler.
  • Modellieren Sie tatsächliche Volumenkörper und Befestigungen. Verwenden Sie Facetten, kohärente Teile, korrekte Drehpunkte, begründete Rauheit/Metallizität, weiche Kontaktschatten und kontrollierte Reflexionen. Rendern Sie transparente Oberflächen sorgfältig. Ein Haufen von Primitiven, Stock-Anatomie, schwebende Teile, kaputte Rigs oder ein sich drehendes generisches Objekt erfüllen kein detailliertes Briefing.
  • Verwenden Sie für fotorealistische Menschen, Tiere, Markenobjekte oder ählichkeitskritische Szenen geeignete lizenzierte/vom Benutzer bereitgestellte Modelle, Texturen und geriggte Assets, wenn prozedurale Geometrie das Briefing nicht erfüllen kann. Dokumentieren Sie Quelle/Lizenz. Überprüfen Sie Befestigung, Gelenke, Silhouette, Kontakt und Okklusion während der gesamten Aktion. Ersetzen Sie Realismus nicht stillschweigend durch einfache geometrische Akteure. Geben Sie jede Grenze der Materialwiedergabetreue klar an.
  • Die Subjektaktion muss die Geschichte tragen: Mechanismen arbeiten, Material fließt, Teile montieren, Struktur entfaltet sich oder Informationen werden transformiert. Kamera-Umlaufbahn und treibende Partikel allein sind unzureichend. Vermeiden Sie starre, gleichmäßige Geschwindigkeitstransformationen; verwenden Sie Beschleunigung, Durchschwingen, Staffelung, wo motiviert, und geschwindigkeitskontinuierliche Kamerapfade.
  • Ein Erklärvideo muss seine Frage durch eine vollständige visuelle Sequenz beantworten. Längere Dauer, zusätzliche Untertitel und eine Showreel ersetzen nicht Ursache/Wirkung, lesbare Erklärung, eine angemessene Illustration/ein angemessenes Modell und kohärente Szenenübergänge. Halten Sie stille Anfragen ein; fügen Sie kein Audio-Setup hinzu.
  • Passen Sie Referenzkomplexität und -stil an. Bevorzugen Sie für diesen Workflow einfache, kohärente Geometrie, Pastelloberflächen und klare Schnittansichten; erfinden Sie keine neue Kunstrichtung oder fügen Sie dekorative Details hinzu. ImageGen leitet das Erscheinungsbild; es stellt keine versteckten CAD-Daten, exakten Abmessungen oder NVIDIA-Simulationsmetadaten wieder her.
  • Automatisierte Qualitätssicherung prüft technische Eigenschaften. Sie bestätigt nicht Schönheit, Fotorealismus, genaue Anatomie oder physikalische Korrektheit. Markieren Sie visuelle Prüfungen nur dann als bestanden, wenn Sie die Nachweise überprüft haben. Berichten Sie, was tatsächlich getestet wurde.

Optionale vorhandene Engines

Standardmäßig wird der integrierte Three.js-Renderer verwendet. Lesen Sie für ein vorhandenes Remotion- oder HyperFrames-Projekt des Benutzers engine-interop.md und behalten Sie dessen nativen Frame/Seek-Vertrag bei. Deren Laufzeiten sind optional, unabhängig lizenziert und werden nicht gebündelt oder getestet, nur indem sie erwähnt werden. Die Quellstudien hinter diesem Skill, genauen Revisionen und Lizenzunterscheidungen finden Sie in source-study.md.

Verwandte Skills