Long-Scroll-Collage-2D-Motion-Design: Designsprache, AE-Implementierung und Replikationsmethode

Dieses Skill entstammt einer vollständigen Frame-für-Frame-Replikation (1920×1080, 24 fps, 272 Frames, 12 Iterationen). Es beantwortet drei Dinge: Wie sieht dieser Film aus, wie bewegt er sich; Wie baut man ihn in After Effects auf; Wie misst und gleicht man ein Referenzvideo ab. Die drei Teile können einzeln genutzt werden: Beim Originaldesign siehe Kapitel 1–3, beim Aufbau des Projekts Kapitel 4, bei der Replikation Kapitel 5–6.

Falls im aktuellen Projekt ein rollback-replica/-Ordner existiert, ist dies die Referenzimplementierung: 拆解分析.md enthält alle gemessenen Werte, scripts/ ist der Szenengenerator, tools/ enthält die Messskripte. Lest diese zuerst und schreibt nichts von Grund auf neu.

1. Designsprache

1.1 Welt und Kamera

Alle Inhalte befinden sich auf einer horizontalen Langrolle (im Referenzfilm 11000×1080). Der Zuschauer sieht die Kamera, die sich über die Rolle bewegt.
Die Kamera führt nur horizontale Translation und Skalierung aus, keine Rotation und keine vertikale Bewegung. Umrechnung: X_Bildschirm = (X_Welt − cx)·s + 960, Y_Bildschirm = (Y_Welt − 540)·s + 540.
Ein Maßstab verläuft durch die gesamte Rolle und liegt immer in der Bildmitte (y=540, kleine Markierungen im Abstand von ca. 7,27 px, alle 5 Striche eine große Markierung). Er ist die Achse des Layouts und die Referenz für die Kameramessung.
Der gesamte Film verwendet keine Bewegungsunschärfe: selbst bei 500 px horizontalem Versatz pro Frame bleibt die Szene scharf – das macht den „harten“ Charakter dieses Stils aus.

1.2 Layout

Eine Achse: Die Inhalte sind um den Maßstab herum angeordnet. Jahre und Nummern liegen direkt am Maßstab als Koordinaten.
Oben real, unten Spiegel: Der Maßstab fungiert als Spiegel. Oben befinden sich Originalbilder und aufrechter Text, darunter deren monochrome Silhouetten und umgekehrter Text.
Klammernummerierung: Alle Beschriftungen sind in Klammern gesetzt, (1) (2), (crash), [cloud1]; Klammerwörter sind oft hohl.
Dicke-Dünn-Kontrast: 1 px dünne Kreise, konzentrische Kreise, Bogen-Texte, Referenzlinien stehen neben großflächigen, massiven Farbblöcken.
Verschachtelte Rahmen: Schwarzer Rahmen um schwarzen Rahmen, um 90° gedreht, der Maßstab verläuft mittig hindurch.
Dichte-Rhythmus: Locker → dicht → sehr dicht → Leerraum → voll → locker. Nicht durchgängig gleich voll.

1.3 Farben

Der graue Hintergrund mit Schwarz-Weiß bildet die Basis. Akzentfarben sind auf drei beschränkt, alle anderen Farben erscheinen nur in Fotos.

Name	Wert	Verwendung
Hintergrundgrau	`#E6E6E6`	Hintergrund (mit sehr leichter Körnung)
Rosarot	`#E8086D`	Ringsegmente, Bänder, Lichtstrahlen, Hintergrundblitze
Hellblau / Königsblau	`#1F86F0` / `#0D3ED8`	Blöcke, Spiegel-Silhouetten / Große Kreise, Himmel
Blau-Violett	`#6982F6`	Hintergrundblitze, Silhouetten-Platzhalterfarbe
Mintgrün	`#19E6B4`	Wenige Flächen
Fast-Schwarz	`#110D0C`	Schwarzphasen, Abschluss

Die Hintergrundfarbe selbst wird nach Abschnitten hart umgeschaltet: Grau → Schwarz → Rosarot → Blau-Violett, jeweils von einem Frame zum nächsten.

1.4 Schriftkombinationen

