Erklärvideo: Remotion-Feinschliff, Cover und geprüfter Export

Remotion-Produktion

Erstelle Remotion-Videos als deterministische Frame-Renderer. Behandle Asset-Geometrie, visuelle Verankerung, Zeitplanung und finale Medienverifikation als separate Belange.

Aufgabe lenken

• Für Spritesheet-Extraktion, Frame-Bleeding, nicht zentrierte Motive, abgeschnittene Grafiken oder unnatürliche Loops lies references/sprite-sheets.md.
• Für Kompositionsstruktur, Szenen-Timing, Live-Koordinaten-Panels oder Übergangsdesign lies references/scene-architecture.md.
• Für ein Video-Einleitungscover, eigenständige Thumbnail-Komposition, Marken-Endcard oder finalen Standbild lies references/covers-and-endings.md.
• Für Asset-Laden, Audio, delayRender-Fehler, Out-of-Memory-Renderings oder Export-Verifikation lies references/rendering-and-audio.md.
• Für Cover-Bild-Prompts, Thumbnail-Richtung, Kurzvideo-Beschreibungen oder Publishing-Hashtags lies references/publishing-copy.md.

Lies nur die für die Anfrage relevanten Referenzen. Überprüfe die installierte Remotion-Version, bevor du Imports wählst, da ältere Projekte Medienkomponenten aus remotion bereitstellen können, während aktuelle Projekte @remotion/media verwenden.

Produktions-Workflow

1. Rendervertrag festlegen

Untersuche das bestehende Projekt vor der Bearbeitung. Halte fest:

• Composition-ID, Breite, Höhe, FPS und Dauer;
• Szenengrenzen und ob Frames global oder lokal zu einer Sequence sind;
• Quell-Asset-Maße, Transparenz, Frame-Metadaten und Audio-Dauer;
• erforderlicher Ausgabe-Codec, Ziel und verfügbare Render-Ressourcen;
• ob die Leistungen eine Einleitungscover-Szene, eigenständiges Cover-Bild, Endcard, hörbares Audio, absichtliche Stille oder Publishing-Kopie umfassen.

Bewahre nicht zusammenhängende Arbeitsbaum-Änderungen. Bevorzuge eine kleine gezielte Änderung gegenüber der Umstrukturierung eines funktionierenden Projekts.

2. Zeit explizit modellieren

Definiere Szenendauern und Schnitt-Frames als benannte Konstanten oder Daten. Leite Animationszustände von useCurrentFrame() und useVideoConfig() ab.

const spriteIndex =
  Math.floor((frame * spriteFps) / compositionFps) % sequence.length;

Verwende interpolate() mit geklammerten Bereichen für kontinuierliche Bewegung. Verwende keine CSS-Übergänge, CSS-Keyframes, Wanduhr-Timer, Zufallswerte oder veränderlichen Wiedergabezustand für gerenderte Animationen.

3. Quellgeometrie von Präsentation trennen

Halte Zuschneiderechtecke, Animationsreihenfolge, Inhaltsgrenzen und visuelle Anker in typisierten Daten. Lass Render-Komponenten diese Daten konsumieren, anstatt Koordinaten in CSS oder Labels zu duplizieren.

Verwende dasselbe berechnete aktuelle Frame-Objekt für:

• den sichtbaren Ausschnitt;
• Frame-Zähler und hervorgehobene Zellen;
• JSON/Koordinaten-Panels;
• Untertitel, die den aktiven Frame beschreiben.

Dies verhindert eine korrekte Animation mit veralteter erklärender Benutzeroberfläche.

Wenn du einen Filmstreifen zeigst, erzeuge ein Fenster, das den exakten aktuellen Frame enthält. Hebe nicht den nächstgelegenen abgetasteten Frame hervor, während du einen anderen Ausschnitt renderst.

4. Hauptmotiv stabilisieren

Verwende ein festes Viewport für die Animation. Schneide zuerst das exakte Quellrechteck zu und verschiebe dann diesen zugeschnittenen Frame innerhalb des Viewports mithilfe eines per-Frame visuellen Ankers oder einer sichtbaren Inhaltsbox. Zentriere nicht nur das rohe Zellenrechteck, wenn sich die Grafik innerhalb der Zellen verschiebt.

Überprüfe bei Spritesheets jeden Rand-Frame und jeden Frame, der lange Extremitäten wie Schwänze, Haare, Schatten oder Bewegungsunschärfen enthält. Folge dem detaillierten Workflow in references/sprite-sheets.md.

5. Szenenkontinuität aufbauen

Gib der Komposition einen persistenten undurchsichtigen Basishintergrund außerhalb aller Szenensequenzen. Szenenhintergründe können ebenfalls undurchsichtig bleiben. Wende Übergänge als frame-gesteuerte Overlays oberhalb der Szenen und unterhalb jeglicher finaler Vignette oder Sicherheits-Overlay an.

