remotion-demo-video

Que fait remotion-demo-video ?

Un workflow distillé pour construire des vidéos promotionnelles / de démonstration / bande-annonce avec Remotion 4.x. Il encode la disposition du projet, les primitives d’animation, les commandes de rendu et les pièges spécifiques qui font perdre du temps à redécouvrir.

Quand utiliser ce skill

Déclenchez-le chaque fois que l’utilisateur souhaite créer, éditer, rendre ou déboguer une vidéo Remotion. En particulier :

• Amorcer un nouveau projet Remotion pour une démo de produit / article / dépôt
• Ajouter une nouvelle scène à un projet Remotion existant
• Assembler des captures d’écran pré-enregistrées en une vidéo soignée avec incrustations, titres, transitions
• Rendu — scène unique, timeline complète, incrustations transparentes (alpha), séquences PNG
• Déboguer des bizarreries spécifiques à Remotion (mauvaise correspondance d’ID de composition, valeurs par défaut désynchronisées, useCurrentFrame retournant des valeurs inattendues dans <Sequence>, erreur EPERM sous Windows lors du nettoyage ffmpeg, etc.)

Comment penser le workflow

Une vidéo Remotion soignée n’est pas « une seule grande timeline que vous rendez en un seul MP4 ». C’est un ensemble de petites scènes, rendues individuellement, puis assemblées dans un éditeur en aval (DaVinci Resolve, Premiere, Final Cut) où vous ajoutez la musique, la voix off et les transitions entre scènes.

C’est la leçon la plus importante de la publication de la promo SimWorld, et ce skill doit pousser l’utilisateur vers ce workflow par défaut. Essayer de tout faire dans Remotion — ajustements de timing finaux, mixage audio, fondus — est pénible et lent ; le faire dans un éditeur est trivial.

Utilisez chaque outil pour ce qu’il fait de mieux

• Remotion est excellent pour : les scènes programmatiques, répétables et paramétriques — titres animés, graphiques basés sur des données, maquettes d’interface utilisateur, tout ce que vous feriez autrement en images clés dans After Effects. La logique de scène vit dans le code ; reconstruire «le même titre avec 30 noms de produit différents » est un simple changement de prop.
• Les éditeurs en aval sont excellents pour : le timing, l’audio, les fondus, l’étalonnage, « allonger cette scène de 1,2 seconde ». Toutes ces choses sont immédiates dans un éditeur et nécessitent une modification de code et un re-rendu dans Remotion.

La boucle

1. Décidez du scénario. Plan séquence par séquence avec les secondes cibles pour chaque séquence. Le total est généralement de 30 à 90 secondes.
2. Mettez en place la coque du projet une fois. theme.ts (palette, polices, fps, dimensions), Root.tsx (registre des compositions), composants partagés (Reveal, ProgressBar, easings).
3. Construisez les scènes une par une. Chaque scène est un composant React <AbsoluteFill> autonome, conçu pour l’état frame 0, avec sa propre <Composition> indépendante afin de pouvoir la rendre seule. Itérez dans Studio (npm run dev) avec le panneau des props ; rendez en MP4 (npm run render:<scene>) quand vous êtes satisfait.
4. Rendez chaque scène finie comme son propre clip — c’est le livrable réel, pas le MP4 de la timeline complète. Les clips par scène se glissent dans la timeline de n’importe quel éditeur. Utilisez --codec=prores --pixel-format=yuva444p10le --prores-profile=4444 pour les clips que vous voulez avec alpha (bandeaux inférieurs, logos à composer sur des captures d’écran).
5. Optionnellement, connectez les scènes dans Main.tsx avec des blocs <Sequence> lisant une constante TIMELINE dans theme.ts. Cela vous donne un rendu prévisualisé de la timeline complète (npm run render) pour vérifier le flux global — mais traitez-le comme une prévisualisation, pas le maître.
6. Assemblez dans DaVinci / Premiere / Final Cut. Déposez les clips de chaque scène sur une piste dans l’ordre, ajustez les poignées de coupe pour un timing exact, ajoutez la musique / voix off / conception sonore, appliquez des transitions entre les scènes (les fondus d’une image sont généralement les meilleurs pour cette esthétique), étalonnez, exportez.

