Wann verwenden
Verwenden Sie diese Skills immer dann, wenn Sie mit Remotion-Code arbeiten, um domänenspezifisches Wissen zu erhalten.
Neues Projekt einrichten
Wenn Sie sich in einem leeren Ordner oder Workspace ohne bestehendes Remotion-Projekt befinden, richten Sie eines mit folgendem Befehl ein:
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 ein Video in der Vorschau anzuzeigen:
npx remotion studio
Optional: Einzelbild-Rendering prüfen
Sie können mit der CLI ein einzelnes Bild rendern, um Layout, Farben oder Timing zu überprüfen. Überspringen Sie diesen Schritt bei trivialen Änderungen, reinen Refactorings oder wenn Sie bereits ausreichend Vertrauen durch Studio oder vorherige Renderläufe 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.
Stille-Erkennung
Wenn Sie stille Segmente aus Video- oder Audiodateien erkennen und entfernen müssen, laden Sie die Datei ./rules/silence-detection.md.
Audio-Visualisierung
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.
Verwendung
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 – Verwendung von Audio und Sound in Remotion – Importieren, Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe
- rules/calculate-metadata.md – Dynamisches Festlegen von Kompositionsdauer, -abmessungen und -Eigenschaften
- rules/can-decode.md – Prü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, Standardeigenschaften und dynamischen Metadaten
- rules/extract-frames.md – Extrahieren von Einzelbildern aus Videos zu bestimmten Zeitstempeln mit Mediabunny
- rules/fonts.md – Laden von Google Fonts und lokalen Schriftarten in Remotion
- rules/get-audio-duration.md – Ermitteln der Dauer einer Audiodatei in Sekunden mit Mediabunny
- rules/get-video-dimensions.md – Ermitteln der Breite und Höhe einer Videodatei mit Mediabunny
- rules/get-video-duration.md – Ermitteln der Dauer einer Videodatei in Sekunden mit Mediabunny
- rules/gifs.md – Anzeigen von GIFs synchronisiert mit der Remotion-Zeitleiste
- 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 Prüfen auf Überlauf
- rules/sequencing.md – Sequenzierungsmuster für Remotion – Verzögerung, Trimmen, Begrenzung der Dauer von Elementen
- rules/tailwind.md – Verwendung von TailwindCSS in Remotion
- rules/text-animations.md – Typografie- und Textanimationsmuster für Remotion
- rules/timing.md – Timing mit interpolate und Bézier-Easing, Federn
- rules/transitions.md – Szenenübergangsmuster für Remotion
- rules/transparent-videos.md – Rendern eines 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, Looping, Tonhöhe
- rules/parameters.md – Ein Video parametrisierbar machen durch Hinzufügen eines Zod-Schemas
- rules/maps.md – Hinzufügen einer Karte mit Mapbox und animieren
- rules/silence-detection.md – Adaptive Stilleerkennung mit FFmpeg loudnorm und silencedetect
- rules/voiceover.md – Hinzufügen von KI-generiertem Voiceover zu Remotion-Kompositionen mit ElevenLabs TTS
Quelle: remotion-dev/skills