twodorz/motion-studio

Motion Studio

Erstelle Kurzfilme (typischerweise 9:16 1080×1920 Reels, auch 16:9 / 1:1 / 4:5) vollständig in Code.

• Bild. Eine HTML-Seite (comp.html), deren window.renderAt(t) den exakten Frame für die Zeit t zeichnet.
• Aufnahme. Headless Chromium nimmt jeden Frame auf; ffmpeg codiert sie.
• Sound. Synthetisiert in Python aus derselben Timeline: Musik, Soundeffekte und Atmosphäre, gemastert auf −14 LUFS.
• 3D (optional). Einstellungen stammen von einem kleinen GPU-Pathtracer (pt.js) mit weichem Licht, echten Reflexionen, Tiefenschärfe und Bewegungsunschärfe.

Alles, was ein Betrachter sieht, ist eine reine Funktion von t. Das macht Renderings wiederholbar, suchbar und fortsetzbar.

Wenn die Anfrage darin besteht, ein bereits vorhandenes Video zu schneiden, zu untertiteln, zu komprimieren oder farblich zu korrigieren, oder Folien oder eine Website-Animation zu erstellen, sage, dass dieser Skill nicht das richtige Werkzeug ist und hilf stattdessen direkt. Ein Promo aus geliefertem Material (ein Event, ein DJ, die letzte Party) liegt im Rahmen: Verwende templates/footage/ und references/footage-promos.md.

Was in diesem Skill enthalten ist

Pfad	Was es ist	Wann lesen
references/setup.md	Einmalige Installation des Studios (Node, ffmpeg, Playwright, Python venv, GPU-Prüfung)	Bei erster Nutzung auf einem Rechner
references/render-pipeline.md	Der Render-Vertrag, render.mjs Modi, Chunk-Renderings, ffmpeg-Fallen, Determiniertheit, Kontaktbögen	Beim Erstellen oder Rendern eines Films
references/design-rules.md	Storytelling-, Layout-, Typografie-, Bewegungs- und Übergangsregeln aus echtem Kundenfeedback; Audits	Vor dem Storyboarding und vor jeder Durchsicht
references/sound.md	Ereignisgesteuerte Partitur + Sounddesign, Mix-Ziele, Messungen, Lautstärke-Finish	Bei Audioarbeit
references/path-tracer-3d.md	Der 3D-Pathtracer: Sets, Materialien, Lichter, Produktmodellierung in exakten Maßen, Kameras, Match Cuts, Kosten	Nur wenn der Film 3D-Szenen benötigt
references/claims-and-sources.md	Fakten richtigstellen: offizielle Quellen, CLAIMS.md, was niemals behauptet werden darf, sicheres Erfassen von Websites	Jeder Film mit Produktfakten, Preisen, Spezifikationen oder einer Kundenmarke
references/footage-promos.md	Event-/Club-/Künstler-Promos aus geliefertem Material: Was Kunden wollten, Beat-Grid-Musik, DJ-Übergänge, Gesichtsrahmung, Grafiktechniken	Jeder Promo aus echtem Filmmaterial
templates/film/	Ein komplettes, funktionierendes 2D-Reel (15 s, kinetische Typografie, Produktkarte, Zähler, Diagramm, CTA) + Render-, Sound- und Finish-Skripte	Starte jeden 2D-Film von hier
templates/film-3d/	Der Pathtracer + Beispielsets (Studio, Raum, Haus) + ein funktionierender 3D-Film und Look-Dev-Tools	Starte einen 3D-Film von hier
templates/footage/	Footage-Promo-Pipeline: Schnittliste auf dem Beat-Grid (Schnitte, Raster, Splits, Streifen, Rampen, Iris), Gesichtsrahmung, gemessener BPM / Kick-Phase / Drops, DJ-Übergänge, ein Grafik-Toolkit (Type-Matten, Text hinter Personen, Ticker, optische Zentrierung) + ein Beispiel	Starte jeden Footage-Promo von hier
scripts/setup_studio.ps1 / .sh	Erstellt einen Studio-Ordner und installiert alles (fragt vor dem Herunterladen)	Erste Nutzung
scripts/new_film.mjs	Kopiert eine Vorlage in <studio>/films/<name>	Jeder neue Film

Der Workflow

Befolge diese Schritte in der angegebenen Reihenfolge. Jeder Schritt existiert, weil das Überspringen einmal eine Kundenrevision verursacht hat.

1. Briefing.
   • Erfahre Dauer, Format(e), fps (Standard 30; 25 für PAL-Editoren), Sprache, CTA und wo der Film veröffentlicht wird.
   • Frage nach Markendateien (Logo SVG/PNG, Schriftarten, Farben, bestehende Beiträge). Ohne sie, lese die Marke von ihrer Website.
   • Wenn die Person sagt „gib Vollgas“, bestätige trotzdem alles, was das Produkt oder die Behauptungen ändert. Tempo und Stil liegen in deiner Entscheidung.
2. Recherche und Fakten (references/claims-and-sources.md).
   • Sammle jede Zahl und Behauptung aus offiziellen Quellen in CLAIMS.md, bevor du Texte schreibst.
   • Wenn zwei Quellen sich widersprechen, lasse die Zahl weg und sage dies. Eine falsche Spezifikation in einer Anzeige ist schlimmer als keine Spezifikation.
3. Storyboard auf einem Beat-Raster.
   • Wähle einen BPM, sodass die Dauer eine ganze Anzahl von Beats ist (z.B. 30 s = 48 Beats bei 96 BPM; 15 s = 30 Beats bei 120 BPM).
   • Setze jede Szenenänderung, Bildunterschrift und jedes Sound-Ereignis auf dieses Raster (bar(n, beat) / bt(b)).
   • Schreibe das Storyboard als kurze Tabelle (Beat → Bild → Text → Sound) und teile es vor dem Bauen, wenn die Person erreichbar ist.
