Die Arbeitsweise
Remotion Markup konzentriert sich auf das Erstellen von Kompositionen: Timing aus der Bildrate der Komposition, Animation anhand des aktuellen Frames und Medienelemente, die an einer Video-Timeline teilnehmen. Die Quelle warnt ausdrücklich, dass gewöhnliche CSS-Übergänge und Animationsklassen kein Ersatz für framebasiertes Rendering sind.
Es ist zudem eine Referenzzentrale für speziellere Aufgaben, von Untertiteln und Karten bis zu Textmessung, Effekten und Audio. Der konkrete Nutzen liegt im Grundvertrag: Timing nahe am erstellten Element halten, unabhängige Bearbeitungsziele erhalten und die passende Medien- oder Effektkomponente verwenden, statt jedes Visual als beliebigen DOM-Wrapper zu behandeln.
Erwartete Ergebnisse
- Framebasiertes React-Kompositions-Markup
- Medienebenen mit explizitem Timing und Asset-Referenzen
- Eine Szene mit Vorschau sowie unterstützten Effekt- und Bearbeitungsstrukturen
Vom Briefing zur Prüfung
- 01Kompositionseinstellungen lesen
Verwende die vorhandene Bildrate für Umrechnungen von Sekunden in Frames und erhalte die vorgesehene Dauer und die Abmessungen.
- 02Zeitlich gesteuerte Ebenen erstellen
Halte unabhängig bearbeitbare Medien und Szenen auf separaten JSX-Knoten, mit dem Timing direkt an Komponenten, die es unterstützen. Die geprüfte Quelle verlangt außerdem eine Sekunde Vorab-Mounting über premountFor={fps} bei unterstützten zeitgesteuerten Komponenten, auch bei verschachtelten Elementen; prüfe die installierte API-Version, bevor du das anwendest.
- 03Bewegung und Effekte hinzufügen
Steuere Bewegung über Interpolation anhand des aktuellen Frames. Leite spezielle Effekte über die entsprechende Referenz und eine kompatible Komponente.
- 04Videoframes prüfen
Prüfe die Studio-Wiedergabe und repräsentative gerenderte Frames auf Textüberlauf, Medienbereitschaft und Timing.