Créer des vidéos avec Claude Code et remotion-best-practices

Ce chapitre explique comment construire et générer localement, à partir de zéro, un projet de vidéo promotionnelle Remotion à l'aide de Claude Code avec la compétence remotion-best-practices.

Prérequis

Avant de commencer, assurez-vous que votre environnement local répond aux exigences suivantes.

Dépendances	Version requise	Objectif
Node.js	>= 18.0	Exécuter Remotion et les scripts npm
npm / pnpm	Dernière version stable	Gestion des paquets de dépendances
Claude Code	Dernière version	Génération de code assistée par IA et échafaudage de projet
remotion-best-practices	Installé en tant que compétence	Fournit des standards et des modèles pour les projets Remotion

Installation de Claude Code

Le script d'installation officiel en un clic est disponible ; exécutez la commande correspondante en fonction de votre système.

macOS、Linux、WSL：

curl -fsSL https://claude.ai/install.sh | bash

Windows PowerShell：

irm https://claude.ai/install.ps1 | iex

Windows CMD：

curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd

Après l'installation, vérifiez si elle a réussi :

$ claude --version
2.1.142 (Claude Code)

La première exécution nécessite de se connecter à votre compte Anthropic et d'autoriser. Si vous n'avez pas de compte officiel, vous pouvez consulterConfiguration de l'API Claude Code

Installation de la Skill remotion-best-practices

Une Skill est un paquet de capacités d'extension pour Claude Code. remotion-best-practices regroupe les bonnes pratiques et les modèles de code des projets Remotion.

Qu'est-ce qu'une Skill

Une Skill est essentiellement un document de prompt structuré (SKILL.md). Après que Claude Code l'a lu, il acquiert des connaissances professionnelles et des contraintes de spécification dans le domaine correspondant.

La skill remotion-best-practices inclut le contenu suivant :

Module de contenu	Description
Normes de répertoire de projet	Définit des structures en couches standard pour les compositions, les composants et les ressources
Utilisation de l'API d'animation	Modèles standard pour interpolate, spring et useCurrentFrame
Bonnes pratiques de performance	Spécifications pour éviter le rendu redondant, le préchargement des ressources statiques, etc.
Modèles de configuration de rendu	Combinaisons de paramètres recommandées pour le codec, les fps, la résolution, etc.

Méthode d'installation

Dans le terminal, accédez au répertoire de votre projet et exécutez la commande d'installation :

npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

Après l'installation, vous pouvez vérifier que la compétence a été reconnue :

claude skills list

Vous devriez voir une section similaire à la suivante :

Installed skills:
  - remotion-best-practices  (active)

Adresse du code source de remotion-best-practices :https://github.com/remotion-dev/skills

Création d'un projet Remotion

Une fois toutes les préparations terminées, lancez Claude Code dans un répertoire vide et utilisez un seul prompt pour qu'il configure automatiquement le projet.

Lancer Claude Code et transmettre un prompt

Nous pouvons créer un répertoirevideo-marker, puis y entrer:

mkdir video-marker
cd video-marker

Exécutez dans le répertoire du projet :

claude

Après être entré dans l'interface interactive, collez le prompt suivant:

先读取 remotion-best-practices skill，然后创建一个 Remotion 项目。

目标：6 秒钟的「Hello Example」好莱坞风格片头视频，1920x1080，30fps.

效果要求：
- 纯黑背景
- "HELLO EXAMPLE" 文字以冲击力方式砸入画面，伴随冲击波扭曲效果
- 撞击瞬间爆发金色粒子
- 强烈的色差闪光（chromatic aberration）
- 文字落定后，绿色（#3A7EC2）轮廓光晕脉冲
- 顶部和底部黑色宽幅遮幅条像电影一样滑入

只需一个 Composition，不用拆分场景。整体质感对标好莱坞大片片头字幕。

Ensuite, attendez simplement qu'il génère~

Une fois terminé, il vous indiquera comment générer le fichier mp4:

Aperçu dans le navigateur:

cd hello-example
npm run dev

Aperçu de l'effet:

Générer le mp4:

cd hello-example
npx remotion render HelloExample out/hello-example.mp4

Informations d'export:

La vidéo se trouve dans le répertoire out:

Le prompt exige explicitement que Claude Code lise d'abord la compétence, de sorte que le code généré suive strictement la spécification remotion-best-practices au lieu de s'appuyer sur les habitudes par défaut du modèle.

Ce que fera Claude Code

Après avoir lu la compétence, Claude Code effectuera automatiquement les étapes suivantes :

