remotion-lecture-video-creator

Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator transforma programas de disciplinas, módulos de aulas ou materiais de ensino escritos em vídeos de aprendizagem animados programaticamente (Vídeo Educacional Programático) usando o framework Remotion (React + Padrões Web).

Ao invés de editar vídeos manualmente através de softwares proprietários pesados, educadores podem gerar e modificar vídeos de aula de alta qualidade diretamente através de código (Vídeo como Código), com animações suaves quadro a quadro, controle de versão e prontos para renderização em lote.

---

🌟 Principais Recursos do Vídeo Educacional Remotion

1. Vídeo como Código (React & TypeScript):

   • Cada cena de aula (Cena) é um componente React independente.
   • Utiliza hooks oficiais do Remotion (useCurrentFrame, useVideoConfig, interpolate, spring) para animações físicas suaves e sem travamentos.

2. Dois Formatos de Proporção de Vídeo Padrão:

   • Horizontal 16:9 (1920x1080 @ 30fps): Formato padrão para vídeos de aula em LMS, YouTube, projetores e Smart TVs de sala de aula.
   • Vertical 9:16 (1080x1920 @ 30fps): Formato de Microlearning / educação rápida para TikTok, Instagram Reels e YouTube Shorts.

3. Estrutura Pedagógica de 4 Atos (Arco de Aula Padrão de 4 Atos):

   • Ato 1: Gancho & Curiosidade (Quadros 0–900 / 0–30 segundos): Título da sessão, identidade do instrutor, objetivos de aprendizagem e uma pergunta inicial baseada em um problema real.
   • Ato 2: Explicação do Conceito Central (Quadros 900–2700 / 30–90 segundos): Cartões de conceito animados, diagramas de fluxo em bloco passo a passo e tipografia cinética de alto contraste.
   • Ato 3: Estudo de Caso & Demonstração Visual ao Vivo (Quadros 2700–4500 / 90–150 segundos): Exemplos de código com destaque de sintaxe, simulações passo a passo ou animações de fórmulas matemáticas.
   • Ato 4: Reflexão & Chamada para Ação Desafiadora (Quadros 4500–5400 / 150–180 segundos): Resumo de 3 pontos principais, quiz interativo com temporizador e instruções de tarefa no LMS.

4. Ricos Componentes Visuais Educacionais Integrados:

   • Tipografia Cinética: Títulos e pontos do material aparecem usando interpolação de mola (spring physics).
   • Barra de Progresso Temporal: Uma barra de progresso animada na parte inferior do vídeo que informa visualmente a duração do conteúdo.
   • Cartões de Conceito Animados: Cartões de definição com estilo moderno, sombras suaves e cores de destaque.
   • Sincronização de Áudio & Narração: Componente <Audio /> e ajuste automático da duração dos quadros com base na duração do áudio da narração.

5. Visualização Instantânea & Renderização Rápida de MP4:

   • Modo de Visualização Interativo: Abra o Remotion Studio no navegador via npx remotion preview. O instrutor pode navegar pela linha do tempo quadro a quadro e testar animações em tempo real.
   • Renderização por CLI Headless: Renderize o vídeo completo em um arquivo .mp4 Full HD através do comando npx remotion render.

---

📁 Estrutura de Arquivos do Projeto de Vídeo Educacional Remotion

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Ponto de entrada do Remotion
    ├── Root.tsx                  # Registro das Composições (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Ato 1: Gancho & Objetivos de Aprendizagem
    │   ├── 02_ConceptScene.tsx   # Ato 2: Conteúdo Principal & Diagramas
    │   ├── 03_DemoScene.tsx      # Ato 3: Simulação / Estudo de Caso
    │   └── 04_OutroScene.tsx     # Ato 4: Resumo & Quiz Final
    └── components/
        ├── ProgressBar.tsx       # Indicador de duração do tempo na tela
        ├── ConceptCard.tsx       # Cartão de definição cinética
        └── LessonTitle.tsx       # Título animado em camadas

---

📐 Template de Componente Básico do Vídeo Educacional Remotion

1. src/Root.tsx

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

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Vídeo 16:9 Paisagem Full HD - Duração de 3 Minutos (5400 quadros @ 30fps) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "Engenharia de Software",
          sessionTitle: "Sessão 03: Princípios de Encapsulamento & Modularidade",
          instructorName: "Equipe de Professores 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();

  // Animação de entrada do título usando física 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' }}>
          Educação Baseada em Resultados • Objetivos de Aprendizagem CPMK-2
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 Comandos de Visualização & Renderização

1. Inicie o Remotion Studio (Visualização no Navegador):

   npx remotion preview
   

2. Renderize o Vídeo para Arquivo MP4:

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