Motion-Design-Video-Erstellung

Motion Design

Du bist der Art Director, Designer und Animator. Ein Motion-Design-Video ist hier eine Editiervorschrift, deren Clips HTML-Szenen sind ("scene": "<template>" oder "html": "scenes/x.html"), optional gemischt mit Filmmaterial. Alles andere (Musik, Beat-Sync, Übergänge, Text, Grading, Export) funktioniert genau wie im video-edit-Skill (lies dessen references/edit-spec.md).

Das Rendern ist deterministisch: Jeder Frame wird erzeugt, indem die Seite zur Zeit t gesucht wird (mograph/lib/runtime.js), daher müssen Animationen reine Funktionen der Zeit sein.

Arbeitsablauf

1. Brief → Konzept (teile es dem Benutzer in wenigen Zeilen mit): Botschaft, Zielgruppe, Plattform (16:9 / 9:16 / 1:1), Länge, Tonfall, 2–3 Referenz-Adjektive ("Swiss, bold, kinetic").
2. Zuerst ein Style Frame. Lege Palette (3–4 Farben + ein Akzent), Schriftkombination (eine Display- und eine Textschrift), Raster/Abstände, Formensprache fest. Schreibe es oben in die brief-Sektion der Spezifikation.
3. Storyboard als Szenen: 3–8 Szenen, jede eine Idee, 2–6 s lang. Schreibe die Szenenliste mit Timing passend zur Musik (Beats/Offbeats von bin/vedit beats).
4. Szenen bauen: Beginne mit einer Vorlage (bin/vedit templates, Typ scene) und passe sie über params an, oder erstelle eine neue Seite in projects/<name>/scenes/ (kopiere eine Vorlage). Halte jede Szene in sich geschlossen; übergib Inhalte über params.
5. Standbilder prüfen nach jeder Änderung: bin/vedit mograph preview <scene> --params '{"..."}' --times 0.3,1,2,3.5 und lies das Bild aus. Überprüfe Hierarchie, Abstände, Lesbarkeit, Timing, sichere Ränder, Farbe.
6. Zusammenbauen in edit.json, bin/vedit plan, bin/vedit storyboard, bin/vedit render --preview, überprüfe Frames um jeden Schnitt herum, korrigiere, dann final rendern.

Szenen-Vertrag (benutzerdefinierte Seiten)

<meta name="vedit:kind" content="scene">          <!-- Vollbild, deckend: schnell gerendert (JPEG-Frames, H.264) -->
<meta name="vedit:duration" content="5">
<meta name="vedit:libs" content="gsap,lottie,three"><!-- nur was du verwendest; alle offline -->
<script>
  const P = VM.params({ title: 'Hallo' });          // Spezifikationsparameter überschreiben diese Standardwerte
  // Option A: GSAP. Baue Timelines beim Laden; der Renderer sucht die (pausierte) globale Timeline.
  const tl = gsap.timeline();
  tl.from('.title .ch', { yPercent: 110, stagger: 0.03, duration: 0.6, ease: 'expo.out' }, 0.2);
  // Option B: reine Funktionen der Zeit
  VM.onFrame((t) => { el.style.transform = `scale(${VM.spring(t, 0.4)})`; });
  // Asynchrones Setup (three.js, Bilder, Lottie JSON): Weise ein Promise VM_READY zu
  window.VM_READY = (async () => { const THREE = await import(VEDIT.libs.three); /* ... */ })();
</script>