Étape	Action	Contenu généré
1	Initialiser le projet	package.json、tsconfig.json、remotion.config.ts
2	Créer la structure de répertoires	src/compositions、src/components、src/assets
3	Générer les composants Scene	Intro.tsx、FeaturesScene.tsx、StatsScene.tsx、Outro.tsx
4	Générer les composants communs	TechCard.tsx、AnimatedCounter.tsx、CodeSnippet.tsx
5	Enregistrer la composition	Terminez l'assemblage de toutes les scènes dans Root.tsx

Plus d’exemples

Exemple 1 : Animation de croissance d'un nombre

帮我用 Remotion 创建一个 8 秒的视频。背景是深色，画面中央显示一个数字，从 0 逐渐增长到 1,000,000，数字有弹跳动画效果，最后定格时出现"突破百万！"的字样。字体要大，颜色用金黄色。
Claude Code 接到这个指令后会：

Nous pouvons directement laisser l'IA exporter la vidéo pour nous dans Claude :

Vidéo générée :

Exemple 2 : Compte à rebours de lancement de produit

用 Remotion 做一个 15 秒的产品发布倒计时视频。从 10 倒数到 0，每个数字出现时有缩放+透明度的过渡动画，背景用黑色，数字用白色大字体，右上角有"NEW"红色徽章。倒计时结束时全屏出现产品名称"CLAUDE PRO"，字体要震撼。

Vidéo générée :

Points clés :Plus le prompt est spécifique, mieux c'est. Si vous décrivez clairement le moment, les couleurs, les effets et le contenu textuel, Claude Code peut le réussir du premier coup, sans nécessiter d'ajustements répétés.

Comprendre la structure du projet généré

Une fois le projet configuré, la structure des répertoires est la suivante :

hello-example/
├── package.json
├── tsconfig.json
├── remotion.config.ts
└── src/
    ├── index.ts              ← 入口，注册所有 Composition
    ├── Root.tsx              ← 主 Composition，拼接所有场景
    ├── compositions/
    │   ├── Intro.tsx         ← 开场 Logo 动画
    │   ├── ProblemScene.tsx  ← 问题引入场景
    │   ├── FeaturesScene.tsx ← 技术卡片展示
    │   ├── StatsScene.tsx    ← 数据统计场景
    │   └── Outro.tsx         ← 结尾 CTA
    ├── components/
    │   ├── TechCard.tsx      ← 单个技术卡片
    │   ├── AnimatedCounter.tsx ← 数字滚动
    │   └── CodeSnippet.tsx   ← 代码块动画
    └── assets/
        ├── colors.ts         ← 品牌色常量
        └── logo.svg

Explication des fichiers principaux

Root.tsxC'est le point d'entrée de toute la vidéo, où toutes les scènes sont assemblées dans l'ordre chronologique :

Aperçu de la structure de Root.tsx

import "./index.css";
import { Composition } from "remotion";
import { HelloExample } from "./Composition";

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

Le composant vidéo principal, utilisant Series pour assembler les scènes dans l'ordre :

const MainVideo = () => {
  return (
    <Series>
      <Series.Sequence durationInFrames={90}>   {/* 3秒 */}
        <Intro />
      </Series.Sequence>
      <Series.Sequence durationInFrames={210}>  {/* 7秒 */}
        <FeaturesScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={450}>  {/* 15秒 */}
        <StatsScene />
      </Series.Sequence>
      <Series.Sequence durationInFrames={300}>  {/* 10秒 */}
        <Outro />
      </Series.Sequence>
    </Series>
  );
};

Installation des dépendances et prévisualisation

Une fois que Claude Code a généré le code, installez les dépendances selon ses invites :

npm install

Lancez Remotion Studio pour prévisualiser l'effet vidéo :

npx remotion studio

> [email protected] studio
> remotion studio

Remotion Studio running at http://localhost:3000

Le navigateur s'ouvrira automatiquement surhttp://localhost:3000, et vous pouvez faire glisser la timeline pour prévisualiser en temps réel l'effet de chaque image.

Si une animation dans une scène semble trop rapide ou trop lente pendant la prévisualisation, dites simplement à Claude Code : « L'animation d'entrée des cartes dans la scène 2 est trop rapide, augmentez le délai », et il localisera le code correspondant et le modifiera.

Itérer avec Claude Code pour les ajustements

Pendant la prévisualisation dans Remotion Studio, si vous rencontrez des problèmes, vous pouvez les décrire directement en langage naturel dans Claude Code sans modifier manuellement le code.

Scénarios d'ajustement courants