Die Mischung ist beabsichtigt: Jede Informationsart erhält eine eigene Schrift: Übergangs-Serife (Times, Klammerbeschriftungen, hohl), geometrische serifenlose Feinschrift (Montserrat, Jahreszahlen, enge Zeichenabstände), abgerundete, eckige Technikschrift (Jura / OCR-A, Befehlszeilen und kleine Labels), kontrastreiche moderne Serife (Playfair/Bodoni, große Titelwörter, Buchstaben eng gesetzt), extra fette Serife (Lubalin/Rockwell, Haupttitel, horizontal gedehnt), monospaced (Consolas/Courier, Code und große Zahlen), Song-/Minchō-Schrift (CJK, bis zu 3-fach horizontal gedehnt), Pixelmatrix. Kleine Schrift sollte ruhig auf 6–10 px gesetzt werden, nicht größer – sie dient der „Textur“, nicht der „Information“.

1.5 Material-Vokabular

Fotomontage (hochkontrastives Schwarz-Weiß, Schwellenwert), kantengefundene Strichzeichnungen (weißer Hintergrund, schwarze Linien mit Bruchstellen), System-UI-Screenshots (Dialogboxen, Dateisymbole, Tabellen, Keyframe-Texte), Filmscans (Filmträger, Perforation, Randcodierung), 3D-Kleinobjekte (Flüssigmetall, glänzende Röhren, Weißmodelle, Drahtgitter), holografische Kegelverläufe, 1-Bit-Dither-Muster, QR-Codes, Pixel-Menschen. Dasselbe Objekt erscheint oft in zwei Versionen: Reales Objekt und seine einfarbige Silhouette.

1.6 Texturen

Reine Farbflächen bleiben sauber, Verläufe und Grautöne haben sichtbare Körnung; über die gesamte Szene wird zusätzlich 2–3 % monochromes Rauschen gelegt.
Fotos erhalten eine „Kopierer“-Textur: Schwellenwert, Tonwerttrennung, nur drei bis vier Graustufen.
Strichzeichnungen sind schwarze Linien auf weißer Füllung, keine grauen Linien; Linien sind dünn, mit Bruch- und Punktstellen erlaubt.
Chrom-Objekte wirken wie eine tonwertseparierte Renderung: Ein ganzer weißer Rand mit schwarzer Kontur, die Glanzlichter sind ein weißer Kern, umgeben von konzentrischen Ringen.

2. Bewegungssprache

2.1 Kamera

Skalierung: Übergänge zwischen mehreren festen Stufen erfolgen in 3–5 Frames rein linear, dann harter Stopp, keine Ease. An wenigen Stellen wird exponentielles Aus-Easing verwendet (Multiplikation des Differenzbetrags mit 0,6–0,75 pro Frame) oder exponentielle Beschleunigung beim Heranzoomen. Auch harte Schnitte sind möglich.
Translation ist die Überlagerung von drei Komponenten:
1. Konstante Drift, ca. 4 Welt-px/Frame, durchgehend;
2. Impuls auf Takt-Frames, dann Abklingen pro Frame mit Faktor 0,6–0,8 (Bsp.: +195, +33, +20, +14, +11, +9, +7);
3. Schnitte, Sprünge von mehreren Hundert px in einem Frame.
Die Kamera wird Frame für Frame in lineare Keyframes gebacken. Verlasst euch nicht auf Bézier-Easing, um solche Kurven zu erraten.

2.2 Takt

Ereignisse fallen auf ein Raster von 6 Frames pro Takt (0,25 s bei 24 fps), das einen Phasenversatz haben kann. Elemente erscheinen nacheinander im Takt, ein Element pro Takt, nicht gleichzeitig im Einblenden.

2.3 Element-Einschwünge und -Veränderungen (Kernmethoden)

