remotion-lecture-video-creator

Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator mentransformasikan 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 software 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