remotion-lecture-video-creator

Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator mengubah silabus, modul pertemuan, atau bahan ajar tertulis menjadi video pembelajaran animasi terprogram (Programmatic Educational Video) menggunakan framework Remotion (React + Web Standards).

Alih-alih mengedit video secara manual melalui perangkat lunak proprietary yang berat, pendidik dapat menghasilkan dan memodifikasi video kuliah berkualitas tinggi langsung melalui kode (Video as Code), beranimasi mulus per frame, version-controlled, dan siap render massal (batch rendering).

---

🌟 Fitur Utama Video Ajar Remotion

1. Video as Code (React & TypeScript):

   • Setiap adegan kuliah (Scene) adalah komponen React mandiri.
   • Menggunakan hook resmi Remotion (useCurrentFrame, useVideoConfig, interpolate, spring) untuk animasi fisika yang mulus dan tanpa patah-patah.

2. Dua Format Rasio Video Standar:

   • Horizontal 16:9 (1920x1080 @ 30fps): Format standar video kuliah LMS, YouTube, proyektor, dan Smart TV kelas.
   • Vertikal 9:16 (1080x1920 @ 30fps): Format Micro-learning / edukasi cepat untuk TikTok, Instagram Reels, dan YouTube Shorts.

3. Struktur Pedagogis 4-Babak (Standard 4-Act Lesson Arc):

   • Act 1: Hook & Curiosity Spark (Frame 0–900 / 0–30 detik): Judul sesi, identitas dosen, CPMK/tujuan belajar, dan pertanyaan pemantik masalah nyata.
   • Act 2: Core Concept Breakdown (Frame 900–2700 / 30–90 detik): Kartu konsep beranimasi, diagram blok alir bertahap, dan tipografi kinetik kontras tinggi.
   • Act 3: Case Study & Live Visual Demo (Frame 2700–4500 / 90–150 detik): Contoh kode dengan syntax highlighting, simulasi langkah-demi-langkah, atau animasi rumus matematis.
   • Act 4: Reflection & Challenge Call-to-Action (Frame 4500–5400 / 150–180 detik): Rangkuman 3 poin kunci, kuis interaktif dengan timer berdetak, dan instruksi penugasan di LMS.

4. Kaya Komponen Visual Edukatif Bawaan:

   • Kinetic Typography: Judul dan poin materi muncul menggunakan interpolasi pegas (spring physics).
   • Progress Time Bar: Garis progres waktu animasi di bagian bawah video yang memberi tahu durasi materi secara visual.
   • Animated Concept Cards: Kartu definisi bergaya modern dengan bayangan halus dan aksen warna penekanan (accent highlight).
   • Audio & Voiceover Synchronization: Komponen <Audio /> dan penyesuaian durasi frame otomatis terhadap panjang audio narasi.

5. Pratinjau Instan & Render MP4 Berkecepatan Tinggi:

   • Mode Preview Interaktif: Buka Remotion Studio di browser via npx remotion preview. Pengajar bisa menggeser timeline frame-by-frame dan menguji animasi secara real-time.
   • Render Headless CLI: Render video utuh ke berkas .mp4 Full HD melalui perintah npx remotion render.

---

📁 Struktur Berkas Proyek Remotion Video Ajar

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Remotion entry point
    ├── Root.tsx                  # Pendaftaran Composition (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Act 1: Hook & Capaian Belajar (CPMK)
    │   ├── 02_ConceptScene.tsx   # Act 2: Inti Materi & Diagram
    │   ├── 03_DemoScene.tsx      # Act 3: Simulasi / Studi Kasus
    │   └── 04_OutroScene.tsx     # Act 4: Rangkuman & Kuis Penutup
    └── components/
        ├── ProgressBar.tsx       # Indikator durasi waktu di layar
        ├── ConceptCard.tsx       # Kartu definisi kinetik
        └── LessonTitle.tsx       # Judul animasi bertingkat

---

📐 Template Komponen Dasar Remotion Video Ajar

1. src/Root.tsx

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

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* 16:9 Landscape Full HD Video - Durasi 3 Menit (5400 frame @ 30fps) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "Rekayasa Perangkat Lunak",
          sessionTitle: "Sesi 03: Prinsip Enkapsulasi & Modularitas",
          instructorName: "Tim Dosen 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();

  // Animasi masuk judul menggunakan fisika spring
  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' }}>
          Outcome-Based Education • Capaian Pembelajaran CPMK-2
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 Perintah Pratinjau & Rendering

1. Jalankan Remotion Studio (Pratinjau di Browser):

   npx remotion preview
   

2. Render Video ke Berkas MP4:

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