Quand suggérer le rendu Remotion complet

Le rendu de la timeline complète est la bonne sortie UNIQUEMENT lorsque :

• L’utilisateur n’a pas d’éditeur en aval et a besoin d’un livrable unique aujourd’hui.
• La vidéo est totalement silencieuse (pas de musique ni de voix off du tout).
• Il n’y a pas de transition entre scènes plus complexe que des coupures sèches (et même celles-ci sont plus faciles à ajuster dans le code avec l’approche scène par scène).

Sinon, par défaut, recommandez les rendus par scène + assemblage dans un éditeur.

Ce skill regroupe un échafaudage fonctionnel dans scaffold/ — copiez-le comme point de départ pour un nouveau projet, puis lisez les références ci-dessous selon vos besoins.

La boucle de bout en bout (quand l’entrée est un article / un cahier des charges / un dépôt)

C’est le workflow pour lequel ce skill est vraiment conçu. L’utilisateur n’arrive généralement pas en disant « Je veux un titre animé qui dit X ». Il arrive avec un PDF d’article, un cahier des charges de projet, ou un dépôt existant, et la question est « transforme cela en une vidéo de 60 secondes ». Ce skill existe pour rendre cette boucle rapide et gérable.

1. Matériel source        →  PDF d’article / cahier des charges / dépôt existant / README
        ↓
2. Claude analyse        →  extraire les séquences narratives ; identifier ce que
                             chaque séquence doit MONTRER (écran UI, enregistrement
                             d’expérience, graphique, point de vue de l’agent, etc.)
        ↓
3. Claude échafaude        →  code de scène + <VideoPlaceholder slot="..." />
   avec des espaces réservés    dans chaque région visuelle, plus un ASSETS.md
                             listant chaque clip que l’utilisateur doit enregistrer
                             (nom du slot, durée, ce qu’il doit montrer)
        ↓
4. L’utilisateur enregistre les séquences   →  dépose les mp4 dans public/clips/<slot>.mp4
                             correspondant aux noms de slot de l’échafaudage
        ↓
5. Claude remplace        →  remplace <VideoPlaceholder> par
   les espaces réservés par les clips    <OffthreadVideo src={staticFile("clips/<slot>.mp4")}>
        ↓
6. Itérer scène par scène →  npm run render:<scene>, regarder, ajuster le texte /
                             le timing / l’animation, re-rendre. Les modifications
                             côté code sont rapides ; si la séquence doit être
                             réenregistrée, c’est la partie la plus lente de la boucle.
        ↓
7. Assembler dans un éditeur     →  MP4 par scène dans DaVinci / Premiere / FCP,
                             ajouter musique + voix off + transitions
                             entre scènes, exporter.

Étape 2 en détail — analyser le matériel source

Lorsque l’utilisateur remet un article / cahier des charges, faites ceci AVANT d’écrire du code :

1. Extrayez le récit. Quel est l’arc en 3-5 séquences ? (« Problème → notre méthode → résultats clés → impact » est un modèle de départ ; variez-le selon l’article réel.) Le récit guide la liste des scènes.
2. Pour chaque séquence, décidez quoi MONTRER. Le texte animé seul est ennuyeux. Chaque séquence doit avoir un visuel concret — un écran UI, un enregistrement d’expérience, un graphique, une comparaison, un diagramme de système. Faites correspondre les visuels aux affirmations : si l’article prétend « la méthode X est 3× plus rapide », montrez la comparaison côte à côte des temps.
3. Distinguez ce que Remotion génère de ce que l’utilisateur doit enregistrer. Remotion est excellent pour : les titres, les transitions, les graphiques, les maquettes UI, les mises en page, les diagrammes animés. Remotion NE PEUT PAS générer : de véritables enregistrements d’écran du produit de l’utilisateur, des séquences d’expérience, le point de vue de l’agent, rien provenant de l’extérieur du projet. Listez-les comme séquences fournies par l’utilisateur.
4. Esquissez la timeline avant d’échafauder. Séquence par séquence avec des durées cibles totalisant 30 à 90 secondes. Mettez à jour TIMELINE dans theme.ts en conséquence. La durée totale doit être décidée avant la construction des scènes afin que chaque scène connaisse son budget.

