使用時機
當你處理 Remotion 程式碼時，請使用此技能以獲取領域特定知識。
新專案設定
在一個空的資料夾或沒有現有 Remotion 專案的工作區中，使用以下指令建立一個：
npx create-video@latest --yes --blank --no-tailwind my-video
將 my-video 替換為合適的專案名稱。
設計影片
使用 useCurrentFrame() 和 interpolate() 來動畫化屬性。使用 Easing 自訂動畫的時間曲線。
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 }}>Hello World!</div>;
};
禁止使用 CSS 轉場或動畫——它們無法正確渲染。
禁止使用 Tailwind 動畫類別名稱——它們無法正確渲染。
將素材放置在專案根目錄的 public/ 資料夾中。
使用 staticFile() 來引用 public/ 資料夾中的檔案。
使用 <Img> 元件新增圖片：
import { Img, staticFile } from "remotion";
export const MyComposition = () => {
return <Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />;
};
使用 @remotion/media 中的 <Video> 元件新增影片：
import { Video } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />;
};
使用 @remotion/media 中的 <Audio> 元件新增音訊：
import { Audio } from "@remotion/media";
import { staticFile } from "remotion";
export const MyComposition = () => {
return <Audio src={staticFile("audio.mp3")} />;
};
素材也可以作為遠端 URL 引用：
import { Video } from "@remotion/media";
export const MyComposition = () => {
return <Video src="https://remotion.media/video.mp4" />
};
若要延遲內容顯示，請將其包裝在 <Sequence> 中並使用 from。
若要限制元素的持續時間，請使用 <Sequence> 的 durationInFrames。
<Sequence> 預設為絕對填滿。若為行內內容，請使用 layout="none"。
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 }}>Title</div>;
};
export const Subtitle = () => {
return <div>Subtitle</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>
);
}
影片的寬度、高度、fps 和持續時間在 src/Root.tsx 中定義：
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}
/>
);
};
中繼資料也可以動態計算：
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}
/>
);
};
啟動預覽
啟動 Remotion Studio 以預覽影片：
npx remotion studio
可選：單幀渲染檢查
你可以使用 CLI 渲染單一幀來快速檢查版面、顏色或時間點。
對於簡單的編輯、純重構，或當你已經從 Studio 或先前的渲染中獲得足夠信心時，可以跳過此步驟。
npx remotion still [composition-id] --scale=0.25 --frame=30
在 30 fps 下，--frame=30 代表一秒鐘的位置（--frame 是從零開始的）。
字幕
當處理字幕時，請載入 ./rules/subtitles.md 檔案以獲取更多資訊。
使用 FFmpeg
對於某些影片操作，例如剪輯影片或偵測靜音，應使用 FFmpeg。請載入 ./rules/ffmpeg.md 檔案以獲取更多資訊。
靜音偵測
當需要偵測並剪輯影片或音訊檔案中的靜音片段時，請載入 ./rules/silence-detection.md 檔案。
音訊視覺化
當需要視覺化音訊（頻譜條、波形、低音反應效果）時，請載入 ./rules/audio-visualization.md 檔案以獲取更多資訊。
音效
當需要使用音效時，請載入 ./rules/sfx.md 檔案以獲取更多資訊。
3D 內容
參閱 rules/3d.md 了解如何在 Remotion 中使用 Three.js 和 React Three Fiber 處理 3D 內容。
進階音訊
參閱 rules/audio.md 了解進階音訊功能，如剪輯、音量、速度、音高。
動態持續時間、尺寸與資料
參閱 rules/calculate-metadata.md 了解如何動態設定組合的持續時間、尺寸與屬性。
進階組合
參閱 rules/compositions.md 了解如何定義靜態畫面、資料夾、預設屬性以及如何巢狀組合。
Google Fonts
是在 Remotion 中載入字型的推薦方式。參閱 rules/google-fonts.md 了解如何載入 Google Fonts。
本地字型
參閱 rules/local-fonts.md 了解如何載入本地字型。
取得音訊長度
參閱 rules/get-audio-duration.md 了解如何使用 Mediabunny 取得音訊檔案的長度（以秒為單位）。
取得影片尺寸
參閱 rules/get-video-dimensions.md 了解如何使用 Mediabunny 取得影片檔案的寬度和高度。
取得影片長度
參閱 rules/get-video-duration.md 了解如何使用 Mediabunny 取得影片檔案的長度（以秒為單位）。
GIF
參閱 rules/gifs.md 了解如何顯示與 Remotion 時間軸同步的 GIF。
進階圖片
參閱 rules/images.md 了解圖片的尺寸調整與定位、動態圖片路徑，以及取得圖片尺寸。
光洩漏
參閱 rules/light-leaks.md 了解如何透過 @remotion/light-leaks 使用光洩漏疊加效果。
Lottie 動畫
參閱 rules/lottie.md 了解如何在 Remotion 中嵌入 Lottie 動畫。
Canvas 中的 HTML
參閱 rules/html-in-canvas.md 了解如果你需要將 HTML 渲染到 <canvas> 中，以透過 <HtmlInCanvas> 套用 2D 或 WebGL 效果。
測量 DOM 節點
參閱 rules/measuring-dom-nodes.md 了解如何在 Remotion 中測量 DOM 元素的尺寸。
測量文字
參閱 rules/measuring-text.md 了解如何測量文字尺寸、將文字適配至容器，以及檢查溢出。
進階排序
參閱 rules/sequencing.md 了解更多排序模式——延遲、剪輯、限制項目持續時間。
TailwindCSS
參閱 rules/tailwind.md 了解如何在 Remotion 中使用 TailwindCSS。
文字動畫
參閱 rules/text-animations.md 了解排版與文字動畫模式。
進階時間控制
參閱 rules/timing.md 了解使用 interpolate 搭配貝茲曲線緩動以及彈簧的進階時間控制。
轉場
參閱 rules/transitions.md 了解場景轉場模式。
透明背景影片
參閱 rules/transparent-videos.md 了解如何渲染具有透明背景的影片。
剪輯
參閱 rules/trimming.md 了解剪輯模式——剪掉動畫的開頭或結尾。
進階影片
參閱 rules/videos.md 了解關於嵌入影片的進階知識——剪輯、音量、速度、循環、音高。
參數化影片
參閱 rules/parameters.md 了解如何透過新增 Zod 架構使組合可參數化。
地圖
對於帶有簡短飛越效果的簡單地圖，請考慮使用靜態地圖圖片。
對於具有動畫路線或飛越效果的複雜地圖，請載入地圖規則：rules/maplibre.md
旁白
參閱 rules/voiceover.md 了解如何使用 ElevenLabs TTS 為 Remotion 組合新增 AI 生成的旁白。