Motiondesign in Code
Frage zuerst
- Format und Dauer (z. B. Reel 9:16 1080×1920 30 fps), wo es veröffentlicht wird.
- Farben, Schriftarten, Logo der Marke und was nicht geändert werden darf (das Logo wird so verwendet, wie es ist).
- Referenzstil (ein Video oder ein Bild) und ob Texte oder nur Grafiken vorkommen.
- Wenn der Endnutzer den finalen Schnitt macht (Premiere/After Effects): dann liefere Clips, nicht nur ein einziges Video.
Engine
- Node +
@napi-rs/canvas zum Zeichnen, ffmpeg zum Kodieren.
- Jeder Frame ist eine reine Funktion der Zeit
draw(ctx, t): kein Zustand zwischen Frames, sodass jeder beliebige Moment neu generiert, überprüft oder parallel gerendert werden kann.
- Separate Dateien für: Bibliothek (Palette, Fonts, Easing, Federn), Sequenzen, Hintergrund, Render, Kontaktblatt, Analyse.
- Unter Windows heißt Python
py.
Bewegung
- Federn (gedämpfte Federantwort) für Ein– und Ausgänge sowie Verschiebungen: entschlossener Start, sanftes Ankommen, kaum wahrnehmbares Überschwingen. Halte 3–4 Presets (Standard, schnell für Ausgänge, langsam für große Bewegungen, weich) statt verstreuter Werte.
- Weiches Ease-in-out für Morphing von Formen und sich zeichnenden Linien.
- Bewegungsunschärfe: 4 Subframes bei einem 180°-Verschluss, gemittelt. Verlangsamt das Rendern: Sieh eine Option ohne Unschärfe für Vorschauen vor.
- Versetzungen von 0,05–0,15 s zwischen Elementen in einer Serie.
- Keine Cartoon-Abpraller, wenn der Stil elegant ist; entspannter Rhythmus, Raum zwischen den Aktionen.
Kontinuität
- Stil „Eine Form, die sich verwandelt“: Jede Szene entsteht aus der Geometrie der vorherigen, keine harten Schnitte.
- Ein Element verschwindet und taucht nicht wieder auf während einer Transformation: Das Original hört im selben Frame auf gezeichnet zu werden, in dem seine Nachfolger entstehen, mit derselben Position, Größe und Farbe.
- Zwei Formen, die sich austauschen, teilen Rotation, Skalierung und Farbe im Moment des Austauschs; Überblendungen überlappen sich (niemals ein leerer oder doppelter Frame).
- Große weiße Füllungen: lass sie vom Zentrum aus gefüllt wachsen, nicht in Überblendung (in Überblendung wirken sie grau).
- Wenn der Stil es verlangt, nichts Stilles: Atmung, langsame Rotationen, Schweben, kleiner Push-in der Kamera.
Kontrolle
- Kontaktblatt (Contact Sheet) der Frames vor dem vollständigen Rendern.
- Ein Analyse-Skript, das misst, wie stark sich das Bild alle 0,5 s ändert: findet stehende Passagen und abrupte Ruckler.
- Überprüfe Dauer, Auflösung und fps der endgültigen Datei mit
ffprobe.
Export
- Vorschau/Social: MP4 H.264
-crf 14 -pix_fmt yuv420p.
- Schnitt: MOV ProRes 422 HQ 10 Bit.
- Audio nachträglich hinzufügen:
ffmpeg -i video.mp4 -i audio.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest finale.mp4
Instagram Reel
- Zentrum der Grafiken bei (540, 960); nutzbarer Bereich maximal ~900 px breit.
- Das Profilraster schneidet die Mitte in 4:5 (1080×1350) und 3:4: Der Schlüsselin halt liegt zwischen y ~420 und ~1500.
- Unten und rechts befinden sich Bildunterschriften und App-Buttons: lass sie frei.
- Für die anderen Exportmaße siehe das Plugin
grafica.