Prismer-AI/PrismerCloud

Remotion

Erstellen und warten Sie Remotion-Projekte, während Sie Benutzeränderungen bewahren. Wenn sich eine Datei unerwartet geändert hat, behandeln Sie dies als beabsichtigt, es sei denn, der Benutzer bestätigt etwas anderes.

Arbeitsablauf

1. Überprüfen Sie package.json, die Lockdatei, bestehende Kompositionen, den aktuellen Diff und npx remotion versions. Verwenden Sie den Paketmanager und die Projektstruktur wieder; halten Sie alle remotion / @remotion/* Pakete auf einer exakten Version.
2. Bestätigen Sie die angeforderte Ausgabe: Kompositions-/Quellcodeänderungen, Studio-Vorschau, gerenderte Medien, ein eingebetteter Player oder ein Rendering-Dienst.
3. Implementieren Sie deterministische, frame-gesteuerte Bilder und halten Sie Rendereingaben serialisierbar.
4. Vorschau im Studio. Rendern Sie nur, wenn der Benutzer eine Mediendatei anfordert.
5. Überprüfen Sie gerenderte Medien mit ffprobe und prüfen Sie repräsentative Frames.
6. Melden Sie geänderte Dateien, Vorschau-/Rendering-Nachweise und den Auslieferungsbeleg. In Prismer ist ein loser Sandbox-Pfad kein ausgeliefertes Ergebnis.

Prismer-Artefakt- und Auslieferungsvertrag

Wenn der Benutzer gerenderte Medien anfordert, schreiben Sie die endgültige Datei unter $PRISMER_ARTIFACTS_DIR (das <artifacts_dir> des Dispatches). Legen Sie Projektgerüste, Frames, Probes und andere Zwischenergebnisse unter $PRISMER_SCRATCH_DIR oder dem bestehenden Projektbaum ab. Liefern Sie dann jede angeforderte Enddatei genau einmal aus:

cloud deliver "$PRISMER_ARTIFACTS_DIR/launch-video.mp4"

Das Schreiben oder Rendern einer Datei hängt sie nicht an. Ein erfolgreicher cloud deliver-Beleg ist der Auslieferungs-Orakel. Liefern Sie keine Vorschau-Frames, temporäre Audiodaten oder doppelte Encodierungen aus, es sei denn, der Benutzer hat sie angefordert. Wenn kein Dispatch-Artefaktverzeichnis existiert, behalten Sie das Ergebnis im vom Benutzer genehmigten Projektausgabepfad und melden Sie, dass die Auslieferung nicht verfügbar war, anstatt einen Beleg zu erfinden.

Projekterstellung und Kompositionen

Erstellen Sie kein Gerüst über einem nicht leeren Projekt. Wenn kein geeignetes Projekt existiert, bestätigen Sie, dass Node.js und Git verfügbar sind, und führen Sie dann Folgendes aus:

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm install

Verwenden Sie einen aussagekräftigen Verzeichnisnamen. Fügen Sie Tailwind nur hinzu, wenn der Benutzer danach fragt oder das Projekt es bereits verwendet. Überprüfen Sie das generierte Manifest, die Konfiguration und das globale CSS, bevor Sie fortfahren: Generator-Releases können immer noch Tailwind-Abhängigkeiten und Importe ausgeben, wenn --no-tailwind angefordert wurde. Entfernen Sie diese nur, wenn das Projekt sie nicht verwendet, und halten Sie die Remotion-Paketversionen ausgerichtet.

Verwenden Sie in Prismer-Sandbox-Images einen befehlsspezifischen, beschreibbaren npm-Cache für jeden Befehl, der ein fehlendes Paket installieren oder aufrufen kann, einschließlich Gerüsterstellung, npm ci, remotion add, Probes und Rendern:

npm_config_cache="${PRISMER_SCRATCH_DIR:-/tmp}/npm-cache" npm ci

Ändern Sie nicht die globale npm-Konfiguration des Benutzers, um eine Sandbox-Besitzinkonsistenz zu umgehen.

Halten Sie statische Kompositionsmetadaten inline:

<Composition
  id="LaunchVideo"
  component={LaunchVideo}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{title: 'Launch day'}}
/>

Verwenden Sie calculateMetadata() nur, wenn Dauer, Abmessungen oder Props tatsächlich von Eingaben, Remote-Daten oder Medieninspektion abhängen. Halten Sie defaultProps inline, damit Studio Props-Änderungen zurück in den Code speichern kann. Verwenden Sie für Videos mit mehreren Szenen benannte <Sequence>-Grenzen und leiten Sie alle Zeitsteuerung aus einem fps-bewussten Plan ab.

Frame-gesteuerte Animation

Steuern Sie gerenderte Animationen mit useCurrentFrame(), interpolate(), Federn oder Easing. Verwenden Sie keine CSS-Übergänge, CSS-Animationen, Echtzeit-Timer oder Tailwind-Animation-Hilfsprogramme; sie ergeben keine deterministischen Renderings.

import {
  AbsoluteFill,
  Easing,
  Interactive,
  interpolate,
  useCurrentFrame,
  useVideoConfig,
} from 'remotion';

export const Hero = () => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();

  return (
    <AbsoluteFill style={{justifyContent: 'center', alignItems: 'center'}}>
      <Interactive.Div
        name="Hero title"
        style={{
          opacity: interpolate(frame, [0, fps], [0, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.bezier(0.16, 1, 0.3, 1),
          }),
          scale: interpolate(frame, [0, fps], [0.9, 1], {
            extrapolateLeft: 'clamp',
            extrapolateRight: 'clamp',
            easing: Easing.spring({damping: 200}),
            output: 'perceptual-scale',
          }),
          fontSize: 88,
        }}
      >
        Launch day
      </Interactive.Div>
    </AbsoluteFill>
  );
};

Bevorzugen Sie die einzelnen CSS-Eigenschaften scale, translate und rotate gegenüber einem zusammengesetzten transform-String. Klammern Sie beide Enden von endlichen Animationen, es sei denn, die Extrapolation ist beabsichtigt.

Studio-bearbeitbares Markup

Verwenden Sie Interactive.* für HTML- und SVG-Elemente, die im Studio auswählbar, ziehbar, in der Größe veränderbar, drehbar, gestaltbar oder keyframbar sein sollen. <Img> ist bereits interaktiv.

• Geben Sie jedem interaktiven Element einen kurzen, fest codierten, beschreibenden name.
• Halten Sie einmaligen Text direkt innerhalb des Elements.
• Halten Sie Stilobjekte, interpolate()-Bereiche, Ausgaben, Easing und Extrapolation inline, wenn der Studio-Rückschreibevorgang wichtig ist.
• Destrukturieren Sie nur unterstützte Werte wie fps, width, height und durationInFrames aus useVideoConfig().
• Vermeiden Sie extrahierte Stilkonstanten, Objekt-Spreading, berechnete Effekt-Arrays und beliebige Variablen innerhalb bearbeitbarer Keyframe-Bereiche.

Schlagen Sie für benutzerdefinierte Komponenten die aktuelle make-component-interactive-API in der offiziellen Remotion-Dokumentation nach, bevor Sie sie implementieren.

Assets, Medien und Timing

Legen Sie lokale Assets in public/ ab und referenzieren Sie sie mit staticFile():

import {Audio, Video} from '@remotion/media';
import {AnimatedImage, CanvasImage, staticFile} from 'remotion';

export const MediaLayer = () => (
  <>
    <Video src={staticFile('clip.mp4')} />
    <Audio src={staticFile('music.mp3')} />
    <CanvasImage src={staticFile('logo.png')} />
    <AnimatedImage src={staticFile('sticker.gif')} />
  </>
);

Verwenden Sie @remotion/gif, wenn der Chrome-gestützte animierte Bildpfad ungeeignet ist. Installieren Sie Ökosystem-Pakete mit npx remotion add <package>, damit die Remotion-Paketversionen ausgerichtet bleiben.

Bevorzugen Sie lokale oder inhaltsadressierte Medien für reproduzierbare Sandbox-Renderings. Backen Sie keine Cookies, Bearer-Tokens, signierte URLs oder Karten-Anmeldedaten in den Quellcode oder Kompositions-Props. Kombinieren Sie für asynchrone Assets, Schriftarten, Untertitel und Kartenkacheln delayRender() / continueRender() mit cancelRender() bei Fehlschlag, sodass eine fehlende Abhängigkeit explizit fehlschlägt, anstatt bis zum Timeout zu hängen.

Verwenden Sie from, durationInFrames und trimBefore bei unterstützten Komponenten. Wickeln Sie nicht unterstützte Komponenten in <Sequence>:

<Sequence name="Product demo" from={2 * fps} durationInFrames={6 * fps}>
  <Video src={staticFile('demo.mp4')} trimBefore={1 * fps} />
</Sequence>

Passen Sie die Mediendauer an das beabsichtigte nutzbare Segment an. Halten Sie das Szenen-Timing in einem Plan, sodass Übergänge weder versehentlich überlappen noch leere Frames hinterlassen.

Verwenden Sie für Effekte die am wenigsten komplexe Technik, die die Aufnahme erzeugt:

1. HTML, SVG und CSS.
2. Ein Remotion-Effekt am Element oder ein HtmlInCanvas-Wrapper.
3. Ein eigener Effekt oder Shader nur, wenn die ersten beiden ihn nicht erzeugen können.

Halten Sie Effekt-Arrays stabil. Rendern Sie separate Elemente, anstatt die Form eines Effekt-Arrays bedingt zu ändern.

Untertitel und Multimedia-Inspektion

Normalisieren Sie Untertitel in das Caption[]-Format von Remotion und halten Sie Aufnahme-Zeitstempel in Millisekunden:

import type {Caption} from '@remotion/captions';

const caption: Caption = {
  text: 'Hello',
  startMs: 0,
  endMs: 800,
  timestampMs: null,
  confidence: null,
};

Konvertieren Sie Millisekunden nur an der Kompositionsgrenze unter Verwendung der Kompositions-fps in Frames. Bewahren Sie Wort-Timing, wenn verfügbar, gruppieren Sie Untertitel in lesbare Seiten, animieren Sie von der Frame-Uhr, und überprüfen Sie Umbruch und Sicherheitsbereiche bei den tatsächlichen Ausgabeabmessungen.

Verwenden Sie den aktuellen @remotion/captions-Parser für SRT, anstatt einen Zeitstempel-Parser zu schreiben. Bestätigen Sie vor der Implementierung von Untertiteln die aktuellen APIs für parse-srt, createTikTokStyleCaptions und den gewählten Transkriptionsanbieter.

Verwenden Sie für die Audio-Visualisierung @remotion/media-utils mit frame-fensterierten Audiodaten; treiben Sie Balken oder Wellenformen niemals von einem Echtzeit-Analysator an. Berechnen Sie für Diagramme und Textanimation zuerst die endgültige Geometrie und blenden Sie sie mit frame-basiertem Clipping, Deckkraft oder Transformationen ein, sodass Balken, Beschriftungen und Glyphen-Layout stabil bleiben.

Verwenden Sie Mediabunny für browser-seitige Dauer, Abmessungen, Zuschneiden, Zurechtschneiden, Metadaten und Container-Handhabung. Lesen Sie https://mediabunny.dev/llms.txt, bevor Sie unbekannte APIs verwenden. Halten Sie die Versionen von mediabunny und @mediabunny/* mit der Remotion-Version des Projekts kompatibel.

Karten

Wählen Sie eine Technik für die Aufnahme:

Technik	Verwenden, wenn
Vorbereitetes Raster	Deterministische statische/Satellitenbilder mit animierten Overlays sind ausreichend.
Mapbox	Ausgefeilte Stile, Globus-Rendering oder 3D-Gebäude sind erforderlich.
MapLibre	Eine Open-Source-Vektor-Laufzeit ohne Mapbox-API-Schlüssel wird bevorzugt.
MapTiler	Gehostete Stile oder geografische Annotationen passen zum Projekt.
CesiumJS	Gelände, globusweites 3D oder Kamerabewegung im Flugmodus ist erforderlich.

Übergeben Sie niemals Karten-Anmeldedaten. Bestätigen Sie Lizenzierung und Namensnennung für Bilder, Kacheln und Stile. Warten Sie vor der Frame-Erfassung auf Kacheln, Bilder, Schriftarten und Kamerainitialisierung. Treiben Sie die Kamerabewegung von der Remotion-Frame-Uhr an, halten Sie geografische Eingaben lokal oder inhaltsadressiert, wenn Wiederholbarkeit wichtig ist, und überprüfen Sie headless Chromium/WebGL in der tatsächlichen Rendering-Umgebung.

Studio, Rendern und Überprüfung

Starten Sie Studio, ohne einen externen Browser zu öffnen:

npx remotion studio --no-open

Verwenden Sie die ausgegebene URL. Öffnen Sie eine Komposition direkt unter /<composition-id>, zum Beispiel http://localhost:3000/LaunchVideo.

Nützliche Studio-Flags:

Argument	Zweck
--log=<level>	Setzen Sie error, warn, info oder verbose.
--port=<number>	Fordern Sie einen bestimmten Port an.
--force-new	Starten Sie eine weitere Instanz für dasselbe Projekt und denselben Port.

Für eine schnelle, deterministische Layout-Überprüfung rendern Sie einen Frame:

npx remotion still LaunchVideo out.png --scale=0.25 --frame=30

Bei 30 fps ist Frame 30 eine Sekunde. Überspringen Sie dies, wenn ein bestehender visueller Test bereits ausreichende Beweise liefert.

Überprüfen Sie vor dem Rendern, ob die CLI die beabsichtigte Komposition sieht:

npx remotion versions
npx remotion compositions

Lassen Sie Remotion seinen kompatiblen Browser standardmäßig verwalten. Ein Prismer-Image kann auch einen Playwright-Browser enthalten, aber seine Anwesenheit ist keine Kompatibilitätsgarantie: Das vollständige Chrome-Binärprogramm kann unter der Sandbox-Crashpad-Richtlinie fehlschlagen, während eine neuere Headless Shell einen Still-Render bestehen, aber bei einem Multi-Frame-Render fehlschlagen kann. Übergeben Sie --browser-executable nur für eine image-eigene, versionsgepaarte ausführbare Datei, die einen benachbarten Frame-Render-Test bestanden hat. Durchsuchen Sie niemals das gesamte Dateisystem nach einem Browser oder behandeln Sie einen erfolgreichen Start als Kompatibilitätsnachweis.

Rendern Sie nur, wenn der Benutzer nach einer Mediendatei fragt:

npx remotion render LaunchVideo out.mp4 --codec=h264
npx remotion still LaunchVideo out.png --frame=0

Die Prismer-Sandbox bietet Node und FFmpeg, und Remotion verwaltet einen kompatiblen Browser im Projekt-Cache. Bevorzugen Sie H.264-Video plus AAC-Audio in MP4 für breite Wiedergabe, es sei denn, Transparenz oder verlustfreie Ausgabe ist erforderlich. Halten Sie die Überschreibung des beschreibbaren npm-Cache auf jeden Befehl begrenzt:

npm_config_cache=/tmp/npm-cache npx remotion render LaunchVideo out.mp4 --codec=h264

Laden und warten Sie für CJK-Inhalte explizit eine festgelegte Schriftart; verlassen Sie sich nicht nur auf eine vorhandene System-Fallback-Familie. Überprüfen Sie benachbarte codierte Frames sowie isolierte Stills: Ein headloser Renderer kann einen korrekten Still erzeugen, während eine Fallback-Schriftart während eines vollständigen Renderings flackert oder Glyphen verliert.

Behandeln Sie die Medieninspektion als Auslieferungs-Orakel:

ffprobe -v error \
  -show_entries format=duration:stream=codec_name,width,height \
  -of compact out.mp4

Bestätigen Sie Dauer, Abmessungen, Codecs und den erwarteten Audiostream. Überprüfen Sie repräsentative Frames, einschließlich mehrerer benachbarter Frames in animierten oder textlastigen Abschnitten, oder spielen Sie das Ergebnis ab, wenn möglich. Ein erfolgreicher Renderbefehl allein ist kein Auslieferungsnachweis. Wenn isolierte Stills korrekt sind, das codierte Rendern jedoch teilweise oder flackernde Frames aufweist, verwenden Sie die programmatische renderStill()-API mit einer gebündelten Serve-URL und einer Browserinstanz, um die verifizierte Framesequenz auszugeben, und setzen Sie sie dann mit dem Sandbox-FFmpeg zusammen. Führen Sie die CLI nicht in einer Schleife aus und bündeln Sie nicht einmal pro Frame neu; melden Sie den Fallback und überprüfen Sie die zusammengesetzte Datei erneut.

Player, Editoren und Rendering-Dienste

Verwenden Sie Remotions <Player> für eine interaktive React-Vorschau. Halten Sie die Komposition sowohl für Player- als auch für Render-Pfade verwendbar; verzweigen Sie keine visuelle Logik.

Wählen Sie die Rendering-Architektur nach Arbeitslast:

• Browser/Client-Rendering für begrenzte, benutzerlokale Arbeit.
• Ein Node-Worker und eine Warteschlange für einen kontrollierten Server.
• Remotion Lambda für AWS-natives elastisches Rendering.
• Die aktuelle offizielle Vercel- oder Cloudflare-Integration, wenn sie zur Hosting-Plattform und zur installierten Remotion-Version passt.

Nicht-triviales Rendering sollte asynchron sein: Geben Sie eine Job-ID zurück, machen Sie Fortschritt und Fehler sichtbar, speichern Sie die Ausgabe dauerhaft und machen Sie Wiederholungen idempotent.

Modellieren Sie für Editoren Kompositions-Props und Timeline-Zustand explizit. Halten Sie Render-Eingaben serialisierbar und versioniert, validieren Sie nicht vertrauenswürdige Props, begrenzen Sie den Zugriff auf entfernte Assets und trennen Sie den Vorschauzustand vom dauerhaften Projektzustand.

Die Rendering-Oberfläche von Remotion ist React. Verwenden Sie für Vue-, Angular- oder Svelte-Hosts die aktuelle offizielle Integration und halten Sie die React-Kompositionsgrenze explizit, anstatt sich auf einen memorierten Starter zu verlassen.

Aktuelle Dokumentation und Upgrades

Bevorzugen Sie die aktuelle offizielle Dokumentation gegenüber memorierten APIs. Hängen Sie .md an eine Remotion-Dokumentations-URL an, um Markdown abzurufen, zum Beispiel:

https://www.remotion.dev/docs/sequence.md

Die Remotion-Dokumentensuche kann …

[gekürzt für die Übersetzung]