Blog

Transformer Claude en Réalisateur Vidéo avec Remotion

Ashley Innocent

Ashley Innocent

23 January 2026

Transformer Claude en Réalisateur Vidéo avec Remotion

Remotion vient de lancer les compétences d'agent, et cela change tout pour la création vidéo avec l'IA.

npx skills add remotion-dev/skills

C'est tout. Une seule commande, et Claude Code devient un expert en création vidéo qui comprend le framework vidéo de Remotion basé sur React de fond en comble.

Que sont les compétences d'agent Remotion ?

Les compétences d'agent sont des "manuels d'instructions" qui enseignent aux agents IA comme Claude Code comment utiliser correctement des outils et frameworks spécifiques. Les compétences officielles de Remotion confèrent à Claude une connaissance approfondie de :

Sans ces compétences, Claude pourrait générer du code Remotion buggé ou incorrect. Avec les compétences, il écrit des composants vidéo de qualité production du premier coup.

💡
Envie de créer une API de génération de vidéo ? Ce tutoriel couvre également la création de points de terminaison REST pour le rendu vidéo à la demande. Utilisez Apidog pour concevoir, tester et documenter vos API de génération vidéo avec des tests automatisés et une collaboration en temps réel.
button

Ce que vous allez construire

Dans ce tutoriel, vous allez :

TL;DR

# 1. Créez un projet Remotion
npx create-video@latest my-video && cd my-video

# 2. Installez les compétences d'agent (l'étape clé !)
npx skills add remotion-dev/skills

# 3. Lancez Claude Code et décrivez votre vidéo
claude

# 4. Rendez la vidéo
npx remotion render <composition-name> out/video.mp4

C'est le flux de travail complet. Les compétences d'agent enseignent à Claude comment écrire du code Remotion correct, afin que vous puissiez vous concentrer sur la description de ce que vous voulez au lieu de déboguer des composants React.

Prérequis

Avant de commencer, assurez-vous d'avoir :

ExigenceVersionCommande de vérification
Node.js18+node --version
npm ou yarnDernièrenpm --version
Claude CodeDernièreclaude --version
Éditeur de codeVS Code recommandé-

Vous devriez également avoir :

Étape 1 : Installer Remotion et créer votre projet

Tout d'abord, créez un nouveau projet Remotion en utilisant l'interface de ligne de commande officielle.

1.1 Ouvrez votre terminal et exécutez :

npx create-video@latest my-first-video

1.2 Lorsque vous y êtes invité, sélectionnez ces options :

? Comment souhaitez-vous nommer votre projet ? my-first-video
? Choisissez un modèle : blank
? Utiliser TypeScript ? Yes
? Installer les dépendances ? Yes

1.3 Naviguez vers votre projet :

cd my-first-video

1.4 Vérifiez l'installation :

npm run dev

Ceci ouvre Remotion Studio dans votre navigateur à l'adresse http://localhost:3000. Vous devriez voir un canevas blanc avec une timeline en bas.

Résultat attendu : Une fenêtre de navigateur avec l'interface de Remotion Studio.

Étape 2 : Installer les compétences d'agent Remotion

C'est là que la magie opère. Une seule commande confère à Claude Code une connaissance experte de Remotion.

2.1 Dans le répertoire de votre projet, exécutez :

npx skills add remotion-dev/skills

Lorsque vous voyez Added skill: remotion affiché, l'installation a réussi.

2.2 Que s'est-il passé ?

La commande a ajouté une compétence à .claude/skills/remotion/ dans votre projet. Ce dossier contient SKILL.md—le manuel d'instructions qui enseigne à Claude comment écrire du code Remotion correct.

2.3 Vérifiez l'installation :

Vérifiez que le fichier de compétence existe :

ls .claude/skills/remotion/

Sortie attendue :

SKILL.md

