risingjerry/motion-skill

Code-Bewegtgrafiken (motion)

Das Video ist mit Code geschrieben: Jeder Frame wird aus der Zeit t berechnet. „Hier etwas langsamer“ bedeutet nur, eine Zahl zu ändern und neu zu rendern – keine Neuaufnahme nötig.
Es werden keine KI-Bild- oder Videogenerierungsmodelle verwendet; alles auf dem Bildschirm stammt von echten Materialien oder Code.

Zuerst die Ebene wählen

Alle drei Ebenen nutzen denselben Ablauf. Je tiefer die Ebene, desto mehr ähnelt sie einer echten Aufnahme, ist aber auch langsamer. Wähle nach dem, was das Video braucht; die Ebenen können gemischt werden.

Ebene	Was ist auf dem Bild?	Geeignet für	Startpunkt
1. 2D-Motion	Echtes Logo, echte Screenshots, Formen, die sich verwandeln	Apps, Software, Brand-Opener	templates/2d.html
2. Browser-3D	UI-Karten im 3D-Raum, Kamerafahrten; Silhouetten-Übergänge zu Realfilm	Multi-Screen-UI-Shows, Videos mit Realfilm-Einlagen	templates/3d.html, scripts/silhouette.py
3. Blender-Studio	Physisches Produkt-Modell, eine Lampe, echtes Material	Kopfhörer, Smartphone, Tassen usw.	scripts/blender/studio.py

Ausführliche Erklärungen: references/layers.md.

Ablauf (in dieser Reihenfolge, keine Schritte auslassen)

1. Fragen klären, echtes Material besorgen. Was ist das Produkt, wer sieht es, wie lang ist es, auf welcher Plattform läuft es, was soll der Zuschauer am Ende tun? Das Material ist immer echt:
   Offizielle Logo-Dateien, echte Screenshots (vorher Benachrichtigungen, Avatare, Telefonnummern entfernen), Markenfarben und Schriften. Verwende keine Werbebilder aus dem App Store als UI und zeichne Logos nicht aus dem Gedächtnis.
   Für physische Produkte: Fotos aus mehreren Blickwinkeln, am besten vom Benutzer selbst gemacht, um später die Modellproportionen zu prüfen.
2. Das Ende festlegen. Am Ende stehen nur Icon und Wortmarke (oder ein Übergang zu Realfilm). Keine Slogans wie „Jetzt herunterladen“ oder „Öffne XX“, kein Kleingedrucktes wie „Konzeptvideo“ (solche Hinweise gehören in die Beschreibung).
3. Storyboard mit Nummern erstellen, auf Zustimmung warten. 5–10 Shots, jeder mit: Zeitraum, Bild, Aktion, wie der Übergang zum nächsten Shot erfolgt, Text auf dem Bildschirm.
   Schreibe shots.json, führe node scripts/render.mjs board shots.json board.png aus, um ein Bild zur Ansicht zu generieren.
   Kein endgültiges Video ohne Zustimmung – Änderungen sind jetzt am günstigsten. Format siehe references/storyboard.md.
4. Seite aufbauen. Kopiere die Vorlage und templates/motion-kit.js in den Materialordner. Alle Beats stehen oben in BEATS; Änderungen am Timing nur dort.
   Seitenkonventionen siehe references/html-engine.md.
5. Frame für Frame selbst prüfen, dann anderen zeigen. render.mjs still extrahiert Schlüsselmomente (3–4 Punkte pro Übergang, nicht nur stehende Bilder),
   scripts/sheet.py setzt sie zu einem Bild zusammen – zuerst selbst durchsehen. Dann Prüfskripte laufen lassen:
   • render.mjs probe + scripts/layout_check.py probe: Text mindestens 40 px vom Hauptobjekt entfernt (4K), Hauptobjekt nahe der Bildmitte.
   • 3D: scripts/blender/motion_check.py (Durchdringungen, max. 6° Rotation pro Frame, keine Ruckler), scripts/seam_check.py (Nahtfehler ≤ 1 px).
     Checkliste siehe references/checklist.md.
6. Nur 4K ausgeben. node scripts/render.mjs video page.html datei-4K.mp4 --scale 2 (1920x1080 Seite → 3840x2160).
   Ein Computer führt nur einen 4K-Render- oder Blender-Render-Vorgang gleichzeitig aus. Einzelframes für die Prüfung aus dem 4K-Endvideo extrahieren: python3 scripts/sheet.py video ....
7. Ton erst hinzufügen, wenn das Bild steht. Sobald sich das Bild ändert, verschieben sich alle Beats. Musik und Soundeffekte sind Pflicht; der stärkste Beat der Musik trifft den wichtigsten visuellen Punkt;
   Gesamt -14 LUFS, True Peak nicht über -1 dBTP; Video-Stream wird unverändert kopiert, keine Neucodierung. Siehe references/sound.md.
8. Überarbeitung. Vor jeder Runde erstellen, nach Änderungen erneut Einzelframes extrahieren und selbst prüfen, mit klaren Worten beschreiben, was geändert wurde. Als neue Version speichern, nicht überschreiben oder löschen.
   Ehrlich angeben, was geprüft wurde: Standbilder sind nicht gleich Wiedergabe, Bilder anzusehen ist nicht gleich Mix zu hören.

Regeln für gute Videos

Die vollständige Erklärung steht in references/transitions.md und references/blender-3d.md; hier die wichtigsten Punkte:

