Communitygithub.com

Motion Film Studio

Erstellt Bewegtgrafiken, Erklärfilme, Produkt-Promos und animierte Reels in reinem Code (HTML, Canvas & CSS) – kostenlos, ohne After Effects oder Remotion.

Was ist Motion Film Studio?

Motion Film Studio ist ein KI-gestütztes Skill-Set, das es jedem – auch ohne Motion-Design-Hintergrund – ermöglicht, professionelle Bewegtgrafiken und Erklärfilme direkt im Browser zu erstellen. Der gesamte Workflow basiert auf Code (HTML, Canvas, CSS) und läuft lokal auf dem eigenen Rechner – komplett kostenfrei, ohne After Effects, Remotion oder andere kostenpflichtige Tools. Das Skill umfasst eine vollständige Pipeline: vom Briefing und Drehbuch über den Bau einzelner Szenen, Sounddesign (inklusive Abmischung auf -14 LUFS) bis hin zur Qualitätskontrolle durch automatisierte Scanner, die harte Metriken wie Textgröße, Bewegungsgrenzen und Audio-Pegel prüfen. Es unterstützt plattformspezifische Exporte (16:9 für YouTube, 9:16 für Instagram Reels) und bietet optional ein Laptop-Mockup, um das Video auf einem Bildschirm im Bild darzustellen. Entwickler können es über CLI-Befehle steuern und direkt in ihre CI/CD-Pipeline integrieren.

Funktioniert mit~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whatever0148-cmd/motion-film-studio/tree/HEAD

In Ihrer bevorzugten KI fragen

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

Dokumentation

Was macht Motion Film Studio?

Du erstellst Bewegtgrafikfilme für Menschen ohne Motion-Design-Hintergrund. Alles ist Code, läuft auf ihrem eigenen Rechner, kostet nichts und wird von Scannern anstelle von Vermutungen überprüft. Die Filme, die mit dieser Methode entstanden sind, haben Aufmerksamkeit gehalten, ein gemessenes Qualitätsgate bestanden und wurden als Laptop-Bildschirm-Reels auf Instagram ausgeliefert.

Sei ehrlich in jedem Bericht: Ein Scanner misst, er sieht oder hört nicht. Sage niemals, dass ein Film angesehen oder gehört wurde oder „viral gehen wird“. Sage, was gemessen wurde und was der Mensch noch sehen und hören muss.

Schritt 0: Führe immer den Erstlauf-Check durch (nicht überspringen, nicht raten)

  1. Finde oder erstelle das Arbeitsverzeichnis (Standard ~/motion-studio). Wenn <workspace>/direct-engine/node_modules fehlt, führe scripts/setup.sh <workspace> aus (benötigt Node 20+, ffmpeg, Chrome; das Skript sagt genau, was fehlt). Dann führe python3 scripts/doctor.py <workspace> aus und lies das Ergebnis dem Benutzer in Klartext vor.
  2. Dann befrage den Benutzer, bevor du etwas baust (lade references/onboarding.md). Du musst in dieser Reihenfolge, eine kurze Nachricht, nummeriert, fragen:
    • Wofür ist das Video, wer sieht es, was sollen sie danach tun (kommentieren, klicken, kaufen)?
    • Hast du Referenzvideos, die du liebst? Wenn ja, bitte sie, die Dateien in <workspace>/references/ abzulegen, und studiere sie (lade references/reference-analysis.md). Wenn nein, sage das und verwende den Hausstil, und biete an, eines anzusehen, dessen Link sie einfügen.
    • Hast du Soundeffekte, eine Stimme (eigene Aufnahme oder Text-to-Speech) und Musik? Wenn nicht, sage ihnen, welche kostenlosen Optionen es gibt, und biete an, sie einzurichten (lade references/sound-and-music.md). Sound ist kein optionales Feintuning: Ein Film ohne echten, aufgezeichneten Sound wirkt billig.
    • Echte Beweise für den Bildschirm: echte Zahlen, Screenshots, Terminalausgabe, Produkt-UI. Erfinde niemals Zahlen.
    • Plattform und Format: 16:9 oder 9:16 (lade references/social-ship.md; Instagram Reels ist 9:16).
  3. Gib den Plan in 5 Zeilen wieder, warte auf ein „Ja“, dann baue.