2.4 La structure de votre projet ressemble maintenant à :

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # Le "cerveau" qui enseigne Remotion à Claude
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Astuce de pro : Si la compétence n'est pas reconnue, exécutez à nouveau npx skills add remotion-dev/skills ou redémarrez Claude Code.

Étape 3 : Créez votre première vidéo avec Claude Code

Utilisons maintenant Claude Code pour générer une vidéo complète. Ouvrez votre terminal dans le répertoire du projet.

3.1 Démarrez Claude Code :

claude

3.2 Décrivez votre vidéo :

Saisissez cette invite à Claude Code :

Créez une vidéo d'introduction de 5 secondes pour une entreprise technologique nommée "DevFlow".

Exigences :
- Résolution : 1920x1080
- Fréquence d'images : 30fps
- Arrière-plan : Dégradé sombre de #1a1a2e à #16213e
- Séquence d'animation :
  1. Le texte du logo "DevFlow" apparaît progressivement (opacité de 0 à 1) (frames 0-30)
  2. Le logo s'agrandit légèrement avec un effet de rebond (frames 15-45)
  3. Le slogan "Build faster. Ship smarter." apparaît en dessous (frames 45-90)
  4. Tout reste immobile pour les images restantes

Utilisez une typographie moderne et épurée avec la famille de polices Inter.

3.3 Claude Code génère les fichiers :

Claude Code va créer ou modifier ces fichiers :

src/Root.tsx - Définition de la composition :

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

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="devflow-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

src/DevFlowIntro.tsx - Composant vidéo principal :

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        <h1>
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        <p>
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 Prévisualisez votre vidéo :

Si Remotion Studio n'est pas en cours d'exécution, lancez-le :

npm run dev

Sélectionnez "devflow-intro" dans la liste déroulante des compositions. Utilisez la timeline pour parcourir votre vidéo et prévisualiser les animations.

Résultat attendu : Votre vidéo d'introduction est lue avec les animations de fondu du logo et du slogan.

Étape 4 : Affinez votre vidéo avec des invites de suivi

Le pouvoir de Claude Code réside dans le raffinement itératif. Améliorons notre vidéo.

4.1 Ajoutez un effet de fond de particules et modifiez le schéma de couleurs

Ajoutez un effet de fond de particules animé subtil avec de petits points blancs
qui flottent lentement vers le haut. Gardez-le minimal - environ 20-30 particules,
très faible opacité (0.1-0.2) et mouvement lent.
Changez le dégradé pour un thème bleu-violet :
- Couleur de début : #0f0c29
- Couleur du milieu : #302b63
- Couleur de fin : #24243e
Faites un dégradé à 3 arrêts.

4.3 Ajoutez un repère d'effet sonore (facultatif) :

Ajoutez un commentaire de marqueur où un effet sonore "whoosh" devrait être joué
lorsque le logo rebondit. J'ajouterai l'audio plus tard.

Chaque fois que vous donnez des commentaires, Claude Code modifie le code pertinent et vous pouvez prévisualiser les changements immédiatement dans Remotion Studio.

Étape 5 : Ajouter du contenu dynamique avec des props

Rendez votre vidéo réutilisable en acceptant des props dynamiques. Cela vous permet de générer plusieurs vidéos avec des contenus différents.

5.1 Demandez à Claude Code d'ajouter des props :

Refactorisez la vidéo pour accepter ces props :
- companyName (string) - remplace "DevFlow"
- tagline (string) - remplace le texte du slogan
- primaryColor (string) - couleur principale du dégradé
- secondaryColor (string) - couleur secondaire du dégradé

Ajoutez également une validation de schéma Zod pour la sécurité des types.

5.2 Claude Code génère le schéma :

src/DevFlowIntro.tsx (mis à jour) :

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... le composant utilise ces props
};

src/Root.tsx (mis à jour) :

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 Testez avec différentes props dans Remotion Studio :

Dans Remotion Studio, cliquez sur le panneau Props et modifiez les valeurs :

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

L'aperçu se met à jour en temps réel.