Silhouetten-Platzhalter: Zuerst 1–2 Frames eine einfarbige Silhouette anzeigen (Weiß → Blau-Violett → Objekt, oder Rosarot → Objekt), dann durch die echte Textur ersetzen. Mit dem Effekt „Farbton“ alle Graustufen auf dieselbe Farbe mappen, Menge 100 → 0 als Hold.
Ein-Frame-Blinken / Größenwechsel: Erscheinen → einen Frame aus → wieder an; oder groß, klein, groß, klein dreimaliges Blinken, dann fixieren.
Radiale Wischblende taktweise segmentiert: Ringelemente wischen zunächst einen Abschnitt aus, dann springt der gesamte Abschnitt mit jedem Takt auf einen neuen Winkel, Abschnitte driften nur 1–2°/Frame.
Zwei lineare Wischblenden (Kopf und Schwanz): Bei streifenförmigen Elementen streckt sich zuerst der „Kopf“ vor, dann folgt der „Schwanz“ nach; der verbleibende Teil ist das nächste Element.
Hold-Keyframes als Standard: Position, Skalierung, Rotation springen Frame für Frame; echte Ease gibt es nur als 2–3-Frame-Aus-Ease.
Pop: 0,3–0,7× → 1,0, 2–3 Frames, mit optionalem Überschwinger von 1,1–1,2.
Bildschirmfixierung: Einzelne Elemente werden bei Kamerabewegung auf dem Bildschirm fixiert (mittels inverser Kameratransformation als Frame-für-Frame-Keyframes), nach einer Weile wieder der Welt „übergeben“.
Framerate-Mischung: Kleine 3D-Animationen sind oft in 30 fps erstellt und in eine 24 fps Timeline eingefügt, was sich als Schrittmuster 1, 2, 1, 1 alle 4 Frames äußert. Bei der Replikation verwenden Quell_Frame = ⌊1,25·(f − f0) + 0,5⌋, nicht gleichmäßig interpolieren.
Spiegel- und Versatzkopien: Wenn eine gespiegelte Silhouette erscheint, liegt eine weiße Kopie darunter, die in 4–5 Frames von einer Versatzposition in die exakte Position gleitet.

2.4 Globale Flash-Frames

Effekt	Vorgehen
Hintergrund-Hartschnitt (Schwarz, Rosarot, Blau-Violett)	Hold-Keyframes der reinen Hintergrundfarbschicht
Schwellenwert-Blitz (1 Frame, Bild wird binär Schwarz-Weiß)	Obere Einstellungsebene „Schwellenwert“
Differenz-Schwellenwert-Blitz (alles, das sich von Hintergrundfarbe unterscheidet, wird weiß)	Eine Ebene in derselben Farbe wie der Hintergrund mit Mischmodus „Differenz“, darüber „Schwellenwert“
Ganzbild-Invertierung (bestimmte Elemente behalten ihre Farbe)	Obere Ebene „Invertieren“; Elemente, die ihre Farbe behalten sollen, erhalten selbst zuerst eine „Invertieren“-Ebene
Lokale horizontale Riefen	Schmales Einstellungs-Objekt mit „Transformieren“-Effekt, „Einheitliches Skalieren“ aufheben, Breite auf mehrere tausend % setzen
Umdrehen	Ebenen-X-Skalierung Frame für Frame per Hold (Durchgang durch Null wird negativ), Achsenpunkt ebenfalls Frame für Frame bewegen, einen Frame Überschwinger
Abschluss	Verlaufsstreifen treppenförmig auffüllen, dann abtreten; Hintergrundfarbe schrittweise auf Fast-Schwarz absenken; Titel horizontal zu Nachbildern gedehnt

3. Ablauf beim Originaldesign eines solchen Films

Langrolle zeichnen: Weltbreite festlegen (ca. 800–1000 Welt-px pro Sekunde), in 4 Abschnitte unterteilen, pro Abschnitt ein Thema und eine Dichte.
Kameratabelle erstellen: Pro Einstellung: Skalierungsstufe, Start-cx, End-cx, Hintergrundfarbe, Ereignisse. Zwischen Stufen nur lineare Rampen oder Hartschnitte.
Ereignisse auf das 6-Frame-Raster setzen; pro Takt ein neues Element; alle 2–3 Sekunden einen globalen Flash-Frame oder Hintergrundwechsel.
Pro Element eine Einschwung-Methode aus Abschnitt 2.3 wählen, innerhalb desselben Abschnitts nicht mehr als zweimal dieselbe Methode.
Material gemäß Abschnitt 1.5 vorbereiten, jedes Objekt auch als einfarbige Silhouetten-Version.
Abschließend Körnung hinzufügen und prüfen, ob die Akzentfarben nur drei sind.