Étape 3 en détail — échafauder avec des espaces réservés

La convention de transfert clé de ce skill : les noms de slot. Chaque clip que l’utilisateur doit enregistrer reçoit une chaîne slot stable. L’espace réservé et le clip réel partagent ce nom de slot.

// Pendant l’échafaudage :
<VideoPlaceholder
  slot="agent-loop"
  description="Enregistrement continu de l’agent : marche, échoue, réessaie avec une stratégie mise à jour."
  accent={COLORS.blue}
/>

// Après que l’utilisateur a enregistré public/clips/agent-loop.mp4, remplacez par :
<OffthreadVideo
  src={staticFile("clips/agent-loop.mp4")}
  muted
  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
/>

Rédigez toujours un ASSETS.md à la racine de l’échafaudage (l’échafaudage fournit un modèle). Il liste chaque slot que l’utilisateur doit remplir, avec : le nom du slot (= nom de fichier), ce qu’il doit montrer, la durée cible, la recommandation de rapport hauteur/largeur, et toute note de timing (par exemple, « événement d’échec autour de la marque des 7s »). C’est la source de vérité unique pour la tâche d’enregistrement de l’utilisateur.

Étapes 4-5 en détail — le transfert des ressources

L’utilisateur revient avec des fichiers déposés dans public/clips/. Trois choses à vérifier :

1. Les noms de fichier correspondent exactement aux noms de slot. agent-loop.mp4, pas agent_loop.mp4 ni AgentLoop.mp4.
2. La durée est au moins celle de la scène (ou utilisez <Loop> si elle est plus courte et destinée à être répétée).
3. Le rapport hauteur/largeur est raisonnable — pour les scènes plein écran, correspondre au 1920×1080 de la composition. Pour les cartes dans une grille 2×2, le 4:3 ou le 16:9 fonctionnent ; soyez juste cohérent.

Ensuite, remplacez mécaniquement chaque <VideoPlaceholder> par <OffthreadVideo>. C’est un échange d’une ligne par slot ; aucun changement de logique d’animation. Si l’enregistrement de l’utilisateur est sensible au timing (par exemple, « événement d’échec à 7s »), exposez-le comme une prop de scène afin que les incrustations dépendantes du timing (tampon FAIL, nombre de récompenses) puissent être ajustées sans réenregistrer.

Pourquoi cette boucle est importante pour le skill

Le rôle du skill n’est pas « écrire du code Remotion à la demande » — c’est rendre la boucle du matériel source à la vidéo livrée gérable. Le motif de l’espace réservé est ce qui permet à Claude d’échafauder toute la structure d’une vidéo en une seule passe, puis de remettre un ASSETS.md pour que l’utilisateur sache exactement quoi enregistrer. Sans cela, la boucle s’arrête — l’utilisateur enregistre les mauvaises choses, ou l’échafaudage attend les séquences, ou la structure du code doit être adaptée après coup.

Lorsqu’un utilisateur se présente avec du matériel source, le bon premier geste est généralement :

« Laissez-moi d’abord lire l’article / le cahier des charges. Ensuite, je proposerai un plan scène par scène avec des durées cibles, une liste des clips que vous devrez enregistrer, et j’échafauderai le code avec des espaces réservés afin que vous puissiez commencer à enregistrer pendant que je continue à construire les scènes. »

Démarrage rapide pour un nouveau projet

# 1. Copier l’échafaudage
cp -r <skill-dir>/scaffold ./my-demo
cd my-demo
npm install

# 2. Ouvrir Remotion Studio pour l’édition en direct
npm run dev    # ouvre http://localhost:3000

# 3. Rendre une seule scène pendant l’itération
npm run render:opening

# 4. Rendre la timeline complète quand c’est prêt
npm run render

L’échafaudage comprend une scène fonctionnelle (OpeningTitle), le thème crème-chaud, Reveal + les easings, une ProgressBar, une timeline Main avec espaces réservés, et un package.json avec des scripts de rendu pré-câblés.

Disposition du projet (la forme qui fonctionne)

