Remotion Lecture Video Creator 🎬

remotion-lecture-video-creator transforme un syllabus, un module de cours ou tout matériel pédagogique écrit en vidéos d'apprentissage animées programmatiquement (Programmatic Educational Video) à l'aide du framework Remotion (React + Standards Web).

Au lieu de monter des vidéos manuellement avec un logiciel propriétaire lourd, les enseignants peuvent générer et modifier des vidéos de cours de haute qualité directement via le code (Video as Code), animées image par image de manière fluide, versionnées et prêtes pour un rendu en masse (batch rendering).

🌟 Fonctionnalités Principales des Vidéos Éducatives Remotion

Video as Code (React & TypeScript) :
- Chaque scène de cours est un composant React autonome.
- Utilise les hooks officiels de Remotion (useCurrentFrame, useVideoConfig, interpolate, spring) pour des animations physiques fluides et sans à-coups.
Deux Formats de Ratio Vidéo Standard :
- Horizontal 16:9 (1920x1080 @ 30 ips) : Format standard pour les cours LMS, YouTube, vidéoprojecteurs et Smart TV en classe.
- Vertical 9:16 (1080x1920 @ 30 ips) : Format micro-apprentissage / éducation rapide pour TikTok, Instagram Reels et YouTube Shorts.
Structure Pédagogique en 4 Actes (Arc de Leçon Standard en 4 Actes) :
- Acte 1 : Accroche & Étincelle de Curiosité (Images 0–900 / 0–30 secondes) : Titre de la séance, identité du professeur, objectifs d'apprentissage et question déclencheuse sur un problème réel.
- Acte 2 : Décomposition du Concept Central (Images 900–2700 / 30–90 secondes) : Cartes conceptuelles animées, diagrammes de flux progressifs et typographie cinétique à fort contraste.
- Acte 3 : Étude de Cas & Démonstration Visuelle en Direct (Images 2700–4500 / 90–150 secondes) : Exemple de code avec coloration syntaxique, simulation étape par étape ou animation de formules mathématiques.
- Acte 4 : Réflexion & Appel à l'Action (Images 4500–5400 / 150–180 secondes) : Résumé des 3 points clés, quiz interactif avec minuteur défilant et instructions de devoir sur le LMS.
Composants Visuels Éducatifs Riches Intégrés :
- Typographie Cinétique : Les titres et points de contenu apparaissent à l'aide d'une interpolation à ressort (spring physics).
- Barre de Progression Temporelle : Barre de progression animée en bas de la vidéo indiquant visuellement la durée du contenu.
- Cartes Conceptuelles Animées : Cartes de définition au style moderne avec ombres douces et accent de couleur de mise en valeur (accent highlight).
- Synchronisation Audio & Voix Off : Composant <Audio /> et ajustement automatique de la durée des images par rapport à la longueur de l'audio de narration.
Aperçu Instantané & Rendu MP4 Haute Vitesse :
- Mode Aperçu Interactif : Ouvrez Remotion Studio dans le navigateur via npx remotion preview. L'enseignant peut faire défiler la timeline image par image et tester les animations en temps réel.
- Rendu Headless CLI : Rendu de la vidéo complète en fichier .mp4 Full HD via la commande npx remotion render.

📁 Structure des Fichiers du Projet Vidéo Éducative Remotion

Session_XX/04_Video_Pembelajaran/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts                  # Point d'entrée Remotion
    ├── Root.tsx                  # Enregistrement des Compositions (16:9 & 9:16)
    ├── scenes/
    │   ├── 01_IntroScene.tsx     # Acte 1 : Accroche & Objectifs d'Apprentissage
    │   ├── 02_ConceptScene.tsx    # Acte 2 : Contenu Principal & Diagrammes
    │   ├── 03_DemoScene.tsx      # Acte 3 : Simulation / Étude de Cas
    │   └── 04_OutroScene.tsx     # Acte 4 : Résumé & Quiz de Clôture
    └── components/
        ├── ProgressBar.tsx       # Indicateur de durée à l'écran
        ├── ConceptCard.tsx       # Carte de définition cinétique
        └── LessonTitle.tsx       # Titre animé à plusieurs niveaux

📐 Modèle de Composant de Base pour Vidéo Éducative Remotion

1. `src/Root.tsx`

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

export const RemotionRoot: React.FC = () => {
  return (
    <>
      {/* Vidéo 16:9 Paysage Full HD - Durée 3 Minutes (5400 images @ 30 ips) */}
      <Composition
        id="LectureVideo-16x9"
        component={LectureComposition}
        durationInFrames={5400}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          courseTitle: "Génie Logiciel",
          sessionTitle: "Séance 03 : Principes d'Encapsulation & de Modularité",
          instructorName: "Équipe Enseignante 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 d'entrée du titre utilisant la physique du ressort
  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' }}>
          Enseignement Basé sur les Résultats • Objectifs d'Apprentissage CPMK-2
        </p>
      </div>
    </AbsoluteFill>
  );
};

🚀 Commandes d'Aperçu et de Rendu

Lancer Remotion Studio (Aperçu dans le Navigateur) :
```
npx remotion preview
```

Rendre la Vidéo en Fichier MP4 :

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

remotion-lecture-video-creator

Qu'est-ce que remotion-lecture-video-creator ?

Demander à votre IA préférée

Documentation