4. After Effects Implementierung

4.1 Projektstruktur

RB_REPLICA/
  01_Kompositionen/   RB_MAIN (1920×1080 Finalfilm)   RB_WORLD (Welt-Rolle, z.B. 14400×2600)
  02_Material/    Nach Abschnitten in Unterordner (A_… B_… C_… D_…, Maßstab und globale Effekte)
  03_Vollflächen/   Hintergrundfarben, Einstellungsebenen, Maskierungsflächen

In RB_WORLD werden alle Ebenen im Weltraum platziert; Weltpunkt (x, y) entspricht Kompositionspixel (x + OX, y + OY), mit Rand rundherum.
RB_MAIN von unten nach oben: Hintergrundvollfläche → RB_WORLD (Kollabieren aktivieren – die Kamera ist die Positions-/Skalierungs-Keyframes) → Bildschirm-Overlays → Einstellungsebenen (Körnung, Schwellenwert, Invertierung …).
Ebenen mit Abschnittsfarben taggen, Materialdateinamen mit Abschnittspräfix, um in 500+ Layern die Orientierung zu behalten.

4.2 Mit Skript generieren statt manuell platzieren

Große Layeranzahl, alle Werte sind gemessene Werte – geeignet für skriptbasierte Szenenbeschreibung und Import:

Eine Scene enthält eine Liste von Layern; jeder Layer hat Weltkoordinaten, Zeitspanne span(f_in, f_out), Property-Keyframes, Effektliste.
Material wird von Funktionen gezeichnet und anhand eines Hashs aus „Funktionsquellcode + Parameter“ gecacht; bei Änderung neuzeichnen.
Als AE-Projekt-JSON exportieren, mit aftereffects MCP Skript ae_project_import_json importieren; beim Neubau alten Wurzelordner per id löschen, dann neu importieren (Import nur anhängend).
Einstellungen, die JSON nicht transportieren kann (Einstellungsebenen, Kollabieren, Mischmodi), separat auflisten und nach Import mit layer.set_props / layer.set_blend_mode nachtragen.
Elemente mit unterschiedlicher Pose pro Frame (rotierende 3D-Objekte, sich pro Frame ändernde Verläufe) als „ein Frame pro Ebene“ realisieren, jede Ebene nur einen Frame aktiv – zuverlässiger als Stapeln von Effekt-Keyframes auf einer Ebene.

4.3 Effekt-Nutzungshinweise

Linearer Wischblende: Winkel ist Bewegungsrichtung; +90 wischt von links, −90 von rechts, 180 von oben, 0 von unten; Wischblende rechnet im Ebenenraum, bei gedrehter Ebene Winkel gegenläufig kompensieren.
Radialer Wischblende: Startwinkel 0 = oben, im Uhrzeigersinn; „Beide“ wischen von der Startposition aus in beide Richtungen.
Bei 16 bpc Projekt ist der Schwellenwert-Regler im Bereich 0–1 anzugeben.
Einstellungsebenen mit nicht-Kompositionsgröße: Punktparameter in Effekten werden einmal von „Ebene → Komposition“ umgerechnet.
Nicht-proportionale, statische Skalierungen besser ins Material einbacken, nicht in der Ebenentransformation belassen (Vorschau und Export können inkonsistent sein).

4.4 Rendering und Export

AEs integrierter H.264 lässt hochgesättigtes Rosarot dunkel wirken. Den Weg über „verlustfrei“ AVI und dann ffmpeg:

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 Projekte sammeln und archivieren

Bei Abgabe oder Archivierung das Projekt samt den tatsächlich verwendeten Materialien in einen separaten Ordner verschieben (entspricht „Datei → Projekt archivieren → Dateien sammeln“):

