Autovideo – Kontinuierliche Remotion-Kamerafahrt

Cinematic Camera

Verwende mit remotion-best-practices und motion-graphics. Baue eine zusammenhängende Welt und bewege eine gemeinsame Kamera durch sie, anstatt isolierte Panels in einem leeren Raum zu platzieren.

Verpflichtender Intake

Bevor du planst oder codierst, folge dem motion-graphics-Intake-Gate. Falls es fehlt, frage:

Welches Format möchtest du: 4:3 Halbbildschirm-Instagram-Einblendung oder 9:16 Vollbildschirm-Instagram? Und welchen Hintergrund: warmes Licht, sauberes Dunkel, helles Raster oder dunkles Raster?

Setze nicht stillschweigend 9:16 oder dunkel voraus. Falls der Nutzer die Wahl delegiert, verwende warmes Licht.

Absolute visuelle Sperre

Dieses Skill führt niemals Neon, Glow, Bloom, leuchtende Kanten, farbige Schatten, Gradienten-Orbs, radiale Farbverläufe, Cyan-Lila-Verläufe, Glas-Effekte oder Cyberpunk-Beleuchtung ein. Kamerabewegung darf eine zurückhaltende Szene nicht in eine vibe-codierte KI-Demo verwandeln. Produktakzente bleiben flächig und zurückhaltend.

Verpflichtendes Gate für genehmigte Referenzen

Vor Planung oder Codierung abschließen:

1. Untersuche die letzten 3–5 genehmigten Renderings, die für dasselbe Projekt, Produkt, Seitenverhältnis, denselben Platzierungsort oder denselben visuellen Mechanismus relevant sind.
2. Öffne Quellkompositionen und inspiziere Kamerakeyframes, Timing, Abstände, Typografie, Farben, Dichte, Ein- und Ausgänge sowie Endhalte.
3. Untersuche tatsächliche Clips oder repräsentative Frames; Dateinamen allein sind nicht ausreichend.
4. Erfasse authentische Assets: Logos, Maskottchen, Screenshots, Aufnahmen, Filmmaterial und frühere Ausgaben.
5. Schreibe eine kurze Beat-Map, die erklärt, wie der Clip das genehmigte System fortsetzt.
6. Falls kein Projektverweis existiert, verwende den festgelegten Fallback: warmer, cremefarbener physischer/editorialer Hintergrund, dunkle Tinte, gedämpfte Neutrale, ein zurückhaltender flächiger Markenakzent, neutrale Schatten und keine dekorativen Effekte.

Referenzpriorität: selbes Video → selbes Produkt/Serie → selbes Seitenverhältnis/Anwendungsfall → andere genehmigte Repository-Beispiele → festgelegter Fallback.

Kanonische Galerie: https://github.com/Liamrjohnston/remotion-motion-graphics-skill

Kürzlich genehmigte Arbeit ist die Grundlage, keine optionale Inspiration. Erfinde keine neue Ästhetik um der Neuheit willen.

Kernidee

Baue eine Welt, die größer ist als der Viewport. Öffne eng auf eine Aktion, halte, während sie abgeschlossen wird, zeige den Kontext, reise zum Kontrast/Höhepunkt und kehre dann zur Ruhe.

Panels dürfen existieren, müssen aber eine gemeinsame Welt und sinnvolle räumliche Beziehung teilen. Vermeide unzusammenhängende Karten, die unabhängig in leerem Raum erscheinen.

Kamera-Rig

Verwende eine gemeinsame Keyframe-Timeline für Fokuspunkt und Zoom:

const ease = Easing.inOut(Easing.cubic);
const KEY_T = [0, 46, 62, 78, 96, 132, 174, TOTAL_FRAMES];