my-demo/
└── package.json                      # scripts de rendu, hooks de prérendu
└── remotion.config.ts                # valeurs par défaut du codec / format de pixel
└── tsconfig.json
└── public/
    └── assets/                       # logos, images statiques (staticFile("assets/..."))
    └── clips/                        # captures d’écran / sources vidéo
└── scripts/
    └── sync-clips.mjs                # normaliser les clips avant chaque rendu
└── src/
    └── index.ts                      # registerRoot(Root)
    └── Root.tsx                      # registre <Composition> — id, schéma, defaultProps
    └── theme.ts                      # COLORS, FONT_STACK, RADIUS, SHADOWS, TIMELINE
    └── fonts.ts                      # @remotion/google-fonts + local @font-face
    └── Main.tsx                      # compositeur de timeline complète (blocs <Sequence>)
    └── components/
    └   └── Reveal.tsx                # wrapper fondu + montée (delai/duree/montee)
    └   └── Easing.ts                 # EASE_OUT, EASE_IN_OUT (courbes de Bézier)
    └   └── ProgressBar.tsx           # indicateur de stade 4 étapes épinglé en bas
    └   └── VideoPlaceholder.tsx      # carte grise avec étiquette de slot, remplacer par OffthreadVideo plus tard
    └── scenes/
        └── OpeningTitle.tsx          # une scène par fichier, chacune est un <AbsoluteFill>
        └── ProductReveal.tsx
        └── AgentLoop.tsx
        └── ...

Pourquoi cette forme : les scènes sont indépendantes (faciles à rendre seules et à itérer), le langage visuel partagé vit dans theme.ts + components/ pour que l’apparence reste cohérente, et Root.tsx est la source de vérité unique pour ce qui peut être rendu.

Le motif de composition (lisez ceci attentivement)

Chaque scène exporte trois choses :

1. Un schéma zod — définit l’interface du panneau des props dans Remotion Studio (curseurs, listes déroulantes).
2. Une constante *_DEFAULTS — les valeurs consommées par Main.tsx lorsque cette scène est intégrée dans la timeline complète.
3. Le composant React lui-même, typé comme React.FC<Props>.

// src/scenes/ProductReveal.tsx
import { z } from "zod";

export const productRevealSchema = z.object({
  titleSize:     z.number().min(40).max(280),
  subtitleSize:  z.number().min(14).max(80),
  outerPaddingV: z.number().min(0).max(200),
});
export type ProductRevealProps = z.infer<typeof productRevealSchema>;

export const PRODUCT_REVEAL_DEFAULTS: ProductRevealProps = {
  titleSize: 168,
  subtitleSize: 64,
  outerPaddingV: 80,
};

export const ProductReveal: React.FC<ProductRevealProps> = (p) => { ... };

Ensuite, dans Root.tsx, enregistrez-la avec une copie en ligne des valeurs par défaut :

<Composition
  id="ProductReveal"
  component={ProductReveal}
  durationInFrames={120}
  fps={30}
  width={1920}
  height={1080}
  schema={productRevealSchema}
  defaultProps={{
    // ⚠ COPIE EN LIGNE de PRODUCT_REVEAL_DEFAULTS — le bouton
    // "Enregistrer les props par défaut" de Remotion Studio écrit
    // dans cet objet via AST. Maintenez la synchronisation avec la
    // constante exportée ci-dessus.
    titleSize: 168,
    subtitleSize: 64,
    outerPaddingV: 80,
  }}
/>

Pourquoi la duplication : Le bouton « Enregistrer les props par défaut » de Remotion Studio modifie le littéral defaultProps={...} dans Root.tsx via AST. Il ne peut pas réécrire une constante importée. Ainsi, la copie en ligne est celle que Studio modifie, et le *_DEFAULTS exporté est celui que lit Main.tsx. Lorsque Studio écrit de nouvelles valeurs, recopiez-les dans la constante exportée pour que le rendu de la timeline complète les utilise également. C’est le piège #4 dans references/pitfalls.md.

Primitives d’animation (le petit ensemble dont vous avez réellement besoin)

Toute animation dans Remotion est useCurrentFrame() + interpolate(). Il n’y a pas d’horloge interne, pas de « lecture » — chaque image est une fonction pure de frame.

Les cano…

[...tronqué pour la traduction]