Configuration Remotion

Que fait Configuration Remotion ?

Vous créez un nouveau projet Remotion et le configurez de manière à ce que le reste du workflow soit "il suffit de demander à Claude". C'est la configuration unique de l'environnement. À faire une fois par projet ; ensuite remotion-compose et remotion-render passent directement à la boucle créative.

Déclenchez cette compétence sans hésiter. Si l'utilisateur dit quoi que ce soit à propos de créer des vidéos avec Claude – "configurer Remotion", "créer un projet Remotion", "je veux créer des vidéos produit avec Claude", "démarrer un projet vidéo" – exécutez cette compétence.

Étape 1 – Vérifier la chaîne d'outils

Remotion effectue le rendu avec Chromium sans tête, vérifiez donc Node avant de générer le projet :

node --version   # besoin de >= 16 ; privilégiez une version LTS active

Si Node est plus ancien que la version 16, arrêtez-vous et demandez à l'utilisateur de mettre à jour (nvm : nvm install --lts && nvm use --lts). Confirmez aussi que npx est disponible (livré avec npm 5.2+).

Étape 2 – Générer le projet

npx create-video@latest

Cette commande est interactive. Recommandez le modèle Blank (Hello World) – c'est la base la plus propre pour les vidéos produit. La CLI demande un répertoire de projet et un gestionnaire de paquets ; laissez l'utilisateur choisir, puis cd dans le nouveau dossier et installez :

cd <nom-du-projet>
npm install

Étape 3 – Installer les Skills Agent Remotion

Pour que Claude Code dispose du contexte des compétences de Remotion dans ce dépôt :

npx remotion skills add remotion

Ceci place les fichiers de compétences agent de Remotion dans le projet. Si la commande n'est pas disponible dans la version installée de Remotion, orientez l'utilisateur vers une version plus récente de @remotion/cli et continuez – c'est un confort, pas une dépendance obligatoire.

Étape 4 – Établir les conventions de dossiers

Standardisez la disposition pour que les compétences suivantes sachent toujours où se trouvent les fichiers :

src/
  Root.tsx              # enregistre chaque <Composition> (le registre d'entrée)
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # un fichier .tsx par vidéo – remotion-compose écrit ici
public/
  assets/               # images, logos, audio – référencés via staticFile()

Créez les dossiers si le modèle ne les a pas créés :

mkdir -p src/compositions public/assets

src/Root.tsx est le registre. Chaque vidéo est une <Composition> enregistrée ici :

// src/Root.tsx
import { Composition } from "remotion";
import { HelloWorld } from "./compositions/HelloWorld";

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

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

Valeurs par défaut raisonnables à enregistrer : 30 fps et 1920x1080 pour les vidéos produit en paysage (1080x1920 pour les réseaux sociaux verticaux), et des durées courtes – 90 images à 30 fps correspondent à 3 secondes, et la plupart des vidéos de démonstration produit se situent entre 15 et 60 secondes (450-1800 images).

Étape 5 – Charger une police Google

Remotion prend nativement en charge Google Fonts pour que le texte soit rendu de manière déterministe. Installez et chargez une fois :

npm install @remotion/google-fonts

// charger près du haut d'un fichier de composition
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// puis utiliser : <div style={{ fontFamily }}>...</div>

loadFont() bloque le rendu jusqu'à ce que la police soit prête, afin que le texte à l'écran n'apparaisse jamais dans un style de repli non stylisé. Choisissez la police qui correspond à la marque – remplacez Inter par Poppins, Roboto, etc.

Étape 6 – Test de fumée de la composition

Écrivez une composition triviale pour prouver que l'environnement effectue le rendu de bout en bout :

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        Ça marche.
      </h1>
    </AbsoluteFill>
  );
};

Assurez-vous qu'elle est enregistrée dans src/Root.tsx (étape 4), puis effectuez le rendu :

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

Le premier rendu télécharge Chromium sans tête (quelques centaines de Mo – prévoyez une attente unique de quelques minutes sur une connexion normale) ; après cela, ce test de 90 images devrait s'exécuter en bien moins d'une minute. Si out/smoke-test.mp4 affiche un titre qui apparaît en fondu, l'environnement est bon. Si le rendu échoue, c'est presque toujours (a) un problème de téléchargement/droits Chromium, (b) la composition non enregistrée dans Root.tsx, ou (c) un problème de version de Node depuis l'étape 1.

Étape 7 – Lancer Remotion Studio pour la prévisualisation

Pour la prévisualisation interactive (parcourir la timeline, rechargement à chaud lors des modifications) :

npx remotion studio

Ceci sert le Studio à l'adresse http://localhost:3000. Le modèle create-video associe également npm run dev à la même chose. Laissez le Studio tourner pendant que vous itérez – les modifications des fichiers de composition se rechargent instantanément.

Livrable

L'utilisateur repart avec un projet Remotion fonctionnel : le dépôt généré avec la disposition src/compositions/ + public/assets/ en place, les compétences agent Remotion installées, une police Google connectée, une composition de test enregistrée, un fichier out/smoke-test.mp4 rendu qui se lit réellement, et Remotion Studio lancé pour la prévisualisation. Rien n'est "configuré" tant que le MP4 du test de fumée n'existe pas et ne se lit pas.

À NE PAS FAIRE

• Ne sautez pas la vérification de Node et ne générez pas quand même – un Node inférieur à 16 échoue au cœur du rendu Chromium avec une erreur confuse, pas au moment de l'installation.
• Ne déclarez pas la configuration terminée sans avoir effectué le rendu du test de fumée ; un projet qui compile mais n'a jamais produit un MP4 n'a pas prouvé que le pipeline Chromium fonctionne.
• Ne placez pas les compositions ou les ressources dans des emplacements ad hoc – les compétences ultérieures (remotion-compose, remotion-render) dépendent de l'existence de src/compositions/ et public/assets/.
• Ne référencez pas les ressources par chemin relatif ou URL ; utilisez staticFile() depuis public/, sinon les rendus fonctionneront en local et échoueront ailleurs.
• N'utilisez pas de polices système ou importées par CSS pour le texte à l'écran – sans loadFont() qui bloque, le texte peut être rendu dans une police de repli sur la machine de rendu.
• Ne choisissez pas un modèle riche en fonctionnalités pour les vidéos produit ; le modèle Blank évite de transporter du code de démonstration que l'utilisateur devra supprimer plus tard.

Barre de qualité

• node --version est >= 16 et a été vérifié avant la génération.
• out/smoke-test.mp4 existe et affiche un titre qui apparaît en fondu.
• Les conventions de dossiers existent exactement comme spécifié, et la composition de test est enregistrée dans src/Root.tsx.
• Le texte est rendu via @remotion/google-fonts avec loadFont(), pas un repli système.
• Remotion Studio se lance sur localhost:3000 et recharge à chaud une modification.

Transition

Une fois que le test de fumée est rendu et que le Studio est opérationnel, dites à l'utilisateur que le projet est prêt et passez la main : "La configuration est terminée. Décrivez la vidéo que vous souhaitez – durée, scènes, couleurs de la marque – et j'écrirai la composition (remotion-compose), puis effectuerai le rendu et itérerai (remotion-render)."