Verwendung
Verwende dieses Skill, wenn du mit Remotion-Code arbeitest, um domänenspezifisches Wissen zu erhalten.
Einrichtung eines neuen Projekts
Wenn du dich in einem leeren Ordner oder Workspace ohne bestehendes Remotion-Projekt befindest, erstelle eines mit:
npx create-video@latest --yes --blank --no-tailwind my-video
Ersetze my-video durch einen geeigneten Projektnamen.
Entwerfen eines Videos
Animiere Eigenschaften mit useCurrentFrame() und interpolate(). Verwende Easing, um das Timing der Animation anzupassen.
import { useCurrentFrame, Easing } from "remotion";
export const FadeIn = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Hallo Welt!</div>;
};
CSS-Übergänge oder -Animationen sind VERBOTEN – sie werden nicht korrekt gerendert. Tailwind-Animation-Klassennamen sind VERBOTEN – sie werden nicht korrekt gerendert.
Lege Assets im public/-Ordner im Projektstammverzeichnis ab.
Verwende staticFile(), um auf Dateien aus dem public/-Ordner zu verweisen.
Füge Bilder mit der <Img>-Komponente hinzu:
import { Img, staticFile } from "remotion";
export const MyComposition = () => {
return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
Füge Videos mit der <Video>-Komponente von @remotion/media hinzu:
import { Video } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};
Füge Audio mit der <Audio>-Komponente von @remotion/media hinzu:
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
Assets können auch als entfernte URLs referenziert werden:
import { Video } from "@remotion/media";
export const MyComposition = () => {
return <Video src="https://remotion.media/video.mp4" />
};
Um Inhalte zu verzögern, umschließe sie mit <Sequence> und verwende from.
Um die Dauer eines Elements zu begrenzen, verwende durationInFrames von <Sequence>.
Standardmäßig ist <Sequence> ein absolutes Füll-Element. Verwende layout="none" für Inline-Inhalte.
import { Sequence } from "remotion";
export const Title = () => {
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
extrapolateRight: "clamp",
extrapolateLeft: "clamp",
easing: Easing.bezier(0.16, 1, 0.3, 1),
});
return <div style={{ opacity }}>Titel</div>;
};
export const Subtitle = () => {
return <div>Untertitel</div>;
};
const Main = () => {
const {fps} = useVideoConfig();
return (
<AbsoluteFill>
<Sequence>
<Background />
</Sequence>
<Sequence from={1 * fps} durationInFrames={2 * fps} layout="none">
<Title />
</Sequence>
<Sequence from={2 * fps} durationInFrames={2 * fps} layout="none">
<Subtitle />
</Sequence>
</AbsoluteFill>
);
}
Breite, Höhe, fps und Dauer eines Videos werden in src/Root.tsx definiert:
import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";
export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
durationInFrames={100}
fps={30}
width={1080}
height={1080}
/>
);
};
Metadaten können auch dynamisch berechnet werden:
import { Composition, CalculateMetadataFunction } from "remotion";
import { MyComposition, MyCompositionProps } from "./MyComposition";
const calculateMetadata: CalculateMetadataFunction<
MyCompositionProps
> = async ({ props, abortSignal }) => {
const data = await fetch(`https://api.example.com/video/${props.videoId}`, {
signal: abortSignal,
}).then((res) => res.json());
return {
durationInFrames: Math.ceil(data.duration * 30),
props: {
...props,
videoUrl: data.url,
},
width: 1080,
height: 1080,
};
};
export const RemotionRoot = () => {
return (
<Composition
id="MyComposition"
component={MyComposition}
fps={30}
width={1080}
height={1080}
defaultProps={{ videoId: "abc123" }}
calculateMetadata={calculateMetadata}
/>
);
};
Vorschau starten
Starte das Remotion Studio, um eine Vorschau eines Videos anzuzeigen:
npx remotion studio
Optional: Einzelbild-Renderprüfung
Du kannst ein einzelnes Bild mit der CLI rendern, um Layout, Farben oder Timing zu überprüfen. Überspringe dies bei trivialen Änderungen, reinen Refactorings oder wenn du bereits genügend Vertrauen aus Studio oder vorherigen Renderings hast.
npx remotion still [composition-id] --scale=0.25 --frame=30
Bei 30 fps ist --frame=30 der Ein-Sekunden-Markierungspunkt (--frame ist nullbasiert).
Untertitel
Wenn du mit Untertiteln oder Übersetzungen arbeitest, lade die Datei ./rules/subtitles.md für weitere Informationen.
Verwendung von FFmpeg
Für einige Videooperationen wie das Trimmen von Videos oder die Erkennung von Stille sollte FFmpeg verwendet werden. Lade die Datei ./rules/ffmpeg.md für weitere Informationen.
Stille-Erkennung
Wenn stille Segmente in Video- oder Audiodateien erkannt und getrimmt werden müssen, lade die Datei ./rules/silence-detection.md.
Audio-Visualisierung
Wenn Audio visualisiert werden muss (Spektrumbalken, Wellenformen, bassreaktive Effekte), lade die Datei ./rules/audio-visualization.md für weitere Informationen.
Soundeffekte
Wenn Soundeffekte verwendet werden müssen, lade die Datei ./rules/sfx.md für weitere Informationen.
3D-Inhalte
Siehe rules/3d.md für 3D-Inhalte in Remotion mit Three.js und React Three Fiber.
Fortgeschrittenes Audio
Siehe rules/audio.md für fortgeschrittene Audiofunktionen wie Trimmen, Lautstärke, Geschwindigkeit, Tonhöhe.
Dynamische Dauer, Abmessungen und Daten
Siehe rules/calculate-metadata.md für die dynamische Festlegung von Zusammensetzungsdauer, -abmessungen und -eigenschaften.
Fortgeschrittene Zusammensetzungen
Siehe rules/compositions.md für die Definition von Standbildern, Ordnern, Standardeigenschaften und für die Verschachtelung von Zusammensetzungen.
Google Fonts
Dies ist die empfohlene Methode zum Laden von Schriftarten in Remotion. Siehe rules/google-fonts.md für das Laden von Google Fonts.
Lokale Schriftarten
Siehe rules/local-fonts.md für das Laden lokaler Schriftarten.
Audiodauer ermitteln
Siehe rules/get-audio-duration.md für die Ermittlung der Dauer einer Audiodatei in Sekunden mit Mediabunny.
Videoabmessungen ermitteln
Siehe rules/get-video-dimensions.md für die Ermittlung der Breite und Höhe einer Videodatei mit Mediabunny.
Videodauer ermitteln
Siehe rules/get-video-duration.md für die Ermittlung der Dauer einer Videodatei in Sekunden mit Mediabunny.
GIFs
Siehe rules/gifs.md für die Anzeige von GIFs, die mit der Zeitleiste von Remotion synchronisiert werden.
Fortgeschrittene Bilder
Siehe rules/images.md für die Größenanpassung und Positionierung von Bildern, dynamische Bildpfade und das Ermitteln von Bildabmessungen.
Lichtlecks
Siehe rules/light-leaks.md für Lichtleck-Überlagerungseffekte mit @remotion/light-leaks.
Lottie-Animationen
Siehe rules/lottie.md zum Einbetten von Lottie-Animationen in Remotion.
HTML in Canvas
Siehe rules/html-in-canvas.md, wenn du HTML in ein <canvas> rendern musst, um 2D- oder WebGL-Effekte über <HtmlInCanvas> anzuwenden.
Messen von DOM-Knoten
Siehe rules/measuring-dom-nodes.md zum Messen von DOM-Elementabmessungen in Remotion.
Messen von Text
Siehe rules/measuring-text.md zum Messen von Textabmessungen, Anpassen von Text an Container und Überprüfen von Überläufen.
Fortgeschrittene Sequenzierung
Siehe rules/sequencing.md für weitere Sequenzierungsmuster – Verzögerung, Trimmen, Begrenzung der Dauer von Elementen.
TailwindCSS
Siehe rules/tailwind.md zur Verwendung von TailwindCSS in Remotion.
Textanimationen
Siehe rules/text-animations.md für Typografie- und Textanimationsmuster.
Fortgeschrittenes Timing
Siehe rules/timing.md für fortgeschrittenes Timing mit interpolate und Bézier-Easing sowie Federn.
Übergänge
Siehe rules/transitions.md für Szenenübergangsmuster.
Transparente Videos
Siehe rules/transparent-videos.md zum Rendern eines Videos mit Transparenz.
Trimmen
Siehe rules/trimming.md für Trimm-Muster – Schneiden des Anfangs oder Endes von Animationen.
Fortgeschrittene Videos
Siehe rules/videos.md für fortgeschrittenes Wissen zum Einbetten von Videos – Trimmen, Lautstärke, Geschwindigkeit, Schleifen, Tonhöhe.
Parametrisierte Videos
Siehe rules/parameters.md zum Parametrisieren einer Zusammensetzung durch Hinzufügen eines Zod-Schemas.
Karten
Für einfache Karten mit kurzen Überflügen solltest du statische Kartenbilder in Betracht ziehen. Für komplexe Karten mit animierten Routen oder Überflügen lade die Kartenregel: rules/maplibre.md
Voiceover
Siehe rules/voiceover.md zum Hinzufügen von KI-generiertem Voiceover zu Remotion-Zusammensetzungen mit ElevenLabs TTS.