Remotion Code Motion Explainer

Was macht Remotion Code Motion Explainer?

Erstellen Sie eine abstrakte Erklärung als ein kontinuierliches, editierbares visuelles System. Zeigen Sie, wie sich jedes Konzept verändert, anstatt die Erzählung mit nicht zusammenhängender Bewegung zu dekorieren.

Erstellt von Bingo (@DWCD-Bingo) und gepflegt unter der Vibe Motion Organisation.

Die relevanten Anleitungen laden

• Lesen Sie references/code-motion-design.md für jede Produktion.
• Lesen Sie references/motion-production-patterns.md für jede Produktion.
• Lesen Sie references/production-and-qc.md vor der Implementierung und der endgültigen Auslieferung.
• Lesen Sie references/ui-motion-shot-library.md für Arbeiten mit UI, Produkt, KI-Workflows, Neon-Fokus, Wellenformen, Dashboards, Design-Tools oder hochauflösenden Interfaces.
• Lesen Sie references/reference-reconstruction.md beim Studieren oder Nachbilden eines Referenzvideos, After Effects Renderings, Prototyps oder Bildschirmmitschnitts.
• Verwenden Sie assets/shot-library als gebündelte, editierbare Startbibliothek. Durchsuchen Sie assets/shot-library/shot-library.json bevor Sie eine neue Einstellung entwerfen. Kopieren Sie die Bibliothek in das Zielprojekt, wenn eine wiederverwendbare Komponente zur semantischen Aufgabe passt; bearbeiten Sie das installierte Skill nicht direkt.
• Konsultieren Sie die installierte Remotion Dokumentation oder das Best-Practices-Skill, bevor Sie unbekannte APIs verwenden.

Den Produktionsvertrag festlegen

1. Klären Sie das freigegebene Skript oder die Erklärung, den Status der Narration, die Autorität der Untertitel, das Seitenverhältnis, die Bildrate, die Dauer, das Brandsystem, die technischen Fakten und das Auslieferungsformat.
2. Behandeln Sie menschlich verifizierte Untertitel als zeitliche Autorität, wenn eine Narration existiert. Wenn es keine Narration gibt, erstellen Sie eine explizite Beat-Zeitleiste und gestalten Sie das Video so, dass es auch stumm verständlich bleibt.
3. Verwenden Sie nur vom Benutzer bereitgestellte, lizenzierte, gemeinfreie oder eindeutig weiterverbreitbare Assets.
4. Erfinden Sie niemals Produktverhalten, numerische Daten, wissenschaftliche Zusammenhänge oder Interaktionsergebnisse.
5. Bevorzugen Sie ein parametrisiertes visuelles System gegenüber einmaligen, fest codierten Szenen.

Den Workflow ausführen

1. Sprache in visuelle Zustände umwandeln

• Teilen Sie die Erklärung in semantische Beats auf Satzebene.
• Halten Sie für jeden Beat fest:
  • Narration oder Bildschirmaussage;
  • narrativer Zweck;
  • Eingabezustand;
  • dominantes Verb;
  • sichtbare Transformation;
  • Ausgabezustand;
  • Betrachterfokus;
  • Übergabe zum nächsten Beat.
• Führen Sie Nomen, Aktionen, Zahlen, Beziehungen und Zustandsänderungen zu unabhängigen visuellen Akteuren zusammen.
• Identifizieren Sie persistente Objekte, die über Beats hinweg bestehen bleiben.
• Wählen Sie die einfachste genaue Darstellung: UI, Fluss, Diagramm, Wellenform, Formel, Diagramm, räumliches Modell oder 3D.
• Schreiben Sie den Plan in src/data/choreography-plan.json.

Tor: Jede Aussage hat einen sichtbaren Begründungsauftrag, Ausführenden, ein Ergebnis und eine Übergabe.

2. Das visuelle System festlegen

• Definieren Sie das Raster, den sicheren Bereich, Abstände, Typografie, Farbensemantik, Tiefe, Kamera und Bewegungskurven.
• Schreiben Sie einen konzeptuellen Winkelsatz, der die visuelle Welt beschreibt.
• Entwerfen Sie repräsentative statische Frames für den Aufhänger, den komplexesten Mechanismus und das Ende.
• Bauen Sie den informationsreichsten Helden-Frame, bevor Sie Eingänge gestalten.
• Erstellen Sie ein persistentes Objektregister und einen Weltkoordinatenplan.
• Zerlegen Sie komplexe Objekte in sinnvolle bewegliche Teile, anstatt flache Screenshots zu animieren.
• Halten Sie identische Konzepte visuell konsistent über das gesamte Video.

Tor: Die statischen Frames lesen sich als ein System und der komplexe Frame kann aus editierbaren Komponenten zusammengesetzt werden.

3. Deterministische Remotion-Bewegung implementieren