Die Pipeline (jede Stufe hat eine Referenz; lade sie, wenn du die Stufe erreichst)

  1. Briefing ein Satz Versprechen, 5 bis 8 Szenen, ein Fokuszentrum pro Szene. Erst der Aufhänger.
  2. Wörter kurze gesprochene Zeilen (jeweils 3 bis 7 Wörter) mit den On-Screen-Wörtern, die die Botschaft auch ohne Ton transportieren. Keine Schlagworte, keine Gedankenstriche, kein KI-Sprech („Entfesseln“, „Aufwerten“, „nahtlos“).
  3. Look Palette von 3 Farben, eine Schriftfamilie, Tiefe (weiches Licht, Bokeh, Vignette), ein Fokusobjekt. Lade references/craft-rules.md.
  4. Bau kopiere assets/starter nach <workspace>/projects/<name>/, bearbeite scene/main.js. Lade references/scene-contract.md, bevor du eine Szene schreibst. Rendere zuerst Standbilder, dann einen Trocken-Durchlauf mit --scale 1, dann das Finale mit --scale 2.
  5. Sound Cue-Blatt in der Szene, echte aufgenommene Sounds, Stimme, Musik, Mix auf -14 LUFS mit der Stimme 12 dB über allem. Lade references/sound-and-music.md.
  6. Beweisen scripts/scan_all.sh, behebe jedes P0 und P1, scannen erneut, wiederholen. Lade references/qa-and-fix-loop.md.
  7. Ausliefern Social-Export, Bildunterschrift, Veröffentlichungsplan und optional das Laptop-Mockup (references/laptop-mockup.md). Lade references/social-ship.md.

Harte Regeln (dies sind gemessene Zahlen, kein Geschmack)

  • Frame 0 ist eine fertige Komposition, niemals schwarz. Etwas ändert sich sichtbar nach 0,35 s und die erste Sekunde bewegt sich. Mindestens alle 2,6 s ein sichtbares Ereignis. Zwei Pflicht-Sehereignisse mindestens 0,5 s auseinander.
  • Pflicht-Text ist mindestens 54 px in einem 1920 breiten Frame (etwa 11 pt auf einem Telefon). Kleinerer Text ist nur Textur und darf die Botschaft nicht transportieren.
  • Nichts bewegt sich mehr als 45 px pro Frame (keine Teleporte). Überschwingen höchstens 10 % für UI, 15 % für einen Hero-Pop. Animiere nur transform und opacity. Kein will-change auf Text. Halte Körnung subtil.
  • Kleiner Akzenttext braucht einen Kontrast von 3:1 oder besser. Ein helles Limettengrün oder Gelb auf Creme fällt durch: Verwende eine dunklere Tintenversion für kleinen Text.
  • Audio: -14 LUFS integriert, True Peak -1 dBTP oder niedriger, Stimme mindestens 12 dB über der Hintergrundmusik, Hits tragen Energie über 500 Hz, damit sie auf einem Telefonlautsprecher überleben, jeder sichtbare Hit hat einen Ton auf seinem Frame.
  • Jede Zahl auf dem Bildschirm stammt aus echten Daten in der Szene, mit ihrer Quelle. Gib niemals eine erfundene Statistik ein.
  • Eine Idee pro Szene, ein Fokusobjekt, drei oder weniger bewegte Regionen. Der Cursor ist ein ruhiger, kreisförmiger Orb; Szenenwechsel wachsen aus dem, was sie verursacht hat.

Befehle (Arbeitsverzeichnis = ~/motion-studio)

node direct-engine/render_direct.mjs --scene projects/<name>/scene/index.html --out projects/<name>/out/<name>_silent.mp4 --scale 2 --workers 4
node direct-engine/render_direct.mjs --scene ... --out /tmp/x.mp4 --scale 1 --workers 1 --stills 1.0,4.0 --stills-out projects/<name>/stills
bash scripts/make_audio.sh <workspace> <silent.mp4> <final.mp4> [voice.wav] [music.wav]
bash scripts/scan_all.sh <workspace> <final.mp4> [payoff times] [1920x1080]
bash scripts/laptop_mockup.sh <workspace> <green_screen_laptop.jpg> <final.mp4> <out_9x16.mp4>

Motion-Lint: node qa/sample_scene.mjs --scene <index.html> --from 0 --to <frames> --out series.json dann node qa/motion_lint.mjs series.json.

Wie man effizient arbeitet

Kleine Schritte, kurze Nachrichten, neu rendern nur, wenn ein Scan es erfordert (ein vollständiger Render dauert Minuten). Führe nicht viele Unter-Agenten aus. Verwende Standbilder, um einen Look vor einem Render zu überprüfen. Scanne nach jeder Fix-Gruppe erneut.

Berichterstattung

Beende mit: was du gemessen hast (echte Zahlen), was der Mensch noch sehen und hören muss, und die Dateipfade. Wenn eine Prüfung fehlgeschlagen ist und du sie übersprungen hast, sage welche und warum.

Verwandte Skills