Étape 6 : Créer une vidéo multi-scènes

Construisons une vidéo plus complexe avec plusieurs scènes.

6.1 Invitez Claude Code :

Créez une vidéo de démonstration de produit de 30 secondes avec ces scènes :

Scène 1 (0-5 secondes) : Animation d'introduction du logo
Scène 2 (5-12 secondes) : Présentation des fonctionnalités avec 3 icônes apparaissant une par une
  - Icône 1 : Fusée (Vitesse)
  - Icône 2 : Bouclier (Sécurité)
  - Icône 3 : Graphique (Analytique)
  Chaque icône doit glisser depuis la gauche avec un fondu

Scène 3 (12-22 secondes) : Maquette du tableau de bord du produit
  - Afficher une maquette d'interface utilisateur simple
  - Mettre en évidence différentes sections séquentiellement

Scène 4 (22-30 secondes) : Appel à l'action
  - "Démarrez votre essai gratuit"
  - L'URL du site Web apparaît progressivement

Utilisez le composant <Sequence> pour organiser les scènes.
Durée totale : 900 images à 30fps.

6.2 Claude Code génère la structure de la scène :

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Scène 1 : Intro du logo (frames 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Scène 2 : Présentation des fonctionnalités (frames 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Scène 3 : Maquette du tableau de bord (frames 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Scène 4 : Appel à l'action (frames 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code crée des composants de scène individuels :

src/scenes/FeatureShowcase.tsx :

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Vitesse', delay: 0 },
  { icon: '🛡️', label: 'Sécurité', delay: 30 },
  { icon: '📊', label: 'Analytique', delay: 60 },
];

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

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Étape 7 : Ajouter de l'audio à votre vidéo

7.1 Ajoutez une piste de musique de fond :

Placez votre fichier audio dans le dossier public :

public/
└── audio/
    └── background-music.mp3

7.2 Demandez à Claude Code d'intégrer l'audio :

Ajoutez de la musique de fond depuis public/audio/background-music.mp3
- Fondu en entrée sur les 30 premières images
- Fondu en sortie sur les 30 dernières images
- Réglez le volume à 0.5

7.3 Claude Code ajoute le composant Audio :

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Fondu audio en entrée/sortie
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... reste des scènes */}
    </AbsoluteFill>
  );
};

Étape 8 : Rendre votre vidéo

Exportons maintenant votre vidéo vers un fichier.

8.1 Rendu depuis la ligne de commande :

# Rendre en MP4 (recommandé pour la plupart des utilisations)
npx remotion render company-intro out/company-intro.mp4

# Rendre avec des props personnalisées
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Options de rendu :

# Haute qualité (plus lent)
npx remotion render company-intro out/video.mp4 --crf=18

# Moins bonne qualité (plus rapide, fichier plus petit)
npx remotion render company-intro out/video.mp4 --crf=28

# Rendre en GIF
npx remotion render company-intro out/video.gif --codec=gif

# Rendre en WebM
npx remotion render company-intro out/video.webm --codec=vp8

# Rendre une plage d'images spécifique
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Progression du rendu :

Vous verrez une sortie similaire à :

ℹ Rendu des images 0-150
████████████████████████████████████████ 100% | 150/150 images
✓ Rendu de 150 images en 12.3s (12.2 fps)
✓ Vidéo encodée en 3.2s
✓ Vidéo sauvegardée dans out/company-intro.mp4

Résultat attendu : Un fichier vidéo rendu dans votre répertoire out/.

Étape 9 : Mise à l'échelle avec Remotion Lambda (facultatif)

Pour le rendu de vidéos à grande échelle (des centaines ou des milliers), utilisez Remotion Lambda.

9.1 Installez les dépendances Lambda :

npm install @remotion/lambda

9.2 Configurez les identifiants AWS :

# Configurez les identifiants AWS
aws configure

# Créez le rôle Remotion Lambda
npx remotion lambda policies role