Nur die von Layern referenzierten Materialien kopieren, die Ordnerstruktur des Projektfensters beibehalten in (Footage)/;
Eine Projektdatei generieren, deren Materialpfade auf den Sammelordner zeigen (Neues Projekt → geändertes JSON importieren → Switches nachtragen → gleiche Bittiefe und Farbeinstellungen wie Originalprojekt → Speichern unter);
Einen Sammelbericht verfassen: Kompositionsspezifikationen, Materialanzahl und -größe, fehlende Dateien, verwendete Effekte (abhängig von Drittanbieter-Plugins? Schriftarten?), nicht gesammelte Dinge;
Verifizieren: Aus Originalprojekt und Sammelprojekt denselben einen oder zwei Frames rendern, pixelgenau vergleichen; sicherstellen, dass kein Material fehlt;
Nach Abschluss AE zurück auf das Originalprojekt schalten. Keine Kompositionen oder Materialien, die der Benutzer im Projekt abgelegt hat, verändern.

5. Methode zur Replikation eines Referenzfilms

Ziel ist „dass es wie derselbe Film aussieht“. Material wird durch Nachzeichnen und Neugenerieren erstellt, nicht durch Kopieren der Originalpixel.

5.1 Ablauf

Frames extrahieren (alle Frames, JPG reicht) und grundlegende Parameter notieren: Auflösung, Framerate, Framecount, Bewegungsunschärfe, ob die Tonspur wirklich Ton enthält.
Zuerst die Kamera lösen: Eine starre Referenz durchgängig im Film finden (hier der Maßstab). Für jeden Frame Skalierung und Translation messen, in eine Kameratabelle backen.
Die Welt zusammensetzen: Mit der Kamera kann jeder Frame zurück in Weltkoordinaten projiziert werden; alle weiteren Messungen in Weltkoordinaten durchführen.
Elementliste erstellen: Für jedes Element: Weltposition, Einblend-Frame, Ausblend-Frame, Einschwungmethode, Frame-für-Frame-Veränderungen.
Erste Version bauen, rendern, Frame für Frame vergleichen, schrittweise verbessern. Pro Version nur einen Satz von Problemen angehen, nach Besserung neu rendern und vergleichen.

5.2 Messdisziplin

Kameraschätzung: Jeden einzelnen Maßstab-Markierer pro Frame lokalisieren, in Weltkoordinaten umrechnen und mit dem idealen Raster vergleichen. Die Residuen sollten innerhalb derselben Einstellung konstant sein; wenn nicht, ist die Kameratabelle falsch. Dieser Schritt deckte einst zwei Registrierungsfehler von 8 px und 49 px auf, die in nebeneinanderliegenden Vergleichsbildern völlig unsichtbar waren, aber alle nachfolgenden Messungen verfälschten.
Numerische Detektion statt visueller Schätzung: Das Ablesen von Koordinaten auf mit Raster versehenen Ausschnittsbildern hat systematische Abweichungen von 3–8 px. Wichtige Maße mit Detektoren ermitteln: Farbschwellenwert plus Begrenzungsrahmen (Kopf/Schwanz von Blöcken), Schwerpunkt verbundener Komponenten (Glanzlichter, Markierungspunkte), Kreis-/Ellipsenanpassung (Kugeln, Ringe, Bahnen), zeilenweise Statistiken (Zeilennummern und -dicken von Linien). Original und Replikation mit demselben Detektor durchlaufen lassen und dann vergleichen.
Weltausgerichtete Ausschnittvergleiche: Beim Vergleich Original vs. Replikation dieselben Welt-Rechtecke nebeneinander ausschneiden, nicht Bildschirmscreenshots vergleichen, besonders bei sich bewegender Kamera.
Frame für Frame, nicht jeden n-ten Frame: Eine Stichprobe alle 2 Frames hatte einst eine 4-Frame-Periode einer Rotation als „fast bewegungslos“ erscheinen lassen.
Wenn ein Element „seltsam aussieht“, zuerst die Kamera verdächtigen, dann das Element.

5.3 GPT / Codex zum Neugenerieren von Material nach Referenzframes beauftragen

Geeignet für Fotos, Strichzeichnungen, Collage-Elemente, Handzeichnungen:

