IuryDevz/motion-frames

Motion Frames — Motion-Design-System auf Frame-Ebene

Vollständige Methode zur Erstellung professionellen Motion-Designs ohne Videosoftware: Die gesamte Animation ist eine HTML-Seite, deren Szene eine reine Funktion der Framenummer ist, die von einem bildschirmlosen Chromium Frame für Frame fotografiert und mit ffmpeg zu MP4 zusammengesetzt wird. Alles ist deterministisch: gleiche Eingabe, gleiche Pixel – ermöglicht paralleles Rendern, Fortsetzen ab jedem Frame und präzise Audio-Video-Synchronisation auf 1/60s.

1. Unveränderliche Regel: Reine Funktion des Frames

• Die gesamte Szene lebt in renderFrame(n), wobei n die Framenummer ist (60fps).
• Verboten: Uhrzeit (Date.now, performance.now, über requestAnimationFrame akkumulierter Zustand) und verboten: Zufall ohne Seed: Zufall nur über deterministisches hash(i) des Index/Frames.
• Bewegung = geschlossene Formeln der seit Ereignisbeginn vergangenen Zeit:
  • Analytische Feder (unterdämpft): spring(t, freq, damp) mit Overshoot – das ist die Standardphysik für alles (Einblendungen, Pop-ups, Stapelung).
  • Benannte Easings: easeOutCubic, easeInOutCubic, easeOutBack.
  • Segmente: seg(n, a, b) = Fortschritt 0→1 eines Frame-Abschnitts; clamp, lerp zur Interpolation beliebiger Größen (Position, Farbe, Morph-Geometrie).
• Standardformat: 1080×1920, 60fps. Dauer nach Inhalt (schneller Test: 8s = 480 Frames).

2. Pipeline (Ordner pipeline/ dieser Skill)

Datei	Beschreibung
pipeline/template.html	Basis-Seite mit Helfern (T, seg, spring, Easings, hash) und Skelett renderFrame(n)
pipeline/render.mjs	CDP-Renderer ohne Abhängigkeiten: node render.mjs <seite.html> <verzeichnis> <anzahl_frames> 1080 1920 [start_frame]
pipeline/preview.mjs	Rendert nur ausgewählte Frames als PNG: node preview.mjs <seite.html> <verzeichnis> "0,60,160,300" <gesamtframes> 1080 1920
pipeline/sfx_kit.py	Synthetisierte Soundeffekte (numpy/scipy), an die Framenummer gebunden

