Wann verwenden
Verwenden Sie diese Skills immer dann, wenn Sie mit Remotion-Code arbeiten, um domänenspezifisches Wissen zu erhalten.
Neues Projekt einrichten
In einem leeren Ordner oder Workspace ohne bestehendes Remotion-Projekt richten Sie eines ein mit:
npx create-video@latest --yes --blank --no-tailwind my-video
Ersetzen Sie my-video durch einen geeigneten Projektnamen.
Vorschau starten
Starten Sie das Remotion Studio, um eine Vorschau des Videos zu erhalten:
npx remotion studio
Optional: Einzelbild-Render-Prüfung
Sie können ein einzelnes Bild mit der CLI rendern, um Layout, Farben oder Timing zu überprüfen. Überspringen Sie dies bei trivialen Änderungen, reinen Refactorings oder wenn Sie bereits genügend Vertrauen aus dem Studio oder früheren Renderings haben.
npx remotion still [composition-id] --scale=0.25 --frame=30
Bei 30 fps ist --frame=30 die Ein-Sekunden-Marke (--frame ist nullbasiert).
Untertitel
Wenn Sie mit Untertiteln arbeiten, laden Sie die Datei ./rules/subtitles.md für weitere Informationen.
FFmpeg verwenden
Für einige Videooperationen wie das Trimmen von Videos oder die Erkennung von Stille sollte FFmpeg verwendet werden. Laden Sie die Datei ./rules/ffmpeg.md für weitere Informationen.
Stilleerkennung
Wenn Sie stille Segmente aus Video- oder Audiodateien erkennen und trimmen müssen, laden Sie die Datei ./rules/silence-detection.md.
Audiovisualisierung
Wenn Sie Audio visualisieren müssen (Spektrumbalken, Wellenformen, bassreaktive Effekte), laden Sie die Datei ./rules/audio-visualization.md für weitere Informationen.
Soundeffekte
Wenn Sie Soundeffekte verwenden müssen, laden Sie die Datei ./rules/sfx.md für weitere Informationen.
Wie verwenden
Lesen Sie die einzelnen Regeldateien für detaillierte Erklärungen und Codebeispiele:
- rules/3d.md – 3D-Inhalte in Remotion mit Three.js und React Three Fiber
- rules/animations.md – Grundlegende Animationsfähigkeiten für Remotion
- rules/assets.md – Importieren von Bildern, Videos, Audio und Schriftarten in Remotion
- rules/audio.md – Audio und Ton in Remotion verwenden – Importieren, Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe
- rules/calculate-metadata.md – Dynamische Einstellung von Kompositionsdauer, Abmessungen und Props
- rules/can-decode.md – Überprüfen, ob ein Video vom Browser mit Mediabunny dekodiert werden kann
- rules/charts.md – Diagramm- und Datenvisualisierungsmuster für Remotion (Balken-, Kreis-, Linien-, Aktiendiagramme)
- rules/compositions.md – Definieren von Kompositionen, Standbildern, Ordnern, Standard-Props und dynamischen Metadaten
- rules/extract-frames.md – Einzelbilder aus Videos zu bestimmten Zeitstempeln mit Mediabunny extrahieren
- rules/fonts.md – Google Fonts und lokale Schriftarten in Remotion laden
- rules/get-audio-duration.md – Dauer einer Audiodatei in Sekunden mit Mediabunny ermitteln
- rules/get-video-dimensions.md – Breite und Höhe einer Videodatei mit Mediabunny ermitteln
- rules/get-video-duration.md – Dauer einer Videodatei in Sekunden mit Mediabunny ermitteln
- rules/gifs.md – Anzeigen von GIFs synchron mit der Zeitleiste von Remotion
- rules/images.md – Einbetten von Bildern in Remotion mit der Img-Komponente
- rules/light-leaks.md – Light-Leak-Überlagerungseffekte mit @remotion/light-leaks
- rules/lottie.md – Einbetten von Lottie-Animationen in Remotion
- rules/measuring-dom-nodes.md – Messen von DOM-Elementabmessungen in Remotion
- rules/measuring-text.md – Messen von Textabmessungen, Anpassen von Text an Container und Überlaufprüfung
- rules/sequencing.md – Sequenzierungsmuster für Remotion – Verzögerung, Trimmen, Begrenzung der Dauer von Elementen
- rules/tailwind.md – Verwenden von TailwindCSS in Remotion
- rules/text-animations.md – Typografie- und Textanimationsmuster für Remotion
- rules/timing.md – Timing mit Interpolation und Bézier-Easing, Federn
- rules/transitions.md – Szenenübergangsmuster für Remotion
- rules/transparent-videos.md – Rendern von Videos mit Transparenz
- rules/trimming.md – Trimm-Muster für Remotion – Anfang oder Ende von Animationen abschneiden
- rules/videos.md – Einbetten von Videos in Remotion – Trimmen, Lautstärke, Geschwindigkeit, Schleifen, Tonhöhe
- rules/parameters.md – Ein Video parametrisierbar machen durch Hinzufügen eines Zod-Schemas
- rules/maps.md – Eine Karte mit Mapbox hinzufügen und animieren
- rules/silence-detection.md – Adaptive Stilleerkennung mit FFmpeg loudnorm und silencedetect
- rules/voiceover.md – Hinzufügen von KI-generierten Voiceovers zu Remotion-Kompositionen mit ElevenLabs TTS