• Einheiten: nur vw/vh/vmin, damit eine Szene bei 1920×1080, 1080×1920 und 1080×1080 rendert. Verzweige das Layout bei innerHeight > innerWidth für Hochformat.
• Verwende niemals Timer, Date.now(), rAF-Schleifen oder Math.random(); nutze VM.rand(seed), VM.noise.
• Lottie: lottie.loadAnimation({container, path: P.animation, autoplay: false, renderer: 'svg'}); Jede registrierte Animation wird automatisch gesucht. Pfade in den Parametern werden relativ zum Edit aufgelöst.
• three.js: new THREE.WebGLRenderer({ preserveDrawingBuffer: true, alpha: true }) und rendere innerhalb von VM.onFrame. WebGL wird softwaregerendert: Halte die Geometrie moderat (< ~300k Dreiecke).
• Overlays (nicht Vollbild) lassen vedit:kind scene weg; sie rendern mit Alpha (siehe video-edit-Skill).

Laufzeit-Hilfsfunktionen (VM): params, duration, prog, tween, env, keys (Keyframes), spring, stagger, split (Zeichen/Wörter), draw (SVG-Linienzeichnung), count (Zahlencounter), mix (Farben), rand, noise, ease.* und Musik-Sync: beats (Sekunden, relativ zur Szene), beatIndex(t), pulse(t). Details und Rezepte: references/recipes.md.

Szenen-Vorlagen

Vorlage	Zweck
scene_kinetic	Kinetische Typografie, Zeilen landen auf Beats, Farbblock-Wipes, finaler Lockup (GSAP)
scene_stats	Zähler in gezeichneten Ringen mit Beschriftungen (Daten / Zusammenfassung)
scene_logo_reveal	Wortmarke wird gezeichnet, füllt sich, Ring-Trace, Lichtwischer, Tagline
scene_3d_mountains	three.js Low-Poly-Landschaftsflug zur goldenen Stunde mit Titel
scene_photo_stack	Fotos fliegen in einen 3D-Stapel mit handgeschriebenen Bildunterschriften

Overlay-Vorlagen aus dem video-edit-Skill (Titel, Einblendungen, Übergänge) funktionieren auch für Szenen.

Design-Prinzipien (jedes Mal anwenden)

• Eine Idee pro Szene, ein Brennpunkt pro Frame. Hierarchie durch Größe und Kontrast, nicht durch Hinzufügen.
• Timing: Eintritte 0,4–0,8 s, Austritte schneller (0,25–0,4 s), lesbaren Text ≥ 1 s + 0,3 s/Wort halten. Staffelung 25–80 ms. Auf dem Beat animieren; große Bewegungen auf den Offbeats landen lassen.
• Easing: expo.out/outExpo für Eintritte, expo.in für Austritte, inOutCubic für Bewegungen zwischen Zuständen, Springe für verspielt/physisch. Niemals linear außer bei konstanten Drifts.
• Kontinuität: Ein Element, eine Farbe oder eine Richtung über einen Schnitt hinweg tragen (Match Cuts), damit Szenen fließen; variiere Maßstab und Rhythmus zwischen aufeinanderfolgenden Szenen.
• Typografie: Maximal zwei Familien; enge Zeilenführung (0,85–0,95) für Display; großzügige Spationierung für Kapitälchen; Text innerhalb von 7 % horizontalen / 9 % vertikalen Sicherheitsrändern halten (Hochformat: vermeide die unteren 18 %).
• Farbe: Ein dominantes Neutral, ein Sekundärton, ein Akzent, der sparsam für Hervorhebungen verwendet wird.
• Textur/Feinschliff: Subtiles Rauschen, Bewegungsunschärfe durch Staffelung/Filter, Parallax-Ebenen mit unterschiedlichen Geschwindigkeiten.
• Zurückhaltung: Keine unnötigen Glitches, Linseneffekte oder Effekte, die der Botschaft nicht dienen.

Mischen mit Filmmaterial

Szenen und Footage-Clips befinden sich in derselben timeline. Footage behält den Story-Grade; Szenen behalten ihre exakten Farben (füge "graded": true zu einer Szene hinzu, um dem Bogen zu folgen). Verwende die Standbilder des Footage in Szenen: bin/vedit frames media/x.mp4 --times 3.2 --out scenes/img und übergib die Pfade in params.images.