Créateur de vidéos Remotion

Que fait Créateur de vidéos Remotion ?

Créez des vidéos programmatiques en utilisant Remotion — des composants React qui s'affichent sous forme de vidéo. Cette compétence intègre le style visuel de Skill Stack et les leçons apprises lors de la création de contenu explicatif.

Objectif

Produire du contenu vidéo court (10-60 secondes) expliquant les concepts de Skill Stack avec une esthétique distinctive inspirée de la risographie. Les vidéos sont du code, donc versionnées, reproductibles et infiniment modifiables.

Quand utiliser cette compétence

• Créer des vidéos explicatives pour les concepts de Skill Stack
• Réaliser du contenu animé pour les réseaux sociaux (vertical 9:16, carré 1:1, paysage 16:9)
• Visualiser des workflows techniques ou des présentations progressives
• Toute vidéo où le minutage précis et la typographie sont importants

Pas pour :

• Le montage de séquences live (utilisez des outils vidéo traditionnels)
• Les graphiques 3D complexes (Remotion est axé sur la 2D)
• Les graphiques uniques rapides (utilisez Figma ou Canva)

---

Configuration du projet

Démarrage rapide

# Créer un nouveau projet Remotion
npx create-video@latest my-video

# Installer les dépendances
cd my-video && npm install

# Ajouter Google Fonts
npm install @remotion/google-fonts

# Démarrer le studio
npm run start  # Ouvre http://localhost:3000

Structure des fichiers

my-video/
├── src/
│   ├── Root.tsx           # Définitions des compositions
│   ├── Main.tsx           # Composant vidéo principal
│   └── components/        # Éléments réutilisables
├── package.json
├── remotion.config.ts
└── out/                   # Vidéos rendues

Configuration de la composition (Root.tsx)

Créez toujours plusieurs ratios d'aspect pour chaque vidéo :

import { Composition, Folder } from "remotion";
import { MyVideo } from "./MyVideo";

export const RemotionRoot = () => (
  <>
    <Folder name="MyVideo">
      <Composition
        id="MyVideo-Vertical"
        component={MyVideo}
        durationInFrames={600}  // 20 secondes à 30 ips
        fps={30}
        width={1080}
        height={1920}  // 9:16
      />
      <Composition
        id="MyVideo-Square"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1080}
        height={1080}  // 1:1
      />
      <Composition
        id="MyVideo-Landscape"
        component={MyVideo}
        durationInFrames={600}
        fps={30}
        width={1920}
        height={1080}  // 16:9
      />
    </Folder>
  </>
);

---

Style visuel : Risographe Skill Stack

Palette de couleurs

const C = {
  paper: "#FAF8F5",    // Fond blanc cassé chaud
  coral: "#D4694A",    // Accent, appels à l'action, surlignages
  teal: "#1E4D4D",     // En-têtes, états sélectionnés
  ink: "#1C1C1C",      // Texte du corps
  muted: "#666666",    // Texte secondaire
  dimmed: "#AAAAAA",   // Texte tertiaire, désactivé
  white: "#FFFFFF",    // Cartes, conteneurs
};

Typographie

import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
import { loadFont as loadPlayfair } from "@remotion/google-fonts/PlayfairDisplay";
import { loadFont as loadJetBrains } from "@remotion/google-fonts/JetBrainsMono";

// Texte du corps, étiquettes de l'interface
const { fontFamily: inter } = loadInter("normal", {
  weights: ["400", "500", "600"],
  subsets: ["latin"],
});

// Titres, citations, texte émotionnel
const { fontFamily: playfair } = loadPlayfair("normal", {
  weights: ["400", "500", "600", "700"],
  subsets: ["latin"],
});

// Code, contenu technique, noms de compétences
const { fontFamily: mono } = loadJetBrains("normal", {
  weights: ["400", "500"],
  subsets: ["latin"],
});

Tailles de police recommandées

Tailles minimales lisibles pour une vidéo :

Élément	Carré (1080)	Vertical (1080 l)	Paysage (1920 l)
Titres	64-84 px	64-84 px	72-96 px
Noms de compétences	36-40 px	36-40 px	40-48 px
Texte du corps	28-32 px	28-32 px	32-36 px
Étiquettes	24-28 px	24-28 px	28-32 px
Annotation	22-24 px	22-24 px	24-28 px

Leçon clé : Toujours plus grand que vous ne le pensez. La vidéo comprime les détails.

Superposition de grain

const GrainOverlay: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        pointerEvents: "none",
        opacity: 0.04,
        mixBlendMode: "multiply",
      }}
    >
      <svg width="100%" height="100%">
        <defs>
          <filter id="grain">
            <feTurbulence
              type="fractalNoise"
              baseFrequency="0.8"
              numOctaves="4"
              seed={Math.floor(frame / 4)}  // Animer le grain
            />
          </filter>
        </defs>
        <rect width="100%" height="100%" filter="url(#grain)" />
      </svg>
    </AbsoluteFill>
  );
};

---

Patrons d'animation

Outils principaux