Halte dekorative Effekte der Erklärung untergeordnet. Ein Übergang sollte einen Schnitt verbergen, keine Transparenz, Schachbrettmuster, benachbarte Sprite-Zellen oder nicht gemountete Inhalte offenlegen.

Wenn die Anfrage ein Cover oder eine Endcard umfasst, implementiere sie als erstklassige Szenen und rendere bei Bedarf eine eigenständige Cover-Komposition. Folge references/covers-and-endings.md. Ersetze einen Cover-Generierungs-Prompt nicht durch eine tatsächliche Remotion-Cover, es sei denn, der Benutzer hat nur nach einem Prompt gefragt.

6. Audio hinzufügen und mischen

Referenziere lokales Audio mit staticFile(). Decke die gesamte Komposition ab, indem du einen ausreichend langen Track wählst, absichtlich loopen oder absichtlich trimmen. Überprüfe bei einem vom Benutzer bereitgestellten langen Track dessen Dauer, Stille und Lautstärke und platziere dann nur den erforderlichen Ausschnitt in public/audio/. Wähle eine musikalisch natürliche Grenze, anstatt dich nur auf die Lautstärke zu verlassen.

Verwende einen frame-basierten Volume-Callback für Ein- und Ausblendungen und halte Hintergrundmusik leise genug für Erzählung oder Anleitungstext. Vermeide es, Einblendungen in den Ausschnitt einzubrennen, wenn Remotion bereits die Lautstärkehülle besitzt.

Erkläre Audio nicht allein aufgrund der Studio-Vorschau als vollständig. Überprüfe, ob die exportierte Datei einen messbar nicht stillen Audiostream enthält.

7. In zunehmendem Umfang validieren

Führe Prüfungen in dieser Reihenfolge durch:

1. Typ-Check des Projekts.
2. Rendere Standbilder am Cover, auf beiden Seiten jedes Schnitts, repräsentative Sprite-Frames, am Eintritt der Endcard und am finalen Standbild.
3. Rendere die vollständige Komposition.
4. Wenn Chrome RAM oder temporären Speicher erschöpft, reduziere die Render-Konkurrenz, bevor du Anwendungscode änderst.
5. Überprüfe den finalen Container auf Dauer, Videostream und erforderlichen Audiostream.

Verwende den gebündelten Verifizierer nach dem Export:

node /path/to/remotion-production/scripts/verify-render.mjs out/video.mp4 --expect-duration 35 --expect-width 1920 --expect-height 1080 --expect-video-codec h264 --require-audible-audio

Behandle eine teilweise oder fehlgeschlagene Ausgabe als ungültig, selbst wenn eine Datei am Zielort existiert.

8. Publishing-Kopie bei Bedarf vorbereiten

Basiere Cover-Prompts und Videobeschreibungen auf der finalen Komposition, dem verifizierten Motiv, den Lehrpunkten, dem visuellen Stil, der Dauer und der Zielgruppe. Gib diese Leistungen direkt im Benutzergespräch aus. Erstelle keine Prompt- oder Beschreibungsdateien, rufe kein Bildgenerierungswerkzeug auf und generiere kein Cover-Bild, es sei denn, der Benutzer fordert diese Aktionen explizit an.

Folge references/publishing-copy.md. Gestalte das Ergebnis kopierbereit, prägnant für die Zielplattform und in der Sprache des Benutzers verfasst.

Fertigstellungsstandard

Melde die Fertigstellung erst, wenn:

• Animation deterministisch von Frames abgeleitet wird;
• Motivgrenzen vollständig und visuell stabil über den Loop bleiben;
• erklärende Koordinaten mit dem gerenderten Sprite-Frame aktualisiert werden;
• Szenenschnitte niemals transparente oder schachbrettartige Artefakte offenlegen;
• Medien-Assets ohne ausgelaufene Render-Handles geladen werden;
• ein vollständiger Render bei stabiler Konkurrenz erfolgreich ist;
• die exportierte Datei die erwartete Dauer, erforderliche Audio-/Videostreams und bei Musikwunsch nicht stilles Audio aufweist;
• angeforderte Cover- und Endcard-Szenen visuell im vollständigen Zustand, an Übergangsgrenzen und im finalen Frame überprüft wurden;
• eigenständige Cover-Grafik einen eigenen undurchsichtigen Hintergrund enthält und der Video-Hierarchie entspricht;
• angeforderte Cover-Prompts und Publishing-Beschreibungen das finale Video genau widerspiegeln und direkt im Gespräch geliefert werden.

Melde den Ausgabepfad, den Render-Befehl, das Verifikationsergebnis und jede absichtlich reduzierte Konkurrenz.