Kinematische Kamera

Was macht Kinematische Kamera?

Verwenden mit remotion-best-practices und motion-graphics. Baue eine zusammenhängende Welt und bewege eine gemeinsame Kamera durch sie hindurch, anstatt isolierte Panels in eine Leere zu stellen.

Obligatorischer Intake

Bevor du planst oder programmierst, führe das Intake-Gate von motion-graphics durch. Falls es fehlt, frage:

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

Nicht stillschweigend auf 9:16 oder Dunkel voreinstellen. Wenn der Benutzer die Wahl delegiert, verwende warmes Licht.

Absolutes visuelles Verbot

Dieses Skill führt niemals Neon, Glow, Bloom, leuchtende Kanten, farbige Schatten, Gradienten-Orbs, radiale Farbverläufe, Cyan-Lila-Gradienten, Glassmorphismus oder Cyberpunk-Beleuchtung ein. Die Kamerabewegung darf keine zurückhaltende Szene in einen vibe-codierten KI-Demo verwandeln. Produktakzente bleiben flach und zurückhaltend.

Obligatorisches genehmigtes-Referenz-Gate

Abgeschlossen vor dem Planen oder Programmieren:

1. Untersuche die letzten 3–5 genehmigten Renderings, die für dasselbe Projekt, Produkt, Seitenverhältnis, dieselbe Platzierung oder denselben visuellen Mechanismus relevant sind.
2. Öffne Quellkompositionen und untersuche Kamera-Keyframes, Timing, Abstände, Typografie, Farben, Dichte, Eintritte, Austritte und Endhalte.
3. Untersuche tatsächliche Clips oder repräsentative Frames; Dateinamen allein reichen nicht aus.
4. Erfasse authentische Assets: Logos, Maskottchen, Screenshots, Aufnahmen, Filmmaterial und vorherige Ausgaben.
5. Schreibe eine kurze Beat-Map, die erklärt, wie der Clip das genehmigte System fortsetzt.
6. Falls keine Projektreferenz vorhanden ist, verwende den festgelegten Fallback: warmes, off-white physisches/editoriales Umfeld, dunkle Tinte, gedämpfte Neutraltöne, ein zurückhaltender flacher Markenakzent, neutrale Schatten und null dekorative Effekte.

Referenzpriorität: gleiches Video → gleiches Produkt/Serie → gleiches 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 Basis, 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, enthülle Kontext, reise zum Kontrast/Ergebnis, dann beruhige.

Panels können existieren, aber sie müssen eine Welt und eine sinnvolle räumliche Beziehung teilen. Vermeide unverbundene Karten, die unabhängig im leeren Raum erscheinen.

Kamera-Rig

Verwende eine gemeinsame Keyframe-Zeitleiste für Brennpunkt 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, [/* Brennpunkt x */], {
  easing: ease,
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});
const fy = interpolate(frame, KEY_T, [/* Brennpunkt 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 Standard.
• Die Weltbreite beträgt normalerweise das 2- bis 2,5-fache der Viewport-Breite.
• Wiederholte benachbarte Tasten erzeugen Halte.
• Kamerabewegungen dauern normalerweise 14–24 Frames.
• Ende mit zwei nahezu identischen Tasten für einen stabilen Editor-Halt.
• Kamera, Cursor, Effekte und verbundene Objekte bleiben in einem Koordinatensystem.

Choreografie

1. Öffne eng auf etwas, das sich bereits bewegt.
2. Halte, während die primäre Aktion abgeschlossen wird.
3. Enthülle ihr größeres System.
4. Reise zum Kontrast/Ergebnis.
5. Ziehe heraus, während unterstützende Objekte in gestaffelter Reihenfolge fertig werden.
6. Beruhige für einen sauberen Schnitt.

Regeln:

• Die Kamera bewegt sich zur nächsten Aktion; die Aktion wird während des Haltes abgeschlossen.
• Eine primäre Aktion pro Beat.
• Verwende Mikrobewegungen nur, um Zustand anzuzeigen: Tippen, Ticken, Überprüfen, Wiedergabe, Fortschritt, Cursorbewegung.
• Bevorzuge kontinuierliche Transformation gegenüber Szenenersetzung.
• Bevorzuge sanftes Reisen gegenüber hektischen Whips.
• 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.
• Ersetze niemals generische farbige Quadrate, falsche Markierungen, erfundene UI oder gefälschte Metriken.
• Produktnamen, Dateinamen, Zähler, Befehle, Fortschritt und echte UI-Texte sind erlaubt.
• Wiederhole keine erzählten Sätze oder füge erklärende Abzeichen hinzu, weil ein Frame sich leer anfühlt.

Ablehnungs-Gate Erster Durchlauf

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

1. Wurde Format oder Hintergrund nicht bestätigt?
2. Gibt es Neon, Glow, farbige Beleuchtung, Farbverlaufswäsche, Glasplatte oder vibe-codierte KI-Behandlung?
3. Ist die Szene ein Satz unverbundener generischer Karten in einer Leere?
4. Wird Dunkel verwendet, ohne dass der Benutzer es gewählt hat oder eine genehmigte Referenz es erfordert?
5. Dekoriert die Kamerabewegung, anstatt Kausalität zu führen?
6. Fehlen authentische Assets, obwohl sie verfügbar sind?
7. Sind wesentliche Elemente bei der gewählten Instagram-Platzierung unlesbar?
8. Entspricht das Ergebnis nicht den Abständen, der Dichte, den Materialien und dem Bewegungsrhythmus der genehmigten Referenz?

Überarbeite privat, bis das Gate bestanden ist.

QA und Lieferung

1. Rendere Standbilder für den Auftakt, jedes Kameraziel, den Übergang, das Ergebnis und den Endhalt.
2. Vergleiche neben genehmigten Referenzen hinsichtlich Bildausschnitt, Dichte, Identität, Materialzurückhaltung und Feinschliff.
3. Überprüfe, ob authentische Assets lesbar bleiben.
4. Überprüfe Halt → Bewegung → Halt und dass keine Aktion während der Reise verdeckt wird.
5. Überprüfe das vollständige MP4 auf leere Reisen, Beschnitte, tote Frames, generisches Füllmaterial, Neon/Glow und schwache Endhalte.
6. Liefere nur aus, wenn es wie das gleiche genehmigte visuelle System aussieht.

Technische Einschränkungen

• Treibe Bewegung mit useCurrentFrame(), spring() und interpolate() voran; kein CSS-Animation.
• Die Eingabebereiche von interpolate() müssen streng steigend sein.
• Halte Welten moderat; große unscharfe/schattenbehaftete Ebenen sind teuer und verletzen normalerweise die visuellen Regeln.
• Verwende tabellarische Ziffern für tickende Daten.