9.3 Déployez votre fonction Lambda :

# Déployez la fonction de rendu
npx remotion lambda functions deploy

# Déployez votre site vidéo
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Rendu via Lambda :

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 Rendu par programmation :

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('URL de la vidéo :', result.url);

Étape 10 : Construire une API de génération de vidéo

Créez un point de terminaison API qui génère des vidéos à la demande.

10.1 Demandez à Claude Code de créer un serveur Express :

Créez un serveur API Express.js avec ces points de terminaison :

POST /api/videos/generate
- Accepte : template, props, format
- Déclenche un rendu Remotion Lambda
- Retourne : jobId, status

GET /api/videos/status/:jobId
- Retourne la progression du rendu et l'URL de téléchargement une fois terminé

Incluez une gestion des erreurs appropriée et une validation Zod.

10.2 Claude Code génère le serveur :

server/index.ts :

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('API vidéo en cours d'exécution sur http://localhost:3001');
});

10.3 Testez votre API avec Apidog :

Utilisez Apidog pour tester vos points de terminaison de génération vidéo :

  1. Créez une nouvelle requête vers POST /api/videos/generate
  2. Définissez le corps :
{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}
  1. Envoyez et vérifiez que la réponse contient un jobId
  2. Interrogez le point de terminaison de statut jusqu'à ce que status: "completed"

Les fonctionnalités de test automatisé d'Apidog vous aident à valider que votre pipeline de génération vidéo fonctionne de manière fiable.

Exemple complet : Générateur de vidéos marketing

Voici un exemple complet que vous pouvez utiliser comme modèle.

Invite pour Claude Code :

Créez un générateur de vidéos marketing complet avec ces fonctionnalités :

1. Modèle : "social-promo"
   - Durée : 15 secondes (450 images à 30fps)
   - Résolution : 1080x1080 (carré Instagram)

2. Scènes :
   - Texte d'accroche (0-3s) : Texte grand et en gras qui attire l'attention
   - Image du produit (3-9s) : Affichage d'un produit avec effet Ken Burns
   - Liste de fonctionnalités (9-12s) : 3 points affichés séquentiellement
   - Appel à l'action (12-15s) : "Acheter maintenant" avec animation pulsante

3. Props :
   - hookText : string
   - productImageUrl : string
   - features : string[] (tableau de 3 éléments)
   - ctaText : string
   - brandColor : string

4. Inclure le ducking audio lorsque le texte apparaît

Générez tous les fichiers nécessaires pour que cela fonctionne.

Claude Code générera un modèle de vidéo complet et prêt pour la production que vous pourrez personnaliser et rendre à l'échelle.

Dépannage des problèmes courants

Problème : "Impossible de trouver le module 'remotion'"

# Solution : Réinstaller les dépendances
rm -rf node_modules
npm install

Problème : Les polices ne se chargent pas

// Ajoutez l'importation de police à votre composant
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// Utilisez dans les styles
style={{ fontFamily }}

Problème : La vidéo est rendue en noir

Problème : Claude Code ne reconnaît pas les compétences Remotion

# Réinstaller la compétence
npx skills add remotion-dev/skills

# Vérifiez que .claude/skills/remotion/SKILL.md existe
ls .claude/skills/remotion/

# Redémarrez Claude Code

Problème : Erreurs d'incompatibilité de version

# Vérifiez et mettez à jour les versions de Remotion
npx remotion versions

# Cela résout souvent les problèmes de compatibilité

Vous construisez des API de génération de vidéo ? Essayez Apidog gratuitement pour concevoir, tester et documenter vos points de terminaison. Validez les schémas de requête, automatisez les scénarios de test et assurez-vous que votre pipeline vidéo gère les cas extrêmes avec élégance.

button

Pratiquez le Design-first d'API dans Apidog

Découvrez une manière plus simple de créer et utiliser des API

S'inscrire gratuitementTélécharger