remotion-lecture-video-creator

Creador de Videos de Conferencias con Remotion 🎬

remotion-lecture-video-creator transforma planes de estudio, módulos de clase o materiales educativos escritos en videos de aprendizaje animados programáticamente (Programmatic Educational Video) utilizando el framework Remotion (React + Estándares Web).

En lugar de editar video manualmente con software propietario pesado, los educadores pueden generar y modificar videos de conferencias de alta calidad directamente a través del código (Video as Code), con animaciones suaves por fotograma, control de versiones y listo para renderizado por lotes (batch rendering).

---

🌟 Características Principales del Video Educativo con Remotion

1. Video as Code (React & TypeScript):

   • Cada escena de la conferencia (Scene) es un componente React independiente.
   • Utiliza hooks oficiales de Remotion (useCurrentFrame, useVideoConfig, interpolate, spring) para animaciones físicas suaves y sin interrupciones.

2. Dos Formatos de Relación de Aspecto Estándar:

   • Horizontal 16:9 (1920x1080 @ 30fps): Formato estándar para videos de clase en LMS, YouTube, proyectores y Smart TV de aula.
   • Vertical 9:16 (1080x1920 @ 30fps): Formato de micro-aprendizaje / educación rápida para TikTok, Instagram Reels y YouTube Shorts.

3. Estructura Pedagógica de 4 Actos (Arco de Lección Estándar de 4 Actos):

   • Acto 1: Gancho y Curiosidad (Fotogramas 0–900 / 0–30 segundos): Título de la sesión, identidad del instructor, CPMK/objetivos de aprendizaje y una pregunta desencadenante basada en un problema real.
   • Acto 2: Desglose del Concepto Central (Fotogramas 900–2700 / 30–90 segundos): Tarjetas de concepto animadas, diagramas de bloques paso a paso y tipografía cinética de alto contraste.
   • Acto 3: Estudio de Caso y Demostración Visual en Vivo (Fotogramas 2700–4500 / 90–150 segundos): Ejemplos de código con resaltado de sintaxis, simulaciones paso a paso o animaciones de fórmulas matemáticas.
   • Acto 4: Reflexión y Llamada a la Acción de Desafío (Fotogramas 4500–5400 / 150–180 segundos): Resumen de 3 puntos clave, cuestionario interactivo con temporizador e instrucciones para la tarea en el LMS.

4. Rico en Componentes Visuales Educativos Integrados:

   • Tipografía Cinética: Los títulos y puntos clave aparecen utilizando interpolación de resorte (spring physics).
   • Barra de Progreso Temporal: Una barra de progreso animada en la parte inferior del video que muestra visualmente la duración del material.
   • Tarjetas de Concepto Animadas: Tarjetas de definición de estilo moderno con sombras suaves y acentos de color de énfasis (accent highlight).
   • Sincronización de Audio y Voz en Off: Componente <Audio /> y ajuste automático de la duración de los fotogramas a la longitud del audio de la narración.

5. Vista Previa Instantánea y Renderizado MP4 de Alta Velocidad:

   • Modo de Vista Previa Interactiva: Abre Remotion Studio en el navegador mediante npx remotion preview. El instructor puede desplazarse por la línea de tiempo fotograma a fotograma y probar las animaciones en tiempo real.
   • Renderizado CLI sin Interfaz Gráfica: Renderiza el video completo en un archivo .mp4 Full HD mediante el comando npx remotion render.

---

📁 Estructura de Archivos del Proyecto de Video Educativo con Remotion

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Punto de entrada de Remotion
    ├── Root.tsx                  # Registro de Composition (16:9 y 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Acto 1: Gancho y Logros de Aprendizaje (CPMK)
    │   ├── 02_ConceptScene.tsx   # Acto 2: Contenido Central y Diagramas
    │   ├── 03_DemoScene.tsx      # Acto 3: Simulación / Estudio de Caso
    │   └── 04_OutroScene.tsx     # Acto 4: Resumen y Cuestionario de Cierre
    └── components/
        ├── ProgressBar.tsx       # Indicador de duración en pantalla
        ├── ConceptCard.tsx       # Tarjeta de definición cinética
        └── LessonTitle.tsx       # Título animado en niveles

---

📐 Plantilla de Componente Básico de Video Educativo con Remotion

1. src/Root.tsx

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

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Video Horizontal 16:9 Full HD - Duración 3 Minutos (5400 fotogramas @ 30fps) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "Ingeniería de Software",
          sessionTitle: "Sesión 03: Principios de Encapsulación y Modularidad",
          instructorName: "Equipo Docente 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();

  // Animación de entrada del título utilizando física de resorte
  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' }}>
          Educación Basada en Resultados • Logro de Aprendizaje CPMK-2
        </p>
      </div>
    </AbsoluteFill>
  );
};

---

🚀 Comandos de Vista Previa y Renderizado

1. Ejecutar Remotion Studio (Vista Previa en el Navegador):

   npx remotion preview
   

2. Renderizar Video a Archivo MP4:

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