Ausschneiden der saubersten 1–2 Frames des Elements, auf das 2–4-fache vergrößern als Referenzbild.
Prompt-Struktur: „Zeichne X aus dem Referenzbild originalgetreu nach“ → Jedes Objekt und sein Aussehen Punkt für Punkt beschreiben → Auflisten, was weggelassen werden soll (Maßstab, darüberliegende Linien, benachbarte Elemente, Text) → Transparenten Hintergrund fordern.
Das Modell neigt dazu, das Hauptobjekt bis zum Ausfüllen der Leinwand zu dehnen: Referenzbild auf das Seitenverhältnis der Ausgabe mit Rand auffüllen und explizit „Proportionen beibehalten, Rand lassen“ angeben.
Vorschaubilder zeigen keinen transparenten Kanal, sehen oft aus als hätten sie einen Lichthof; vor Beurteilung Alpha-Kanal prüfen, nach Schwellenwert setzen.
Bei Bildern mit mehreren Objekten verschiebt das Modell die Anordnung: Bild in Kacheln teilen, jede Kachel gemäß gemessener Welt-Position ausrichten, unterschiedliche Skalierung pro Kachel zulassen.
Vom Modell übernommene Markenzeichen Dritter entfernen.
Generierungsaufgaben können parallel im Hintergrund laufen, währenddessen Messungen und programmierbare Teile fortsetzen.

Nicht für das generative Modell geeignet: Bewegung oder Topologie, die exakt sein muss (rotierende Ringe, ineinanderfließende Perlenketten, sich pro Frame ändernde Verläufe, Drahtgitter). Diese werden mit angepassten geometrischen Parametern programmatisch gerendert; das generative Modell übernimmt nur Texturen und Bildinhalte. Falls von den vom Benutzer vorgeschlagenen Tools abgewichen wird, ist der Grund im Bericht klar anzugeben.

5.4 Anpassungsmethode für 3D-Kleinobjekte

Auffällige Merkmale (Glanzlichter) Frame für Frame verfolgen;
Projektionsbahn (Ellipse) anpassen, dann Modell mit Perspektive zur Erklärung von „nah groß, fern klein, nah dicht, fern weit“;
Aus der Phasenfolge Drehzahl und Framerate-Umrechnungsrhythmus ablesen;
Jeden Frame mit den angepassten Parametern rendern, dann Rendering mit Original überblenden zur Phasenkontrolle.

5.5 Vergleich und Abgabe

Pro Version Ausgabe: Finaler Film, oben Original, unten Replikation mit Frame-Nummern synchrones Vergleichsvideo, mehrere Schlüsselbild-Vergleiche oben/unten.
Im Dokument festhalten: Einstellungstabelle, Kamerakurve, elementweise gemessene Werte, was in dieser Version geändert wurde, wo noch Unterschiede bestehen.
Im Bericht nicht nur sagen, was verbessert wurde, sondern auch die verbleibenden Abweichungen klar benennen und klassifizieren (Form, Helligkeit, Position, zeitlicher Versatz).

6. Checkliste

Vor Abgabe Punkt für Punkt durchgehen:

7. Häufige Fragen

Hochgesättigte Farben nach Rendering zu dunkel: Verlustfreies Format + ffmpeg mit bt709-Transformation nicht verwendet.
Element zwischen zwei Einstellungen um Dutzende px versetzt: Kameratabelle hat beim Schnitt einen Maßstab-Zyklus zu viel oder zu wenig gezählt.
Wischrichtung falsch: Winkel des linearen Wischblende ist die Bewegungsrichtung; bei gedrehten Ebenen kompensieren.
Schwellenwert-Frame ganz schwarz oder ganz weiß: Bei 16 bpc Pegel als 0–255 statt 0–1 eingegeben.
Generiertes Material hat falsche Proportionen: Referenzbild nicht auf Ausgabe-Seitenverhältnis aufgefüllt.
Bildschirmfixiertes Element wackelt beim Zoomen: Inverse Transformation muss den Kamerawert jedes Frames als Hold-Keyframe erhalten, nicht nur Start und Ende.

novahanser/rollback-motion-recreation

Was ist rollback-motion-recreation?

In Ihrer bevorzugten KI fragen

Dokumentation