Remotion Lecture Video Creator

Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator transformiert einen Lehrplan, Sitzungsmodule oder schriftliche Unterrichtsmaterialien in programmatisch animierte Lernvideos (Programmatic Educational Video) unter Verwendung des Remotion-Frameworks (React + Webstandards).

Anstatt Videos manuell mit schwerer proprietärer Software zu bearbeiten, können Lehrende qualitativ hochwertige Vorlesungsvideos direkt durch Code erstellen und ändern (Video as Code), flüssig pro Frame animiert, versioniert und bereit für die Stapelverarbeitung (batch rendering).

---

🌟 Hauptfunktionen der Remotion-Lehrvideos

1. Video as Code (React & TypeScript):

   • Jede Vorlesungsszene (Scene) ist eine eigenständige React-Komponente.
   • Verwendet offizielle Remotion-Hooks (useCurrentFrame, useVideoConfig, interpolate, spring) für flüssige, ruckelfreie Physikanimationen.

2. Zwei standardmäßige Video-Seitenverhältnisse:

   • Horizontal 16:9 (1920x1080 bei 30fps): Standardformat für LMS-Vorlesungen, YouTube, Beamer und Smart-TVs im Klassenzimmer.
   • Vertikal 9:16 (1080x1920 bei 30fps): Format für Micro-Learning / schnelle Bildung auf TikTok, Instagram Reels und YouTube Shorts.

3. Pädagogischer 4-Akt-Strukturbogen (Standard 4-Act Lesson Arc):

   • Act 1: Hook & Curiosity Spark (Frame 0–900 / 0–30 Sekunden): Sitzungstitel, Dozentenidentität, CPMK/Lernziele und eine einleitende Frage zu einem realen Problem.
   • Act 2: Core Concept Breakdown (Frame 900–2700 / 30–90 Sekunden): Animierte Konzeptkarten, schrittweise Blockflussdiagramme und kontrastreiche kinetische Typografie.
   • Act 3: Case Study & Live Visual Demo (Frame 2700–4500 / 90–150 Sekunden): Codebeispiele mit Syntax-Highlighting, Schritt-für-Schritt-Simulationen oder Animation mathematischer Formeln.
   • Act 4: Reflection & Challenge Call-to-Action (Frame 4500–5400 / 150–180 Sekunden): Zusammenfassung von 3 Kernpunkten, interaktives Quiz mit tickendem Timer und Aufgabenanweisungen im LMS.

4. Reichhaltige integrierte Bildungs-Visualkomponenten:

   • Kinetic Typography: Titel und Aufzählungspunkte erscheinen mittels Federinterpolation (spring physics).
   • Progress Time Bar: Eine animierte Fortschrittsleiste am unteren Rand des Videos, die die Dauer des Materials visuell anzeigt.
   • Animated Concept Cards: Modern gestaltete Definitionskarten mit weichen Schatten und farblichen Akzenten (accent highlight).
   • Audio & Voiceover Synchronization: Komponente <Audio /> und automatische Anpassung der Framedauer an die Länge der Audio-Narration.

5. Sofortige Vorschau & schnelles MP4-Rendering:

   • Interaktiver Vorschaumodus: Öffne Remotion Studio im Browser über npx remotion preview. Lehrende können die Timeline Frame für Frame durchsuchen und Animationen in Echtzeit testen.
   • Headless CLI-Rendering: Renders das vollständige Video als .mp4-Datei in Full HD mit dem Befehl npx remotion render.

---

📁 Projektdateistruktur des Remotion-Lehrvideos

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Remotion-Eintrittspunkt
    ├── Root.tsx                  # Registrierung der Composition (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Akt 1: Hook & Lernziele (CPMK)
    │   ├── 02_ConceptScene.tsx   # Akt 2: Kernmaterial & Diagramm
    │   ├── 03_DemoScene.tsx      # Akt 3: Simulation / Fallstudie
    │   └── 04_OutroScene.tsx     # Akt 4: Zusammenfassung & Abschlussquiz
    └── components/
        ├── ProgressBar.tsx       # Bildschirmanzeige der Zeitdauer
        ├── ConceptCard.tsx       # Kinetische Definitionskarte
        └── LessonTitle.tsx       # Mehrstufige animierte Titel

---

📐 Vorlage für die grundlegende Remotion-Lehrvideokomponente

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 - Dauer 3 Minuten (5400 Frames bei 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();

  // Animation des Titel-Einblendens mittels Federphysik
  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>
  );
};

---

🚀 Befehle für Vorschau & Rendering

1. Remotion Studio starten (Vorschau im Browser):

   npx remotion preview
   

2. Video als MP4-Datei rendern:

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