import {
  useCurrentFrame,
  useVideoConfig,
  AbsoluteFill,
  interpolate,
  spring,
  Sequence,
} from "remotion";

Fondu d'apparition/disparition

const fadeIn = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

const fadeOut = interpolate(frame, [150, 180], [1, 0], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

// Combiner pour l'opacité de la scène
<div style={{ opacity: fadeIn * fadeOut }}>

Animations à ressort (spring)

const { fps } = useVideoConfig();

// Entrée en douceur
const entrance = spring({
  frame: frame - 20,  // Décalage de 20 images
  fps,
  config: { damping: 100 },  // Doux, sans rebond
});

// Sélection rebondissante
const selectPulse = spring({
  frame: frame - 15,
  fps,
  config: { damping: 12, stiffness: 100 },  // Rebondissant
});

// Appliquer à la transformation
<div style={{
  opacity: interpolate(entrance, [0, 1], [0, 1]),
  transform: `translateY(${interpolate(entrance, [0, 1], [20, 0])}px)`,
}}>

Effet machine à écrire

const ScenePrompt: React.FC<{ frame: number }> = ({ frame }) => {
  const text = "Votre texte de prompt ici";
  const charsToShow = Math.floor(frame / 2);  // 15 caractères/s à 30 ips
  const visibleText = text.slice(0, charsToShow);
  const isTyping = charsToShow < text.length;
  const cursorBlink = Math.floor(frame / 18) % 2 === 0;

  return (
    <div>
      "{visibleText}
      {(isTyping || cursorBlink) && (
        <span style={{
          backgroundColor: C.coral,
          marginLeft: 4,
          opacity: cursorBlink ? 1 : 0,
        }}>
          {"\u00A0"}
        </span>
      )}
      {!isTyping && '"'}
    </div>
  );
};

Animation de liste décalée

const ITEMS = ["élément-1", "élément-2", "élément-3"];

{ITEMS.map((item, i) => {
  const delay = i * 25;  // 25 images entre chaque
  const s = spring({
    frame: Math.max(0, frame - delay - 20),
    fps,
    config: { damping: 100 },
  });

  return (
    <div
      key={item}
      style={{
        opacity: interpolate(s, [0, 1], [0, 1]),
        transform: `translateY(${interpolate(s, [0, 1], [20, 0])}px)`,
      }}
    >
      {item}
    </div>
  );
})}

---

Directives de minutage des scènes

Calcul des durées

• 30 ips = 30 images par seconde
• 10 secondes = 300 images
• 20 secondes = 600 images

Leçons apprises sur le rythme

Aller trop vite est l'erreur n°1. Les spectateurs ont besoin de temps pour :

1. Remarquer un changement de scène
2. Lire le texte
3. Traiter le sens
4. Se préparer au changement suivant

Durées minimales des scènes :

Type de scène	Minimum	Confortable
Texte machine à écrire	3-4 s	5-6 s
Apparition d'une liste	4-5 s	6-8 s
Sélection/surlignage	3-4 s	5 s
Schéma technique	4-5 s	6-8 s
Chute/CTA	2-3 s	3-4 s

Patron de chevauchement des scènes

Les scènes doivent se fondre les unes dans les autres, sans coupure brusque :

// Minutage des scènes pour une vidéo de 20 secondes (600 images)
{frame < 200 && <ScenePrompt frame={frame} />}
{frame >= 160 && frame < 340 && <SceneScan frame={frame - 160} />}
{frame >= 300 && frame < 460 && <SceneSelect frame={frame - 300} />}
{frame >= 420 && frame < 560 && <SceneLoad frame={frame - 420} />}
{frame >= 520 && <ScenePunchline frame={frame - 520} />}

Le chevauchement de 40 images (1,3 seconde) crée des fondus enchaînés fluides lorsqu'il est combiné avec les interpolations fadeIn/fadeOut.

---

Workflow

Phase 1 : Storyboard

Avant de coder, définissez :

1. Message principal - Quelle est la chose que les spectateurs doivent retenir ?
2. Découpage des scènes - 4 à 6 scènes, chacune avec une idée
3. Durée totale - 10-20 secondes pour les réseaux sociaux, 30-60 pour les vidéos explicatives
4. Contenu textuel - Mots exacts pour chaque scène

Phase 2 : Structure

1. Créez une composition avec la durée appropriée
2. Construisez les composants de scène avec du contenu factice
3. Mettez en place le minutage de base (plages de scènes)
4. Testez que toutes les scènes apparaissent

Phase 3 : Style

1. Appliquez la palette de couleurs et les polices
2. Ajoutez la superposition de grain
3. Assurez-vous que les tailles de police sont lisibles
4. Testez sur téléphone (vertical) et ordinateur (paysage)

Phase 4 : Animation

1. Ajoutez fadeIn/fadeOut à chaque scène
2. Ajoutez des animations à ressort pour les entrées
3. Affinez le minutage — presque toujours besoin de ralentir
4. Testez la lecture complète plusieurs fois

Phase 5 : Rendu

# Rendre une composition spécifique
npx remotion render MyVideo-Square out/square.mp4

# Rendre tous les formats
npx remotion render MyVideo-Vertical out/vertical.mp4
npx remotion render MyVideo-Square out/square.mp4
npx remotion render MyVideo-Landscape out/landscape.mp4

---

Erreurs courantes

❌ Problèmes de centrage

Problème : Le contenu apparaît dans le coin supérieur gauche.

Solution : Utilisez AbsoluteFill avec flexbox, pas position: absolute.

// ✅ Correct
<AbsoluteFill style={{
  justifyContent: "center",
  alignItems: "center",
}}>

// ❌ Erroné
<div style={{ position: "absolute", left: "50%", top: "50%" }}>

❌ Polices trop petites

Problème : Texte lisible dans le studio, illisible sur un téléphone.

Solution : Minimum 28 px pour le texte du corps, 64 px pour les titres.

❌ Trop rapide

Problème : Impossible de lire le texte avant qu'il ne disparaisse.

Solution : Doublez votre estimation initiale de durée. Chaque scène nécessite au moins 4 à 8 secondes.

❌ Coupures brutales

Problème : Transitions brusques entre les scènes.

Solution : Chevauchez les scènes de 30 à 50 images avec fadeIn/fadeOut.

❌ Absence de support des ratios d'aspect

Problème : La vidéo semble mal rendue sur différentes plateformes.

Solution : Créez les trois compositions (vertical, carré, paysage) dès le départ.

---

Intégration des sous-titres

Remotion offre un support de premier ordre pour les sous-titres. Trois options selon le coût :

Option 1 : Whisper natif (Recommandé - Gratuit)

npm install @remotion/captions @remotion/install-whisper-cpp
npx @remotion/install-whisper-cpp --model large-v3-turbo

import { transcribe } from "@remotion/captions";

const result = await transcribe({
  inputPath: "/path/to/audio.mp3",
  model: "large-v3-turbo",
  language: "en",
});
// result.captions = [{ text: "Bonjour", startTime: 0, endTime: 0.5 }, ...]

Option 2 : API ZapCap (0,10 $/min)

Pour le traitement par lots sans configuration locale du modèle.

Option 3 : API Submagic (0,69 $/min)

Modèles de sous-titres "viraux" pré-stylisés, mais coûteux.

Détails complets du workflow : Voir references/caption-workflow.md

---

Ressources communautaires

Discord

Discord Remotion - Plus de 6 000 membres. Canaux #help et #showcase actifs. Le créateur (Jonny Burger) répond directement.

Modèles clés à étudier

Modèle	Cas d'utilisation	Lien
TikTok	Vidéo verticale pour réseaux sociaux	remotion-dev/template-tiktok
Audiogram	Extraits de podcast	remotion-dev/template-audiogram
GitHub Unwrapped	Vidéo basée sur des données	remotion-dev/github-unwrapped
claude-remotion-kickstart	Workflow assisté par IA	Starter communautaire pour Claude + Remotion

Paquets essentiels

# Sous-titres
npm install @remotion/captions @remotion/install-whisper-cpp

# Graphismes
npm install @remotion/skia  # Graphismes vectoriels 2D
npm install @remotion/three # 3D avec Three.js
npm install @remotion/lottie # Animations Lottie

# Rendu
npm install @remotion/lambda  # Rendu sans serveur AWS
npm install @remotion/player  # Intégration dans des applications web

Liste complète des ressources : Voir references/community-resources.md

---

Ressources fournies

• references/what-is-a-skill.tsx - Exemple complet de composant de la vidéo "What Is A Skill"
• references/caption-workflow.md - Guide complet d'intégration des sous-titres (Whisper, ZapCap, Submagic)
• references/community-resources.md - Modèles, paquets, parcours d'apprentissage

---

Compétences associées

• video-caption-creation - Sous-titres et hashtags pour la vidéo rendue
• youtube-scriptwriting - Pour des scripts de vidéos explicatives plus longues
• social-content-creation - Réutiliser des concepts vidéo pour des publications statiques

---

Historique des versions

• v1.1 (2026-01-22) : Intégration des sous-titres et de la communauté

  • Ajout du workflow de sous-titres natif Whisper via @remotion/captions
  • Ajout de préréglages de style de sous-titres (minimal, gras, karaoké, marque)
  • Ajout des ressources communautaires (Discord, modèles, paquets)
  • Nouveaux fichiers de référence : caption-workflow.md, community-resources.md
  • Comparaison des coûts : Whisper (gratuit) vs ZapCap (0,10 $/min) vs Submagic (0,69 $/min)

• v1.0 (2026-01-21) : Création initiale de la compétence

  • Style visuel risographe
  • Patrons d'animation (spring, interpolate, machine à écrire)
  • Directives de minutage (apprises par itération "trop rapide")
  • Patron de chevauchement des scènes

---

Les vidéos sont du code. Versionnez-les, itérez-les et constituez une bibliothèque de composants réutilisables.