Description du problème	Comment le dire à Claude Code
Animation des cartes trop rapide	Réduisez la raideur du ressort des cartes dans FeaturesScene à 80
La couleur d'arrière-plan est incorrecte	Changez la couleur d'arrière-plan de toutes les scènes en #0d1117
Le compteur de nombres n'est pas fluide	Utilisez l'accélération easeOutCubic pour AnimatedCounter dans StatsScene
Vous voulez ajouter une scène	Ajoutez une scène de 10 secondes après StatsScene qui met en avant la fonctionnalité d'instance en ligne
La police du texte est trop petite	Modifiez la police du titre principal dans Intro.tsx à 96px

Décrivez le problème directement dans le terminal Claude Code, et il trouvera le fichier correspondant et le modifiera. Une fois modifié, Remotion Studio rechargera automatiquement à chaud.

Rendu et exportation de la vidéo finale

Une fois satisfait du résultat, effectuez son rendu dans un fichier MP4 :

Commande de rendu

npx remotion render \
src/index.ts \ # Fichier d'entrée
ExamplePromo \ # ID de composition, cohérent avec Root.tsx
out/example-promo.mp4 \ # Chemin de sortie
--codec=h264 \ # Format d'encodage, meilleure compatibilité
--width=1920 \ # Largeur de sortie
--height=1080 # Hauteur de sortie

Rendering ExamplePromo (1800 frames)
Progress: ████████████████████ 100%
Rendered in 2m 34s → out/example-promo.mp4

Bonnes pratiques Remotion : Aider l'IA à faire mieux

La vitesse de rendu dépend de la complexité de la scène et des performances de la machine. Si la vidéo est longue et comporte de nombreux effets, vous pouvez ajouter--concurrency=4le paramètre pour activer le rendu parallèle multithreadé, ce qui peut accélérer de 3 à 4 fois.

En utilisation réelle, il y a quelques astuces qui peuvent grandement améliorer la qualité de vos vidéos. Ajouter ces instructions à votre prompt fera une différence notable :

🎬 Fréquence d'images et taille

Indiquez à Claude Code la plateforme que vous ciblez : Douyin utilise1080×1920 écran vertical; Bilibili utilise1920×1080 écran horizontal, WeChat utilise1:1 carré。
Pour la fréquence d'images (fps), il est recommandé d'utiliser30fps(fluide) ou60fps(ultra-fluide, taille de fichier plus grande).

🎞 Rythme d'animation

Utilisez laspring()fonction pour les animations à ressort, qui est 10 fois plus naturelle que les animations linéaires. Dans le prompt, dites "use spring easing effects."
Lorsque le texte apparaît caractère par caractère, demandez à Claude d'utiliser "stagger delay," avec chaque caractère apparaissant à quelques images d'intervalle.
Ajoutez 0.5 seconds de fondu d'entrée et fondu de sortie au début et à la fin de la vidéo pour un rendu plus professionnel.

🎨 Texture visuelle

N'utilisez pas de couleur unie pour l'arrière-plan ; demandez à Claude d'utiliser des dégradés ou des textures de grille pour améliorer instantanément la texture.
Lors de l'ajout de sous-titres, ajoutez untext-shadowau texte ; le texte blanc est plus clair sur les arrière-plans sombres.
Pour les graphiques de données, utilisez le@remotion/motion-blurplugin, qui ajoute un effet de flou pendant le mouvement, ce qui donne l'impression d'une prise de vue cinématographique.

⚡ Efficacité de rendu

Pendant le développement, utiliseznpx remotion previewl'aperçu, et ne faites le rendu/l'export que lorsque vous êtes satisfait, ce qui fait gagner du temps.
Si la vidéo est très longue, demandez à Claude d'activer--concurrencyle paramètre de rendu parallèle, ce qui le rend plusieurs fois plus rapide.
Pour les ressources d'images et de polices, utilisezstaticFile()des références pour éviter les erreurs de chemin.

Questions fréquentes

Claude Code n'a pas lu la compétence

Si le code généré ne respecte pas la spécification remotion-best-practices, cela signifie que la compétence n'a pas été lue correctement.

Ajoutez explicitement cette phrase au début du prompt :

Forcer la lecture de la compétence

Avant d'écrire du code, lisez le remotion-best-practices compétence fichier complètement.

Erreur de démarrage de Remotion Studio

Une cause fréquente est que la version de Node.js est trop ancienne. Vérifiez et mettez à niveau :

Mettre à niveau Node.js

# Utiliser nvm pour passer à Node.js 20
nvm install 20
nvm use 20

L'animation spring() n'affiche que la première image

C'est parce queframe - delaylorsque la valeur est négative, spring renvoie 0.

Ajoutez une protection de clamp :

Correction du problème de frame négative

const scale = spring({
frame: Math.max(0, frame - delay), // S'assurer que la valeur passée n'est pas négative
fps,
config: { damping: 12, stiffness: 180 },
});

Autres extensions