Motion Graphics

Was macht Motion Graphics?

Du bist der Regisseur, der Designer und der Editor. Die Aufgabe ist ein Kurzfilm, der bewusst wirkt: ein Look, eine klare Geschichte, Bewegung mit Bedeutung und eine Datei, die überall abspielbar ist.

Alles wird von einem Werkzeug gesteuert, scripts/mg.py, und einer kleinen Laufzeit, assets/mg.js. Ein Film ist eine HTML-Seite aus Szenen; jeder Frame wird allein aus der Zeit berechnet, sodass ein Render bei jedem Durchlauf identisch ist.

Benötigt Python 3.8+, pip install playwright pillow, python -m playwright install chromium und ffmpeg. Überprüfe diese zuerst; frage, bevor du etwas installierst.

Der Workflow

Führe die Schritte in der Reihenfolge aus. Schritte 1–2 sind ein Gespräch; rendere nicht, bevor der Look und das Storyboard vereinbart sind, es sei denn, der Benutzer sagte 'mach einfach'.

1. Briefing – frage nur, was fehlt

Entscheidung	Standard, falls nicht angegeben
Botschaft – das Eine, an das sich der Zuschauer erinnern soll	frage; rate nie davon
Wo es abgespielt wird → Format	16:9 für YouTube/Web/Folien · 9:16 für Reels/Shorts/TikTok · 1:1 oder 4:5 für Feeds
Länge	15–30 s Social · 30–60 s Launch · 60–90 s Erklärvideo
Marke – Farben, Schriftarten, Logo	wähle einen Stil, überschreibe dann dessen Akzent
Ton – Musik, Voiceover, stumm	zuerst stummen Entwurf; muss auch ohne Ton funktionieren

2. Stil – lass den Benutzer wählen

python scripts/mg.py styles                          # die 16 Looks mit ihrer Bewegungspersönlichkeit
python scripts/mg.py pick styles.png --format 9:16 --title "Ihre Überschrift"

pick rendert die eigene Überschrift des Benutzers in jedem Stil auf einem Blatt. Zeige es und frage, welchen sie möchten. Wenn sie keine Meinung haben, empfehle einen aus dieser Tabelle und begründe in einem Satz.

Der Film ist…	Starte mit
Produkt- oder Feature-Launch, UI	saas-glass, clean-minimal, sunset-gradient
Hook-first Social Clip, Hype, große Wörter	bold-kinetic, neo-brutal, sunset-gradient
Zahlen, Report, Jahresrückblick	data-story, corporate
Geschichte, Essay, Zitat, Dokumentation	editorial, cinematic-dark, paper-craft
Entwickler-Tool, CLI, Architektur	mono-terminal, blueprint, neon-cyber
Premium-Marke, Einladung, Immobilie	luxury, cinematic-dark
Kinder, Bildung, Feier	playful, paper-craft
Retro, Gaming, Musik	retro-vhs, neon-cyber

Ein Stil ist Farbe + Schriftart + wie sich Dinge bewegen (Eingang, Easing, Geschwindigkeit, Übergang). Das Mischen von zwei Stilen in einem Film wirkt wie ein Fehler. Für einen Marken-Look schreibe ein kleines JSON, das einen Stil erweitert – siehe references/styles.md.

3. Storyboard – schreibe es vor jedem HTML

Schreibe storyboard.json: eine geordnete Liste von Szenen. Eine Idee pro Szene, 12 Wörter oder weniger auf dem Bildschirm, die erste Szene ist der Haken.

{"scenes": [
  {"type": "title",   "kicker": "Launch-Woche", "title": "Schneller liefern mit *Orbit*", "subtitle": "Deployments, die dein Team mag"},
  {"type": "bullets", "title": "Drei Dinge ändern sich", "items": ["Ein Befehl", "4-Sekunden-Rollbacks", "Vorschauen pro Branch"]},
  {"type": "stat",    "kicker": "Median-Deploy", "value": 4.2, "suffix": " s", "label": "runter von 3 Minuten"},
  {"type": "bars",    "title": "Deployments pro Woche", "items": [{"label": "Vorher", "value": 12}, {"label": "Nachher", "value": 58}]},
  {"type": "cards",   "title": "Für Teams gebaut", "items": [{"title": "Sicher", "text": "SSO und Audit-Log"}]},
  {"type": "quote",   "text": "Wir hatten keine Angst mehr vor *Freitagen*.", "by": "Head of Platform"},
  {"type": "end",     "title": "Probiere *Orbit* heute aus", "cta": "orbit.example"}
]}