const fx = interpolate(frame, KEY_T, [/* Fokus x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* Fokus y */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const z = interpolate(frame, KEY_T, [/* Zoom */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

<AbsoluteFill style={{backgroundColor: BG}}>
  <div
    style={{
      position: 'absolute',
      transform: `translate(${VIEW_W / 2 - fx}px, ${VIEW_H / 2 - fy}px) scale(${z})`,
      transformOrigin: `${fx}px ${fy}px`,
    }}
  >
    {/* Gesamte Szene in Weltkoordinaten */}
  </div>
</AbsoluteFill>

• Abmessungen stammen aus dem bestätigten Format, niemals aus einem versteckten Standardwert.
• Die Weltbreite beträgt normalerweise das 2- bis 2,5-fache der Viewport-Breite.
• Wiederholte benachbarte Keys erzeugen Halte.
• Kamerabewegungen dauern normalerweise 14–24 Frames.
• Ende mit zwei nahezu identischen Keys für einen stabilen Editor-Halt.
• Kamera, Cursor, Effekte und verbundene Objekte bleiben in einem Koordinatensystem.

Choreographie

1. Öffne eng auf etwas, das sich bereits bewegt.
2. Halte, während die Hauptaktion abgeschlossen wird.
3. Zeige das größere System.
4. Reise zum Kontrast/Höhepunkt.
5. Fahre heraus, während unterstützende Objekte in gestaffelter Reihenfolge abschließen.
6. Beruhige dich für einen sauberen Schnitt.

Regeln:

• Die Kamera bewegt sich zur nächsten Aktion; die Aktion wird während des Haltes abgeschlossen.
• Eine Hauptaktion pro Beat.
• Verwende Mikrobewegungen nur, um Zustand zu zeigen: Tippen, Tickern, Überprüfen, Abspielen, Fortschritt, Cursorbewegung.
• Bevorzuge kontinuierliche Transformation gegenüber Szenenersetzung.
• Bevorzuge flüssige Fahrten gegenüber hektischen Schwenks.
• Bewegung erklärt Kausalität; sie kompensiert niemals ein schwaches Konzept.

Authentizität und Text

• Verwende echte Logos, Filmmaterial, Screenshots, Aufnahmen, UI und verifizierte Daten, wenn verfügbar.
• Verwende niemals generische farbige Quadrate, gefälschte Markierungen, erfundene UI oder gefälschte Metriken.
• Produktnamen, Dateinamen, Zähler, Befehle, Fortschritt und echter UI-Text sind erlaubt.
• Wiederhole keine erzählten Sätze oder füge erklärende Badges hinzu, weil ein Frame leer wirkt.

Gate für den ersten Durchlauf (Rejection Gate)

Zeige kein Rendering, bis jede Antwort „nein“ lautet:

1. War Format oder Hintergrund unbestätigt?
2. Gibt es Neon, Glow, farbige Beleuchtung, Farbverlaufswaschungen, Glaspaneele oder vibe-codierte KI-Behandlung?
3. Besteht die Szene aus einer Menge unzusammenhängender generischer Karten in einer Leere?
4. Wird Dunkel verwendet, ohne dass der Nutzer es gewählt hat oder eine genehmigte Referenz es erfordert?
5. Verziert die Kamerabewegung anstatt Kausalität zu leiten?
6. Fehlen authentische Assets, obwohl sie verfügbar sind?
7. Sind wesentliche Elemente am gewählten Instagram-Platzierungsort unlesbar?
8. Passt das Ergebnis nicht zu den Abständen, der Dichte, den Materialien und dem Bewegungsrhythmus der genehmigten Referenz?

Überarbeite privat, bis das Gate bestanden ist.

Qualitätssicherung und Auslieferung

1. Rendere Einzelbilder für den Anfang, jedes Kameraziel, den Übergang, den Höhepunkt und den Endhalt.
2. Vergleiche neben genehmigten Referenzen hinsichtlich Bildausschnitt, Dichte, Identität, materialbezogener Zurückhaltung und Feinschliff.
3. Überprüfe, ob authentische Assets lesbar bleiben.
4. Überprüfe Halten → Bewegen → Halten und dass keine Aktion während der Fahrt verborgen ist.
5. Untersuche die vollständige MP4-Datei auf leere Fahrten, Beschnitte, tote Frames, generische Füllungen, Neon/Glow und schwache Endhalte.
6. Liefere nur aus, wenn es wie dasselbe genehmigte visuelle System aussieht.

Technische Einschränkungen

• Treibe Bewegungen mit useCurrentFrame(), spring() und interpolate() an; keine CSS-Animationen.
• interpolate()-Eingabebereiche müssen streng monoton steigend sein.
• Halte Welten moderat; große Schichten mit Unschärfe/Schatten sind teuer und verletzen normalerweise die visuellen Regeln.
• Verwende tabellarische Ziffern für tickende Daten.