4. Gerüst bauen. Führe node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage] aus, bearbeite dann comp.html (2D), film.js + world.js + comp.html (3D) oder sources.json + edit.json + comp.html (Footage; folge references/footage-promos.md).
5. In kleinen Schleifen bauen. Rendere Kontaktbögen in niedriger Qualität (node render.mjs beats 0.5,4,8,… 0.25 sheet) und betrachte sie. Korrigiere, neuer Bogen. Beurteile Bewegung nie anhand eines einzelnen Frames. Erstelle einen Bogen für jeden Beat (oder halben Beat) über den gesamten Film, bevor du einen finalen Render startest.
6. Audit (node render.mjs audit 0.25). Text darf niemals das Produkt oder anderen Text überlappen und muss innerhalb des sicheren Plattformbereichs bleiben. Korrigiere jeden Treffer; streite nicht mit dem Audit.
7. Sound. Führe python audio.py out/mix.wav out/stems aus, dann python check.py: Lautstärke pro Abschnitt, Spektrum, Sirenen-/Gleittest, Klickgeräusche.
8. Finaler Render. Frage vorher (siehe „Render-Etikette").
   • 2D-Filme dauern Minuten: node make.mjs frames + encode.
   • 3D-Filme dauern Stunden: node render.mjs chunks + concat.
9. Finish. node make.mjs finish normalisiert die Lautstärke (−14 LUFS, −1.5 dBTP), multiplexiert auf das Bild (das Bild ist der Master-Taktgeber, niemals -shortest) und schreibt eine leichte -share-Kopie. Überprüfe Bildanzahl, Dauer und Lautstärke in der Ausgabe.
10. Überprüfe die endgültige Datei, nicht die Komposition. Extrahiere Frames aus dem codierten MP4 (alle 0,5 s) in einen Bogen und betrachte jeden einzelnen. Liefere dann mit einer kurzen Notiz (Rumänisch/Englisch je nach Kunde): was darin enthalten ist, woher Fakten stammen, was der Kunde bestätigen muss.

Render-Etikette (der Rechner der Person gehört ihr)

Ein 3D-Render hält die GPU eine Stunde oder länger bei 100% und macht den Rechner träge. Das Schreiben von Hunderten von Frame-Bildern veranlasst auch Windows Defender, jede Datei erneut zu scannen. Jemand musste einmal rufen: „Hör auf, du brätst meinen PC". Deshalb:

• Sage vor jedem Job, der den Rechner länger als ein paar Minuten belastet, was es ist, wie lange es dauert und wie es sich anfühlt, und warte dann auf ein Ja. Biete an:
  • Schonmodus (NICE_MS=25 DUTY=.35): Pausen zwischen GPU-Durchläufen, sodass der Desktop nutzbar bleibt;
  • Volle Geschwindigkeit;
  • Später / über Nacht.
• Bevorzuge render.mjs chunks (1-Sekunden-MP4-Chunks, fortsetzbar) gegenüber dem Schreiben jedes Frames als PNG.
• Starte lange Renderings als getrennte Prozesse, damit ein geschlossener Chat sie nicht mittendrin tötet (Windows: Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden).
• Wenn du aufgefordert wirst, zu stoppen, stoppe sofort. Töte die Prozessgruppe (Windows: taskkill /T /F /PID …), bestätige mit einer Prozessliste, dass nichts mehr übrig ist, und sage, was den Rechner noch belastet (z.B. Defender scannt geschriebene Dateien), ohne die Schuld auf die Person zu schieben.
• Kurze Bögen und einzelne Testframes benötigen keine Erlaubnis. Sie dauern Sekunden.

Nicht verhandelbar (jeder Punkt hat einmal eine Revision verursacht)

• renderAt(t) ist rein.
  • Kein Zustand zwischen Frames, kein Math.random() (verwende gesäten mulberry32), keine CSS-Übergänge oder -Animationen, keine Timer.
  • node render.mjs verify rendert Frames in und außerhalb der Reihenfolge; sie müssen übereinstimmen.
• Lade jede Schriftstärke vor Frame 0 (document.fonts.load für jede verwendete Schriftart). Eine Schriftart, die erst mitten im Film verwendet wird, zeichnet für einen Frame unsichtbar.
• Lasse niemals zwei Textblöcke überlappen oder Text das Produkt verdecken.
  • Ein ausgehender Titel verschwindet, bevor der nächste seinen Platz einnimmt.
  • Zähler wechseln sequenziell (alt raus, dann neu rein); zwei Zahlen übereinander sehen kaputt aus.
• Bildunterschriften bleiben ≥ 1,5 s auf dem Bildschirm, ≤ 7 Wörter pro Stück, eine Idee pro Beat. Mache Frame 0 zu einer lesbaren Miniaturansicht.
• Erfinde niemals eine Zahl, einen Kunden, eine Bewertung oder ein Ergebnis. Zeige Preise nur mit einem datierten Nachweis auf dem Bildschirm und nur mit Zustimmung des Kunden.
• Sound ist ernst, sofern nicht anders gewünscht. Keine Spielzeug-Marimbas oder Glöckchen für ein Tech-Produkt und keine kontinuierlichen tonalen Gleitflüge: Ein Reel-Spark-Sound wurde einmal als „Weltuntergangssirene" bezeichnet.
• Verwende echte UI und echte Assets (Playwright-Ausschnitte der eigenen Website des Kunden bei hohem DPR). Zeichne niemals die UI oder das Logo eines Kunden von Hand. Klicke niemals auf Kaufen, Absenden oder Senden auf einer echten Website.