• Treiben Sie Animationen mit useCurrentFrame(), interpolate(), spring() und expliziten Frame-Bereichen an.
• Verwenden Sie keine CSS-Übergänge, CSS-Keyframes, Zufallswerte ohne deterministische Saat oder unabhängig getaktete Browser-Animationen.
• Parametrisieren Sie Werte nach Bedarf durch Props und Zod-Schemata.
• Bevorzugen Sie React, SVG und HTML. Verwenden Sie Canvas, WebGL oder Three.js nur, wenn das Konzept sie erfordert.
• Messen Sie Text, begrenzen Sie Bereiche, validieren Sie numerische Eingaben und vermeiden Sie frame-abhängige Seiteneffekte.
• Halten Sie persistente Objekte eingebunden und mutieren Sie ihren Zustand über Beats hinweg.
• Setzen Sie zwei bis vier kompatible Bewegungsatome in jedem vier- bis sechssekündigen Überprüfungsfenster zusammen.
• Geben Sie jedem Fenster die Phasen Aufbau, Aktion, sichtbares Ergebnis und Übergabe.
• Friere Sie jedes zeitabhängige Kind ab demselben Anzeige-Frame ein, wenn das Ende gehalten werden muss.

Tor: Das Rendering ist deterministisch, editierbar, technisch genau und bei beliebigen Frames stabil.

4. Kontinuität und Kausalität bewahren

• Verwenden Sie Position, Objektidentität, Skalierung, Masken, Richtung und Audio-Motive über Übergänge hinweg wieder.
• Transformieren oder übergeben Sie ein bedeutungsvolles Element, bevor Sie das nächste einführen.
• Verwenden Sie Kamerabewegungen nur, um Hierarchie oder Beziehung zu enthüllen.
• Vermeiden Sie wiederholte Vollbild-Fade-und-Skala-Rücksetzungen.
• Behalten Sie mindestens eine visuelle Invariante zwischen benachbarten Beats bei, es sei denn, ein Kapitelwechsel ist beabsichtigt.
• Machen Sie Ursache und Wirkung lesbar: Eingabe bewegt sich, Prozess reagiert, Ausgabe wird sichtbar und die Kamera enthüllt das größere System.

Tor: Das stumme Video bleibt als eine kontinuierliche Erklärung verständlich.

5. Narration, Beschriftungen und Ton binden

• Lösen Sie Beschriftungen, Werte, Zustände und Interaktionsfeedback auf exakte Untertitel-Hinweise aus.
• Halten Sie die Narration klar dominant über Musik und Effekte.
• Verwenden Sie zurückhaltende Ticks, Einschläge, Sweeps und tonale Akzente nur für sichtbare Ereignisse.
• Erstellen Sie eine Audio-Ereignis-Karte parallel zum Bewegungsplan.
• Beenden Sie Musik und Bewegung mit einer absichtlichen Auflösung anstelle eines harten Schnitts.

6. Überprüfen, Rendern und Lernen

• Rendern Sie zuerst den Aufhänger, den komplexesten Mechanismus, Gleichungen/Datenzustände, Übergänge und das Ende.
• Prüfen Sie Einstiegs-, Mittel-, Maximalinformations-, Übergabe- und Halte-Frames.
• Überprüfen Sie kontinuierliche Bewegungsfenster und deren Überlappungen, nicht nur isolierte Screenshots.
• Erstellen Sie ein Kontaktblatt, das die gesamte Zeitleiste abdeckt.
• Verifizieren Sie das Halten des letzten Frames, indem Sie zwei späte Frames pixelgenau vergleichen.
• Prüfen Sie Textabschneidung, sichere Bereiche, Farbkontraste, Wellenform-/Datenkorrektheit, fehlende Assets, Audiopitzen, Dauer, Bildrate und Codec.
• Speichern Sie Überprüfungsnachweise in qc/workflow-evidence.json.
• Notieren Sie Korrekturen und wiederverwendbare Komponenten in qc/production-learning.json.

Tor: Das vollständige Rendering besteht semantische, Kontinuitäts-, Kausalitäts-, Kompositions-, Timing-, technische und Lizenzprüfungen.

Ablehnen

Lehnen Sie ungenaue Interaktionen, erfundene Daten, willkürliche Bewegungen, unleserliche Beschriftungen, abgeflachte Prozessdiagramme, generische Slide-Rücksetzungen, Nichtübereinstimmung von Narration/Untertiteln, unlizenzierte Assets, fest codierte persönliche Pfade, nicht-deterministisches Rendering, fehlende Bewegungsfenster-Überprüfung, übersprungene Überprüfung des letzten Frame-Halts oder mit Marken versehene Referenzkopien, die als wiederverwendbare Vorlagen präsentiert werden.

Liefern

Geben Sie das endgültige Video, das editierbare Remotion-Projekt, die Zeitleiste, die Komponentenparameter, die genehmigten Eingabe-Assets, Audiospuren (falls verwendet), das Kontaktblatt, die QC-Nachweise und eine kurze Liste wiederverwendbarer Komponenten zurück.

Gebündelte Beispiele

• assets/showcase/code-motion-promo-30s.mp4: 30-sekündiger Fähigkeits-Trailer.
• assets/showcase/ac-to-dc-explainer.mp4: Wissenschaftliches Erklärvideo-Beispiel.
• assets/shot-library: Editierbare Remotion-Einstellungsbibliothek und durchsuchbarer Katalog.