Was macht remotion-ui?
Agentenfertigkeit von riaz37/remotion-ui
Übersicht
Diese Fertigkeit ermöglicht es KI-Agenten, das Remotion-Framework zu nutzen, um Videos und Animationen programmatisch zu erstellen. Sie ermöglicht die Definition komplexer Szenen, das Rendern von Kompositionen und die Steuerung des gesamten Videoproduktions-Workflows über natürlichsprachliche Befehle.
Hauptfunktionen
- Szenendefinition: Erstellen Sie React-basierte Szenen mit Layout, Text, Bildern und Animationen.
- Komposition: Konfigurieren Sie Videokompositionen mit benutzerdefinierten Abmessungen, Bildraten und Dauer.
- Rendering: Rendern Sie Videos lokal oder in der Cloud mit FFmpeg.
- Asset-Verwaltung: Importieren und verwalten Sie Bilder, Schriftarten und Audiodateien.
Unterstützte Plattformen
Diese Fertigkeit kann mit den folgenden KI-Agenten verwendet werden:
- Claude Code
- Cursor
- Codex
- Andere kompatible KI-Agenten
Verwendung
- Projekt initialisieren: Richten Sie ein Remotion-Projekt mit
npx create-videoein. - Szenen definieren: Schreiben Sie React-Komponenten für jede Szene.
- Kompositionen konfigurieren: Verwenden Sie die
Composition-API zur Definition von Metadaten. - Video rendern: Führen Sie
npx remotion renderaus, um die finale Videodatei zu generieren.
Beispiel
import { Composition } from 'remotion';
import { MyScene } from './MyScene';
export const MyVideo: React.FC = () => {
return (
<Composition
id="MyScene"
component={MyScene}
durationInFrames={120}
fps={30}
width={1920}
height={1080}
/>
);
};
Konfiguration
| Variable | Beschreibung | Standard |
|---|---|---|
REACT_APP_REMOTION_PUBLIC_DIR | Öffentliches Verzeichnis für Assets | public |
REMOTION_CONCURRENCY | Anzahl gleichzeitiger Render-Jobs | Anzahl der CPU-Kerne |
Fehlerbehebung
- Rendering schlägt fehl: Stellen Sie sicher, dass FFmpeg installiert ist.
- Falsche Abmessungen: Überprüfen Sie die Kompositionskonfiguration.
- Asset nicht gefunden: Überprüfen Sie den Dateipfad relativ zum Projektstamm.
Lizenz
MIT