快速上手 - RemotionLab

前置準備

開始之前，請確認你的電腦已安裝：

Node.js 18 以上版本
npm、yarn 或 pnpm（任一即可）
程式碼編輯器（推薦 VS Code）

建立專案

用一行指令建立新的 Remotion 專案：

npx create-video@latest my-first-video
cd my-first-video
npm start

這會啟動 Remotion Studio，你可以在瀏覽器中即時預覽影片。

核心概念：影片 = 時間的函數

在 Remotion 的世界裡，有幾個關鍵概念：

Frame（幀） — 影片的最小單位。一支 30fps 的影片，每秒有 30 幀。
Composition — 定義一支影片的容器，指定長度、fps 和解析度。
元件 — 你的影片內容就是 React 元件，接收「目前幀數」來決定要渲染什麼。

定義 Composition

打開 src/Root.tsx，定義你的第一個 Composition：

import { Composition } from "remotion";
import { MyScene } from "./MyScene";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyScene"
      component={MyScene}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

這段程式碼告訴 Remotion：「我有一支叫 MyScene 的影片，長 90 幀（也就是 3 秒），每秒 30 幀，解析度 1920×1080。」

建立你的第一個場景

新增 src/MyScene.tsx：

import { AbsoluteFill, useCurrentFrame } from "remotion";
 
export const MyScene: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = Math.min(1, frame / 30);
 
  return (
    <AbsoluteFill
      style={{
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#0b1215",
      }}
    >
      <h1 style={{ color: "white", fontSize: 80, opacity }}>
        哈囉，Remotion！
      </h1>
    </AbsoluteFill>
  );
};

useCurrentFrame() 回傳目前的幀數。我們用它來計算透明度：前 30 幀（1 秒）內，文字從完全透明漸變為完全不透明。

預覽與渲染

在 Remotion Studio 中預覽你的影片，確認效果滿意後，用以下指令渲染成 MP4：

npx remotion render MyScene out/video.mp4

恭喜！你已經建立並渲染了你的第一支 Remotion 影片。接下來可以前往動畫入門，學習更豐富的動畫技巧。