*wort* markiert das Akzentwort. Die Szenenlänge wird aus den Wörtern berechnet, es sei denn, du gibst "dur" an. Jede Szene kann {"type": "html", "html": "…", "dur": 4} für benutzerdefiniertes Markup sein. Zeige das Storyboard dem Benutzer als kurze Tabelle (Szene · auf dem Bildschirm · Sekunden) und hole ein Ja.

4. Bauen

python scripts/mg.py new film --style saas-glass --format 16:9 --storyboard storyboard.json --accent "#ff5a1f"

Dies schreibt film/index.html, film/theme.css und film/mg.js. Öffne index.html in einem Browser für eine Live-Vorschau mit einem Scrubber. Bearbeite dann das HTML von Hand, um es zu inszenieren: Beats umordnen, einen Eingang ändern, ein Diagramm oder SVG hinzufügen. Die Attribut-Referenz – Animationen, Easings, Übergänge, Kamerafahrten, Schleifen, benutzerdefinierter Canvas-Code – befindet sich in references/authoring.md. Lese sie, bevor du von Hand editierst.

Regeln, die ein exaktes Rendern gewährleisten (der Linter setzt sie durch):

• Bewegung stammt nur von data-*-Attributen oder MG.frame(t) / MG.scene()-Callbacks. Kein CSS transition/animation, keine Timer, kein Date.now(), kein Math.random() – verwende MG.rand(seed).
• Schriftarten, Bilder und Skripte leben im Projektordner. Ein Render, der das Netzwerk benötigt, ist nicht wiederholbar.
• Filmmaterial wird hier nicht gerendert. Rendere Grafiken mit --alpha und lege sie über den Clip (Schritt 6).

5. Prüfen vor dem Rendern

python scripts/mg.py lint film                 # Determinismus, unbekannte Namen, Lesezeit, lange Halte
python scripts/mg.py sheet film sheet.png      # Kontaktbogen + Bericht über außerhalb des Frames / abgeschnittene / überlappende Texte

Öffne den Bogen und schaue ihn an. Überprüfe ihn mit references/motion-craft.md (Hierarchie, sichere Bereiche, ein Fokus pro Frame). Korrigieren, erneut ausführen, wiederholen. Rendern ist der langsame Schritt; der Bogen dauert Sekunden.

6. Rendern

python scripts/mg.py render film draft.mp4 --scale 0.5            # schneller Entwurf, um das Timing zu beurteilen
python scripts/mg.py render film draft.mp4 --scale 0.5 --range 4-9  # nur den geänderten Teil
python scripts/mg.py render film final.mp4 --audio music.mp3      # volle Qualität, Musik am Ende ausgeblendet
python scripts/mg.py render film lower-third.mov --alpha          # transparentes ProRes 4444 (oder .webm)
python scripts/mg.py render film loop.gif --scale 0.4             # GIF für Chat und Dokumentation

Zeige den Entwurf, mache Notizen, ändere, rendere den geänderten Bereich erneut. Ein Render in voller Qualität am Ende. Um transparente Grafiken über Filmmaterial zu legen:

ffmpeg -i clip.mp4 -i lower-third.mov -filter_complex "[0][1]overlay=0:0:enable='between(t,2,7'" -c:v libx264 -crf 18 -pix_fmt yuv420p -c:a copy out.mp4

Ton, Voiceover-Timing und Untertitel: python scripts/mg.py cues film cues.json listet jede Szenen- und Animationsstartzeit auf; verwende es, um Soundeffekte und Untertitel genau zu platzieren. Siehe references/sound-and-captions.md.

7. Überprüfen, dann ausliefern

python scripts/mg.py check final.mp4 --project film

Es bestätigt Größe, Bildrate, Dauer, Codec und Pixelformat gemäß dem Projekt und warnt vor toten Halten (nichts bewegt sich), schwarzen Frames, Clipping oder nahezu stumm. Liefere nur nach OK aus. Gib dem Benutzer die Datei, eine Zeile mit Fakten (Länge, Größe, Stil) und was sie ändern lassen können.

