Communitygithub.com

walter-io/vibecoding-remotion

Transformez une histoire en vidéo narrative – décomposez-la en séquences avec la pipeline Remotion, concevez un style visuel et des animations procédurales adaptés au thème de chaque plan, et produisez une vidéo 1080p. **Aucun modèle visuel prédéfini : palette, typographie, langage d'animation sont libres selon le thème.** Mots-clés : vidéo narrative, transformer une histoire en vidéo, récit vidéo, vidéo Remotion, vidéo de doublage, vidéo rythmée.

Qu'est-ce que vibecoding-remotion ?

Ce skill permet de transformer un récit écrit en une vidéo narrative 1080p complète, en utilisant la pipeline Remotion. Il guide l'utilisateur à travers cinq étapes ordonnées : analyse du thème pour définir une identité visuelle unique (palette, typographie, rythme d'animation), découpage du récit en segments puis en plans (1 à 2 lignes par plan), génération d'une timeline avec des points de synchronisation, audits automatisés (vérification de la cohérence émotionnelle, absence de ponctuation en fin de ligne, durée minimale des plans, etc.), et enfin rendu avec vérification par échantillonnage d'images clés. Le skill insiste sur le principe fondamental que le style visuel doit toujours servir le thème de l'histoire, sans modèle fixe : chaque projet repart d'une analyse de l'ambiance du récit (nostalgie, action, suspense, conte, etc.) pour dériver ses propres choix esthétiques. Il fournit des scripts réutilisables (gen_assets.py, check_views.py, verify_timeline.py) et des exemples d'animations de groupe (foules, feux d'artifice, lanternes) qui peuvent être adaptés par simple changement de palette. Convient à Claude Code, Cursor, Codex et tout environnement supportant Remotion et Node.js.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add walter-io/vibecoding-remotion

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Remotion – Vidéo narrative à partir d'une histoire

Transformez « une histoire » en une vidéo 1080p finie : lecture complète de l'histoire → extraction de l'identité thématique → conception d'un langage visuel propre à ce thème → découpage en « segments (chapitres) → plans (unités d'image) » → conception de chaque plan avec une scène animée en accord avec l'émotion et l'action → synchronisation rythmée du texte → rendu → contrôle qualité.

Premier principe : le style sert le thème, pas de modèle fixe

La pipeline et la méthodologie sont universelles ; le style visuel doit être redéfini pour chaque thème.

  • Pour chaque nouvelle histoire, commencez par une « analyse de l'identité thématique » : quels sont les mots-clés du récit (nostalgie ? action ? suspense ? conte ? science-fiction ?) → dérivez-en la palette, la typographie, le rythme d'animation, le style des scènes.
  • Exemples (simple inspiration, pas une règle) : ambiance nostalgie → police sérif + blanc cassé/or + lueur douce au ralenti ; ambiance sport → police sans sérif en gras + rouge saturé/noir + cuts rapides et vibrations ; science-fiction → couleurs froides + police chasse fixe + effets de glitch/balayage ; conte → police ronde + couleurs pastel + animations rebondissantes.
  • Ne reproduisez pas le style du projet précédent dans le suivant ; si l'utilisateur ne précise rien, proposez 1 à 2 options de style au choix.

Concept central

  • L'image raconte l'histoire : chaque plan doit correspondre à l'émotion et à l'action du texte qu'il illustre (une phrase sur un tremblement de terre montre une salle de classe qui tremble, une phrase de joie montre une foule qui agite des drapeaux, une phrase sur une file d'attente montre des barrières et une longue queue) – une incohérence (triste avec joyeux) est la pire erreur.
  • Les scènes utilisent des animations procédurales (silhouettes de personnages / formes géométriques + mouvements en sinusoïde déphasés, pilotés trame par trame), pas d'images statiques ; la densité d'animation se règle selon le thème (sujets doux : peu et lent ; sujets dynamiques : beaucoup et rapide).
  • La typographie fait partie de la performance : l'identité de la police, la hiérarchie des tailles, les couleurs d'accentuation des mots-clés découlent toutes du thème.

Pipeline (cinq étapes, ordre fixe)

  1. Déduction du style : mots-clés du thème → palette / identité typographique / rythme d'animation / style des scènes → (si non précisé, proposer à l'utilisateur).
  2. Découpage du récit : diviser selon l'arc narratif en segments (chapitres) → plans (1 à 2 lignes par plan) ; en fin de chaque segment, extraire une courte phrase choc pour la carte de synthèse ; supprimer la ponctuation en fin de ligne (clean_tail() nettoyage générique).
  3. Timeline gen_assets.py → timeline.json (début/fin de plan, mise en page, points de synchronisation ; MIN_SHOT 3,5s pour des coupes lentes, ajustable selon le thème).
  4. Audit + synchronisation check_views.py (vérification des vues, débordements) + verify_timeline.py (ponctuation en fin de ligne = 0, durée minimale de plan ≥ 3,0s, durée de la carte de synthèse, étiquette d'âge – seuils ajustables selon le thème) – si un test échoue, le rendu est interdit → sync-timeline.mjs.
  5. Rendu + contrôle npx remotion render → ffmpeg extrait des images clés pour vérifier (émotion de la scène, hiérarchie du texte, chronologie des animations).

Règles absolues (indépendantes du thème, toujours valables)

  • Aucune ponctuation en fin de ligne (y compris les tirets) : fonction de nettoyage générique + assertion = 0.
  • Correspondance stricte entre l'image et l'émotion du texte ; la modification de la table SHOT_VIEW (découpage des plans) nécessite de relancer l'audit.
  • Dans les séquences imbriquées, l'origine d'animation des sous-composants correspond à la trame de début de leur plan (transmettre startFrame), sinon les animations d'entrée sont silencieusement ignorées.
  • Règles sur les symboles politiques : drapeau national = fond rouge + une grande étoile et quatre petites étoiles, interdiction de tout dessin approximatif.
  • Pour remplacer une voix réelle : déposer un fichier wav et relancer gen_assets pour réorganiser automatiquement la timeline.

Actifs existants (références d'implémentation, réutilisables et adaptables)

templates/ provient du projet finalisé « Chronique des années 90 » (thème nostalgie : police sérif + blanc cassé/or + rythme lent + silhouettes de foules) – c'est une instance de déduction thématique, pas un style par défaut :

  • Squelettes directement réutilisables : gen_assets.py (texte → structure de timeline) / check_views.py (audit des vues) / verify_timeline.py (assertions complètes) / sync-timeline.mjs / fit.ts (retour à la ligne) / beat.ts (tempo).
  • Couche visuelle à réécrire selon le thème : theme.ts (palette, tailles de police) / serif.ts (police) / scenes.tsx (animations de scène) / TitleCard.tsx / Era.tsx / Intro.tsx (mise en page).
  • 8 techniques d'animation de groupe transférables : foule agitant des drapeaux, foule autour d'une télé, salle de classe qui tremble, file d'attente, piétons masqués, poursuite d'un enfant pour le nourrir, feux d'artifice, lanternes (il suffit de changer la palette et le style pour obtenir une nouvelle scène).

Paramètres détaillés

references/spec.md : paramètres complets de l'implémentation de référence ci-dessus (cinq niveaux de taille de police, quatre directions d'entrée, profondeur de champ, durée de l'apparition lente, palette de silhouettes) – le nouveau thème peut ajuster l'échelle en s'y référant, sans recopier les valeurs exactes.

Skills associés