• Jeder Shot entsteht aus dem vorherigen. Kein Ein- oder Ausblenden, keine Überblendungen. Dasselbe Objekt verformt sich, dreht sich, öffnet sich oder zieht sich zusammen – die Augen des Zuschauers müssen nicht neu suchen.
• Bewegung in der Bildmitte. Stell dir ein Fadenkreuz in der Mitte vor; das Hauptobjekt bleibt immer in seiner Nähe.
• Das Bild bewegt sich ständig. Auch stehende Shots haben eine ganz langsame Kamerafahrt oder -verschiebung.
• Eine Bewegung, eine Kurve. Nur eine Richtung: Zoome nur hinein, nicht hin und her; drehe nur in eine Richtung, nicht zurück. Schnell starten, langsam enden, und das Ende etwas länger halten.
• Text kurz, von unscharf zu scharf – nicht hüpfen, nicht plötzlich vergrößern. Text darf nicht auf dem Hauptobjekt liegen.
• 3D nur mit einer Lampe, Hintergrund schwarz. Das ist der Hauptgrund, warum es wie ein Studio-Shot aussieht.
• 3D physikalisch korrekt: Gehäuse schließen bündig; keine Durchdringungen; zwei Objekte, die die Plätze tauschen, bewegen sich auf einer 3D-Umlaufbahn, nicht geradlinig durcheinander; Rotationen glatt, ohne Ruckler.
• Vergleiche das Modell mit echten Fotos – Proportionen, Rundungen, Bohrungen müssen stimmen.
• Silhouetten-Übergänge beginnen mit einer Nahaufnahme, dann aufziehen, dann harter Schnitt zu Realfilm. Siehe references/silhouette.md.
• Bild und Ton nur als Ganzes verschieben, keine Tempovariation, keine Tonhöhenänderung.

Regeln

• Marken: Nur für Marken arbeiten, die der Kunde besitzt oder für die er eine Nutzungserlaubnis hat. Fremde Marken nur als Übungsprojekte, ohne Vortäuschung offizieller Absender, ohne Werbung, ohne Nachahmung echter Kampagnen.
• Material: Nur Material verwenden, das der Kunde selbst erstellt hat oder lizenziert hat (Schriften, Musik, Modelle); die Lizenz muss diese Nutzung abdecken.
• Aussagen: Zahlen und Behauptungen im Video müssen wahr und belegbar sein; keine erfundenen Daten oder Bewertungen.
• Privatsphäre: Persönliche Informationen aus Screenshots und Realfilm-Material entfernen; Personen vor der Kamera müssen zustimmen.
• Bezahlte Dienste (Voiceover, KI-Musik usw.) verbrauchen das Budget des Kunden; nur auf dessen Wunsch einsetzen.

Skriptübersicht

Skript	Funktion
scripts/render.mjs	HTML-Seite → Standbilder / 4K mp4 / Positionsaufzeichnung (probe) / Storyboard (board)
scripts/sheet.py	Standbilder oder fertiges Video nach Zeit in ein Prüfbild mit Zeitstempeln umwandeln (in Originalauflösung)
scripts/layout_check.py	Abstand zwischen Text und Hauptobjekt, Zentrierung des Hauptobjekts prüfen
scripts/seam_check.py	Nahtfehler zwischen zwei Bauteilen in der realen Kameraperspektive (Pixel)
scripts/blender/studio.py	Ein-Licht-Studio-Szene + EEVEE/Cycles-Render, verarbeitet GLB/glTF/USDZ/OBJ/FBX, --demo mit Beispielmodell
scripts/blender/motion_check.py	Durchdringungen, Winkelgeschwindigkeit, Rotationssprünge pro Frame prüfen
scripts/silhouette.py	Personenmaske extrahieren (macOS Vision, optional) → glatte Vektor-Silhouette, kann von Nahaufnahme aufziehen
scripts/audio/synth.py	Code-synthetisierte Soundeffekt-Pakete und Musik-Grundlagen (lizenzfrei)
scripts/audio/mix.py	Musik auf visuelle Einsätze ausrichten, Soundeffekte nach Beat setzen, Sidechain-Ducking, Loudness-Normalisierung, in Video einbetten
scripts/encode.py	Einzelframes (PNG) → mp4
scripts/doctor.py	Abhängigkeiten prüfen, fehlende Pakete und Installationsanleitung anzeigen

Wann welches Datei lesen

Du bist…	Lies
Ebene wählen, Aufwand schätzen	references/layers.md
Storyboard schreiben	references/storyboard.md
HTML-Seite schreiben, Video rendern	references/html-engine.md
Übergänge zwischen Shots entwerfen	references/transitions.md
Physisches Produkt in 3D	references/blender-3d.md
Silhouetten, Übergang zu Realfilm	references/silhouette.md
Musik und Soundeffekte hinzufügen	references/sound.md
Selbstprüfung vor Abgabe	references/checklist.md
Bild sieht falsch aus	references/pitfalls.md

Umgebung

Node.js 20+, Python 3.9+ (numpy, Pillow, opencv-python-headless), ffmpeg, Google Chrome oder Chromium.
Ebene 3 benötigt Blender (kostenlos); automatische Silhouetten-Extraktion benötigt macOS 14+, andere Systeme benötigen ein externes Tool zur Maskenerstellung.
Vor dem Start python3 scripts/doctor.py ausführen und dem Kunden mitteilen, was fehlt und wie es installiert wird.
Wenn im Skill-Verzeichnis ein .venv vorhanden ist, Python-Skripte mit .venv/bin/python ausführen (Windows: .venv\Scripts\python); unter Windows python3 durch python ersetzen.