Qualitätskriterien – überprüfe jeden Film dagegen

1. Haken in den ersten 2 Sekunden. Etwas Lesbares und Bewegendes bis Frame 15.
2. Ein Fokus pro Frame. Wenn zwei Dinge zusammen hereinkommen, sind sie eine Gruppe.
3. Lesbar ohne Ton, auf einem Handy. Fließtext ≥ 4 % der kurzen Seite; Halten ≈ 0,4 s + 0,16 s pro Wort nach dem letzten Eintritt.
4. Nichts bleibt länger als ~2,5 s still – Szenen haben standardmäßig eine langsame Kamerafahrt; behalte sie bei.
5. Eingänge sind schnell, Ausgänge schneller, Halte ehrlich. Eintritt 0,3–0,8 s, Austritt etwa 70 % davon.
6. Staffeln, nicht stampfen. 0,04–0,1 s zwischen Geschwistern; gesamte Staffelung unter ~0,8 s.
7. Eine Übergangssprache pro Film; eine zweite nur für den großen Moment.
8. Sichere Bereiche. 5 % von jeder Kante; bei 9:16 halte die unteren 20 % und oberen 12 % frei von Text.
9. Endet mit der Handlungsaufforderung – der letzte Frame nennt, was als nächstes zu tun ist, und hält ≥ 1,5 s.

Wenn eine andere Engine besser passt

mg.py deckt Typografie, Layout, Diagramme, UI-ähnliche und transparente Overlays ohne Build-Schritt ab. Wechsle, wenn die Aufgabe etwas anderes ist – references/engines.md enthält die Befehle, Lizenzen und Kompromisse:

Bedarf	Verwende
React-Komponenten, datengesteuerte Batches, ein bestehendes Remotion-Projekt	Remotion (beachte dessen Firmenlizenz)
GSAP-Timelines, Video/Audio-Clips in der Komposition, Agenten-erste HTML	HyperFrames (Apache-2.0)
Mathematik, Gleichungen, Geometrie, Algorithmus-Visualisierungen	Manim Community
Handautorisierte TypeScript-Animation mit einem Editor	Motion Canvas
Animation, die innerhalb einer App oder Website ausgeliefert wird	Lottie / CSS / GSAP – kein Video
3D-Szenen, Shader	Three.js gesteuert von MG.frame(t), oder Blender
Schneiden von Filmmaterial, Diashows, Untertitel auf einem Clip	der video-erstellung Skill

Migriere niemals ein funktionierendes Projekt auf eine andere Engine, ohne gefragt zu werden.

Referenzdateien – lade nur, was die Aufgabe benötigt

Datei	Lies, wenn
references/authoring.md	Handbearbeitung von Szenen; jedes Attribut, Easing oder Übergangsname; benutzerdefinierter Canvas/SVG-Code
references/styles.md	Auswahl, Mischung oder Erstellung eines Stils; Markenfarben und Schriftarten
references/motion-craft.md	Beurteilung eines Kontaktbogens oder Entwurfs; Tempo, Hierarchie, Typografie, häufige Fehler
references/sound-and-captions.md	Musik, Soundeffekte, Voiceover-Timing, Untertitel, Lautstärke
references/engines.md	Remotion, HyperFrames, Manim, Motion Canvas, Lottie, 3D
references/recipes.md	Fertige Muster: Lower Third, Logo-Sting, kinetische Lyrikzeile, Chart-Race, UI-Mock, Countdown, Endkarte

Ehrliche Grenzen

• Schriftarten fallen auf die zurück, die der Rechner hat. Für eine exakte Übereinstimmung lege die Schriftartdateien in das Projekt und deklariere @font-face (überprüfe zuerst die Lizenz der Schriftart).
• Ein Entwurf bei --scale 0.5 beurteilt das Timing, nicht die Schärfe.
• Die Prüfungen erkennen mechanische Fehler; Geschmack braucht immer noch Augen. Schaue dir immer selbst den Bogen und den Entwurf an und sage, was du gesehen hast, nicht was du annimmst.
• Verwende nur Assets, die dem Benutzer gehören oder für die Nutzung lizenziert sind; notiere die Quelle und Lizenz von allem, was du einbringst.