remotion-lecture-video-creator

Remotion 講座影片製作器 🎬

remotion-lecture-video-creator 將教學大綱、模組或書面教材轉化為使用 Remotion 框架（React + Web 標準）製作的程式化動畫教學影片。

不再需要透過笨重的專有軟體手動編輯影片，教育者可以直接透過程式碼（Video as Code）生成與修改高品質的講座影片，每一幀動畫流暢、版本可控，並支援批次渲染。

---

🌟 Remotion 教學影片的主要特色

1. 影片即程式碼 (React & TypeScript)：

   • 每個講座場景 (Scene) 都是一個獨立的 React 元件。
   • 使用 Remotion 官方 hooks (useCurrentFrame, useVideoConfig, interpolate, spring) 來實現流暢、無頓挫的擬真動畫。

2. 兩種標準影片比例格式：

   • 橫向 16:9 (1920x1080 @ 30fps)：適用於 LMS、YouTube、投影機和教室智慧電視的標準講座影片格式。
   • 縱向 9:16 (1080x1920 @ 30fps)：適用於 TikTok、Instagram Reels 和 YouTube Shorts 的微學習/快速教育格式。

3. 標準四幕教學結構：

   • 第一幕：鉤子與好奇心觸發 (影格 0–900 / 0–30 秒)：顯示課程標題、講師資訊、學習目標與引發興趣的真實問題。
   • 第二幕：核心概念講解 (影格 900–2700 / 30–90 秒)：呈現動畫概念卡片、逐步流程圖和高對比度的動態字體排版。
   • 第三幕：案例研究與即時視覺演示 (影格 2700–4500 / 90–150 秒)：展示帶有語法高亮的程式碼範例、逐步模擬或數學公式動畫。
   • 第四幕：反思與挑戰行動呼籲 (影格 4500–5400 / 150–180 秒)：總結三個關鍵點、包含倒數計時器的互動式測驗，以及 LMS 上的作業說明。

4. 內建豐富的教育視覺元件：

   • 動態字體排版：標題和重點使用彈簧物理插值動畫出現。
   • 進度時間條：影片底部的動畫進度條，直觀顯示材料持續時間。
   • 動畫概念卡片：具有現代陰影和強調色高亮的定義卡片。
   • 音訊與旁白同步：使用 <Audio /> 元件並根據旁白音訊長度自動調整影格持續時間。

5. 即時預覽與高速 MP4 渲染：

   • 互動式預覽模式：透過 npx remotion preview 在瀏覽器中開啟 Remotion Studio。教師可以逐影格拖動時間軸並即時測試動畫。
   • 無頭 CLI 渲染：透過指令 npx remotion render 將完整影片渲染為全高清 .mp4 檔案。

---

📁 Remotion 教學影片專案檔案結構

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Remotion 入口點
    ├── Root.tsx                  # 註冊 Composition (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # 第一幕：鉤子與學習目標
    │   ├── 02_ConceptScene.tsx   # 第二幕：核心材料與圖表
    │   ├── 03_DemoScene.tsx      # 第三幕：模擬/案例研究
    │   └── 04_OutroScene.tsx     # 第四幕：總結與結尾測驗
    └── components/
        ├── ProgressBar.tsx       # 螢幕上的時間持續時間指示器
        ├── ConceptCard.tsx       # 動態定義卡片
        └── LessonTitle.tsx       # 分層動畫標題

---

📐 Remotion 教學影片基本元件模板

1. src/Root.tsx

import React from 'react';
import { Composition } from 'remotion';
import { LectureComposition } from './LectureComposition';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* 16:9 橫向全高清影片 - 持續時間 3 分鐘 (5400 影格 @ 30fps) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "軟體工程",
          sessionTitle: "Session 03: 封裝與模組化原則",
          instructorName: "Lensetek 教學團隊",
        }}
      />
    </>
  );
};

2. src/scenes/01_IntroScene.tsx

import React from 'react';
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

export const IntroScene: React.FC<{ courseTitle: string; sessionTitle: string }> = ({
  courseTitle,
  sessionTitle,
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 使用彈簧物理製作標題入場動畫
  const titleProgress = spring({
    frame,
    fps,
    config: { damping: 12 },
  });

  const titleScale = interpolate(titleProgress, [0, 1], [0.85, 1]);
  const titleOpacity = interpolate(titleProgress, [0, 1], [0, 1]);

  return (
    <AbsoluteFill
      style={{
        backgroundColor: '#0f172a', // Slate 900
        justifyContent: 'center',
        alignItems: 'center',
        color: '#ffffff',
        fontFamily: 'Segoe UI, system-ui, sans-serif',
        padding: 80,
      }}
    >
      <div
        style={{
          transform: `scale(${titleScale})`,
          opacity: titleOpacity,
          textAlign: 'center',
        }}
      >
        <span
          style={{
            backgroundColor: '#2563eb',
            color: '#ffffff',
            padding: '8px 20px',
            borderRadius: 99,
            fontSize: 24,
            fontWeight: 700,
            letterSpacing: 2,
            textTransform: 'uppercase',
          }}
        >
          {courseTitle}
        </span>
        <h1
          style={{
            fontSize: 68,
            fontWeight: 900,
            marginTop: 32,
            marginBottom: 16,
            lineHeight: 1.2,
          }}
        >
          {sessionTitle}
        </h1>
        <p style={{ fontSize: 28, color: '#94a3b8' }}>
          成果導向教育 • CPMK-2 學習成果
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 預覽與渲染指令

1. 啟動 Remotion Studio (在瀏覽器中預覽)：

   npx remotion preview
   

2. 將影片渲染為 MP4 檔案：

   npx remotion render src/index.ts LectureVideo-16x9 out/video-kuliah-sesi-03.mp4