• Chromium: Der Renderer sucht nach CHROME_BIN, danach nach einem chrome-headless-shell neben dem Skript, danach nach dem bekannten Workspace-Pfad. Nicht jedes Chromium ist geeignet: Builds mit Domain-/WebGL-Richtlinien (z. B. das verwaltete Chromium von Hatch) weigern sich, eigenständig zu laufen – verwenden Sie einen separaten chrome-headless-shell.
• Geschwindigkeit: FMT=jpeg (Qualität 90) ist ~2× schneller als PNG und im Ergebnis nicht unterscheidbar. PNG nur für Vorschau.
• Shards: Lange Videos werden in 2 parallelen Prozessen gerendert (jeweils eine Hälfte des Intervalls, mit dem Argument start_frame), jeder mit eigenem PORT (CDP). Maximal 2 parallel auf Maschinen mit ~8 GB RAM – 3 führen zu Speicherüberlauf.
• Montage: ffmpeg -framerate 60 -i verzeichnis/f%04d.jpg -i audio.wav -c:v libx264 -pix_fmt yuv420p -crf 18 -c:a aac -b:a 192k -movflags +faststart out.mp4.
• Schriftarten und lokale Bilder: Referenzieren Sie sie relativ zum HTML (funktioniert über file://). Markenschriftarten: Laden Sie die .woff2-Dateien herunter und generieren Sie ein lokales CSS @font-face – verlassen Sie sich nicht auf das Netzwerk während des Renderings. Im Szenen verwendete Bilder: Fügen Sie ein verstecktes <img>-Element zum Preloading im Seitenkörper ein, sonst erscheinen die ersten Frames ohne dieses.

3. Produktionsablauf (in dieser Reihenfolge)

1. Skript und Referenzen: Definieren Sie den Satz jeder Szene. Studieren Sie die Referenzen Frame für Frame (extrahieren Sie ein Kontaktblatt mit ffmpeg) und notieren Sie die Grammatik – kopieren Sie nicht die Oberfläche.
2. Audio zuerst (falls vorhanden): Erkennen Sie Stille (ffmpeg -af silencedetect) bevor Sie Schnitte setzen; transkribieren Sie mit faster-whisper (small, word_timestamps=True, übergeben Sie das Audio als numpy-Array aus 16k WAV – die interne Dekodierung von faster-whisper bricht in manchen PyAV-Versionen) und wandeln Sie die Zeiten der Schlüsselwörter in Frame-Landmarken um (Sekunde × 60). Erfinden Sie niemals die Sprechdauer.
3. Marken-Recherche (Produktvideos): Holen Sie die echte Identität – laden Sie das HTML/CSS der Website herunter und extrahieren Sie Logo (Bilddatei), Palette (häufigste Hex-Farben im CSS) und Schriftarten. Verwenden Sie das offizielle Logo und die offiziellen Schriftarten im Video.
4. Design nach Szenen: Eine Funktion pro Szene (s1(n), s2(n), …), Grenzen an den Sprach-Landmarken. Jede Szene beginnt mit ihrem Hauptereignis bereits synchronisiert.
5. Vorschau obligatorisch: Kontaktblatt mit 15–30 Frames mit preview.mjs zur Überprüfung von Rhythmus und Komposition – überprüfen Sie immer 2–3 Schlüsselframes in Originalgröße: Das Kontaktblatt täuscht (versteckt Textkollisionen, Überbreiten und kleine Details).
6. SFX pro Mikroereignis (Abschnitt 8), mit denselben Framenummern wie die Animation.
7. Shard-Rendering + Montage + QA: Extrahieren Sie Frames aus dem endgültigen MP4 (nicht aus den Einzelframes) und überprüfen Sie vor der Auslieferung.

4. Bewegungssprache (was Profi von generisch unterscheidet)

• Cinematic Opening: Die erste Sekunde ist ein Titel – große Typografie, die mit Spring und Kamerabewegung eintritt, Hintergrund mit Tiefe. Kein statischer Bildschirm.
• Die Kamera ruht nie: Langsamer Skalierungsdrift (1→1,03–1,09) in jeder Einstellung; Schnitte verdeckt durch Bewegung (Dolly/Zoom/Pan mit Parallaxe zwischen Ebenen).
• Dichte: Ein Mikroereignis alle 0,5–1,5 s. Wenn ein Abschnitt 2 s ohne Ereignis vergeht, ist das falsch.
• Physik für alles: Springs mit Overshoot, Squash & Stretch bei Stürzen und Hüpfern, Antizipation vor der Hauptbewegung. Lineare Bewegung ist standardmäßig verboten.
• Übergänge sind Ereignisse, keine Schnitte: Morph des Objekts (die Pille wird zum Balken, der Balken zur Karte), Zoom-through mit Unschärfe oder Zoom-Punch (Skala kreuzt 1→1,09 mit Crossfade über ~18 Frames an Szenengrenzen).
• Schlanke Palette: Hintergrund einer Familie + EINE Akzentfarbe mit Glow; kräftige Typografie; viel Weißraum.

5. Hintergründe: Nie flach, immer lebendig

Schwarzer Flachhintergrund (oder jede andere Flatcolor) ist verboten – der Hintergrund hat ein eigenes Leben, einen Fluss und Parallaxe zwischen Hinter-/Mittel-/Vordergrund. Drei bewährte Rezepte:

• Lebendiges Studio (dunkle Promos): Verlauf mit Farbe der Akzentfarbe, 2 langsam wandernde unscharfe Farb-Blobs, Lichtkegel von oben, deterministische Bokeh-Partikel, Boden mit Punkt-Gitter in Perspektive + leuchtender Horizontlinie + Spiegelung unter dem zentralen Element.
• Flüssige Aurora (durchgehende Szenen): 3–4 langgezogene radiale Verlaufsbänder, mix-blend-mode: screen, starke Unschärfe, Lissajous-artig schwebend und langsam rotierend; zwei Paletten mit Crossfade, wenn ein Befehl die „Farbe“ der Szene ändert; darüber Staubpartikel.
• Marken-Eis (helle Kinetic): Heller Verlauf in Markenfarbe, fließende Minz-Seide (gleiche Technik wie Aurora, in hell), subtiles Punktgitter und Staub – sauber, aber atmend.

6. Echter 3D (geben Sie sich Mühe – hier hinken die Videos am meisten hinter den Referenzen her)

• CSS perspective + rotateX/rotateY an Telefonen, Karten und Dashboards; das Element schwebt mit lebendigem Schatten, der auf die Neigung reagiert.
• Echte Parallaxe: Hinter-, Mittel- und Vordergrund mit unterschiedlichen Geschwindigkeiten bei jedem Zoom/Pan.
• 3D-Würfel und -Boxen in CSS: Jede Seite ist ein Div, positioniert mit translateZ = halbe Breite/Höhe (ein Fehler hier öffnet die Kanten).
• Isometrische Treppen/Blöcke, die aufsteigen, Stapel mit Tiefe, Glas (backdrop-filter wenn der dahinterliegende Hintergrund einfach ist) und überstreifender Glanz.
• Faustregel: Wenn die Szene als „Text + flaches Rechteck“ beschrieben werden kann, fehlt 3D. Fügen Sie Neigung, Ebene oder Tiefe hinzu, bis sie fotografiert und nicht gezeichnet aussieht.

7. Die vier Grammatiken (Einstellungsstrukturen)

A. Kino/Morph (Openings und Stiltests)

Kinematografischer Titel → Objekt mit Squash & Stretch auf gepunkteter Bahn → Kamera taucht ein und das Objekt macht einen Morph (Kreis→Pille→Bildschirm) → rotierendes 3D-Element mit Zoom auf die Vorderseite → kinetische Typografie mit handgezeichnetem Kreis → Glaspanel mit Spring-Diagramm → Abschluss: Rückkehr zum Startpunkt (perfekte Schleife, falls gewünscht).

B. Premium App Promo (Referenzen wie Opal/Qwix)

1. Lebendiger Umgebungshintergrund + Spotlight; EINE Akzentfarbe mit Glow/Bloom.
2. Opening: UI/Telefon in schwebender 3D-Perspektive, Dolly-In mit Pull-Focus (beginnt unscharf, wird scharf).
3. Kameratauchgang in ein Detail (Diagrammbalken), das zur nächsten Einstellung wird.
4. Glaspillen mit Icon + zählender Nummer (easeOut) + Label; Rand mit wanderndem Lichtbogen.
5. Aggregation: Hilfslinien zeichnen sich von den Pillen zu einer riesigen Zahl mit ▲.
6. App-Icon mit Morph + Partikelexplosion.
7. App-Sheet + riesiger CTA-Pillen-Button mit Lichtwischer.
8. Logo-Reveal: Symbol zeichnet sich (SVG-Dash) + Wordmark + kleine URL.

C. Interaktive Dauer-Szene (Referenz „Built with Claude“)

Eine einzige Szene ohne Schnitte auf flüssiger Aurora: Symbol zeichnet sich → Befehlspillen treten ein → Cursor reist und klickt auf eine Pille → die Pille macht einen Morph zur Eingabezeile → Eingabe Wort für Wort getippt (blinkender Cursor, letztes Wort hervorgehoben) → die Zeile morphst zum Ergebnis (Karte, die sich von innen aufbaut: Ring, Balken, Play, Fortschritt %) → zweiter Befehl getippt ändert die gesamte Hintergrundfarbe → Abschluss mit Symbol + Signatur. Die Geschichte ist „jemand benutzt das Produkt“.

D. Heller Kinetic Type (PT-BR Typografie-Anzeigen)

Marken-Eis-Hintergrund; kräftige Typografie der Markenschrift als Hauptdarsteller, Wort für Wort im Sprachbeat, Schlüsselwort in Akzentfarbe, farbiger Geisterschatten und handgezeichnete Kritzeleien (Durchstreichung, Kreis, Swoosh – SVG-Dash). Unterbrochen von echter UI, die die Geschichte erzählt: Benachrichtigungen, die mit Physik gestapelt werden, Balkenvergleich, orbitales System von Knoten um das Logo, Chat mit sprechenden Blasen, Statuskarte mit Diagramm, riesiger Zähler. Szenengrenzen per Zoom-Punch; dunkler Beatwechsel in der Mitte („Und das ist noch nicht alles!“); Slogan in 3 Schlägen mit Icon; Abschluss mit Logo + CTA vom Cursor geklickt + URL.

8. Ton: SFX pro Mikroereignis

• Soundtrack in sfx_kit.py erstellt: Jedes Audiereignis verwendet dieselbe Framenummer wie das visuelle Ereignis.
• Vokabular: pop (Klicks, Karten, große Wörter), tick (Tippen, Balken, Zähler), whoosh (Übergänge und Morphs), shimmer (Bestätigungen, Reveals), pad (dezenter harmonischer Teppich unter allem).
• Dichte gleich wie im Video: Wenn es ein visuelles Mikroereignis gibt, gibt es Ton. Unter Sprachaufnahme die Tonspur auf ~0,5 mischen und die Stimme dominieren lassen.
• Die Stimme des Benutzers niemals generieren oder ersetzen: Die Erzählung ist immer seine eigene, unverändert (Stille-Schnitte nur mit analysiertem Audio und nach dem Schnitt neu hergestellter Synchronisation).

9. Anti-Generic-Checkliste (vor Auslieferung prüfen)

1. Ist die Typografie Hauptdarsteller oder nur UI-Etikett? (muss Hauptdarsteller sein)
2. Gibt es in ALLEN Szenen alle 0,5–1,5 s ein Mikroereignis?
3. Stapelt, fällt oder kollidiert etwas mit Physik – oder schwebt alles isoliert?
4. Gibt es Interaktion (Cursor klickt, Eingabe getippt, Produkt wird benutzt)?
5. Gibt es eine Ebene mit handgezeichneten Kritzeleien (Kreis, Unterstreichung, Pfeil, Durchstreichung)?
6. Ist mindestens ein Übergang ein Objekt-Morph, nicht nur Zoom?
7. Fließt der Hintergrund mit eigenem Leben und Parallaxe zwischen Ebenen?
8. Hat die UI echten „Inhalt“, der die Geschichte erzählt (Werte, Gespräche, Namen) statt abstrakter Platzhalter?
9. Gibt es ein orbitales System, Text auf Bahn oder ein anderes „Signature“-Element?
10. Besteht der 3D-Test aus Abschnitt 6?
11. SFX bei jedem Mikroereignis?

10. Kommerzielle Wahrheit (erfinden Sie keine Zahlen)

• Eine Zahl, die zu einem kommerziellen Versprechen wird (Prozentsatz, Zustimmungsrate, Preis) wird nicht erfunden: Wenn die Marke sie nicht veröffentlicht, verwenden Sie einen visuellen Vergleich ohne Zahl (hoher Balken × niedriger Balken), Volumen-/Wachstumszähler als Motion-Element und qualitative Sprache („hoch“, „deutlich niedriger“).
• Eine unsichere Tatsache über das Produkt wird VOR dem Skripting signalisiert, niemals nach dem Rendern.

11. Fehler, die bereits passiert sind (nicht wiederholen)

• Kontaktblatt täuscht: Miniaturen verstecken Textkollisionen und Überbreiten. Schlüsselframes immer in Originalgröße validieren.
• Doppeltes Attribut in SVG: zwei stroke-dasharray im selben Element – das erste gewinnt und das Draw-on stirbt lautlos. Ein Attribut pro Element.
• Hartcodierter Szenenindex: Funktion, die eine feste Szene zurückgibt (return 5), zerstört die letzte Szene, wenn sich die Anzahl der Szenen ändert. Vom Grenzen-Array ableiten.
• Offener 3D-Würfel: Seiten mit falschem translateZ (≠ halbe Abmessung) hinterlassen Lücken an den Kanten.
• 3 Shards parallel = OOM auf kleiner Maschine. Maximal 2.
• System-Chromium kann ungeeignet sein (Domain-/WebGL-Richtlinie): separaten chrome-headless-shell verwenden.
• Bild ohne Preload erscheint erst nach den ersten Frames: verstecktes <img> im Seitenkörper behebt das.
• Szene „fast richtig“: Lange Textbreite bei großer Schrift messen – Slogan in 118px kann über 1080px hinausgehen und hässlich umbrechen; tatsächliche Breite in der großen Vorschau prüfen.

12. Beispielprojekte (echte Produktionen dieses Systems)

• ~/workspace/motion-frames/teste_8s.mp4 – Grammatik A: Ball/Morph/Würfel/Typografie in Schleife, 8s.
• ~/workspace/iphone18/iphone18_pro.mp4 – Wort-für-Wort synchronisierte Erzählung (53s), iPhone 3D in CSS.
• ~/workspace/kalo/kalo_app_v2.mp4 – Grammatik B mit lebendigem Studiohintergrund + KI-Essens-Scan-Szene, 15s.
• ~/workspace/kalo/feito_com_muse.mp4 – Grammatik C: Dauer-Szene, Cursor, getippte Eingabe, Morphs, Aurora mit Crossfade, 14s.
• ~/workspace/turtle/turtlepags.mp4 – Grammatik D komplett mit Erzählung, echter Markenidentität (Logo/Palette/Schriftarten von der Website), 53s.