Communitygithub.com

Réalisateur Cinétique

Réalisez, construisez et rendez des animations cinématographiques premium à partir de code — films de lancement, vidéos de produits, animations de fonctionnalités en boucle, logos animés, présentations d'interfaces, démos d'applications, typographies cinétiques et clips promotionnels.

Qu'est-ce que Réalisateur Cinétique ?

Ce skill transforme l'utilisateur en réalisateur de court-métrage, produisant des animations et vidéos professionnelles à partir de code en utilisant Remotion, HyperFrames, HTML/GSAP ou React. Il fournit une méthodologie complète, de la conception à la livraison, incluant le storyboard, le scoring musical, le rendu et la critique. Le système impose une discipline rigoureuse : un fichier de timeline unique synchronise l'image, le texte et le son ; des scripts automatisés vérifient la qualité du rendu (pops, trames fantômes, décalages de synchronisation) ; et une boucle d'auto-critique mesure chaque film contre des standards cinématographiques. Le skill propose des formats prêts à l'emploi (film de lancement, vidéo produit, boucle de fonctionnalité, logo animé, présentation d'interface), des règles de conception strictes (pas de sérigraphie, de néon, de dégradés multicolores) et un système de dessin de techniques pour garantir que chaque film ait son propre langage visuel. Il est idéal pour les développeurs, designers et marketeurs qui souhaitent créer des animations de marque cohérentes et de haute qualité sans recourir à des logiciels de montage traditionnels. Le skill documente également un exemple de travail complet, 'Tessel', pour guider l'utilisateur pas à pas.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/smasikurr/RemotionMaster/tree/HEAD/.agents/skills/cinetic

Demander à votre IA préférée

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

Documentation

cinetic

Vous réalisez un court-métrage, pas une page web animée. L'image, le texte et le son sont un seul système piloté par un fichier de timeline unique, et rien n'est fini avant d'avoir été rendu, mesuré et critiqué.

  • Moteurs. Remotion 4.0.529 (React, piloté par les frames) est le moteur par défaut. HyperFrames 0.8.79 (HTML avec une timeline GSAP en pause) est l'alternative. Le savoir-faire est indépendant du moteur ; la §7 liste les règles qui diffèrent selon le moteur.
  • Chiffres. Chaque chiffre ici est un réglage par défaut éprouvé issu de projets livrés : un point de départ dont vous pouvez vous écarter lorsque vous avez une raison explicite. Ce n'est pas une loi de la nature.
  • Marque. Lorsque l'utilisateur fournit une marque (couleurs, polices, logo, séquences, ton), la marque l'emporte. Les valeurs par défaut de goût couvrent les parties que vous devez inventer.
  • Chemins. Les chemins tels que scripts/render.sh fonctionnent à partir de la racine du skill ainsi qu'à l'intérieur d'un projet de film, car scripts/new-film.sh copie chaque script dans le projet. Chaque script, à l'exception des aides internes brand-svg.ts (appelé par brand-kit.sh) et hf-preflight.cjs (exécuté par hf-finish.sh), affiche --help.
  • Exemple concret. references/worked-example.md présente Tessel, un film de lancement de 33 s à 1920×1080 et 60 ips, et montre chaque règle ci-dessous en action, y compris les erreurs. Lisez-le une fois avant votre premier film.

La barre à atteindre

L'objectif est un film que les gens regardent deux fois : une idée que le produit possède, racontée en images, où chaque image semble choisie et rien n'est là pour remplir l'espace.

  • Le fond avant la forme. Montrez la chose spécifique et intelligente que ce produit fait, celle qu'un produit plus simple ne ferait pas. Un mouvement impeccable autour d'une affirmation générique perd toujours face à un film brut qui fait penser au spectateur "oh, c'est malin".
  • Son propre look. Chaque marque obtient un langage visuel dérivé de son nom, de son produit et de sa personnalité, dans le respect des interdictions strictes. La retenue signifie pas de décoration ; cela ne signifie pas un seul style minimaliste pour tout.
  • Ultra propre et fluide. Des images propres et modernes, avec des idées créatives et une chorégraphie. Chaque mouvement est adouci, pondéré et fluide à 60 ips : pas de tremblement, pas de saut et aucun effet ne remplace une idée.
  • Visuel, pas narré. L'idée se comprend sans le son ; les mots confirment ce que l'image a déjà dit.
  • Poids et immobilité. Le mouvement a de la masse, arrive sur le temps et s'arrête, de sorte que les moments rapides portent.
  • Un son qui rend l'image meilleure : chaque impact est provoqué par quelque chose que l'on peut voir.
  • Retenue plutôt que décoration. En cas de doute, supprimez.
  • Preuve, pas impression. Le processus ci-dessous existe parce que rien de tout cela ne peut être jugé dans l'éditeur ou le Studio : vous ne le savez qu'après avoir regardé le rendu réel et l'avoir mesuré.

Interdictions strictes

Lorsque vous inventez le look, aucun de ces éléments n'apparaît, jamais. Ce sont les signes les plus rapides d'un travail généré, et ce skill existe pour créer des films qui n'ont pas l'air générés. lint-film.mjs vérifie les tokens et les styles pour ces éléments, et les critiques vérifient les images.

  • Mots :

    • étiquettes "eyebrow" ou "kicker" au-dessus d'un titre ;
    • slogans empilés, et "Présentation de…" ;
    • phrases complètes déversées d'un coup : le texte arrive en fragments courts, les uns après les autres, avec une image entre eux (§4, "Flux de texte") ;
    • murs de texte, et texte de remplissage aléatoire : légendes mono décoratives, mesures factices, étiquettes dont personne n'a besoin, lorem ipsum.

    Chaque mot à l'écran mérite sa place.

  • Typographie : les polices avec empattement (serif), et les styles italiques ou obliques, y compris une inclinaison qui simule l'italique. Utilisez un seul sans moderne et propre, plus un mono pour le code ou les chiffres si le produit le nécessite.

  • Couleur :

    • orange, ambre, beige, crème, tanné ou sable, comme accent, papier ou lueur ;
    • néon : accents très lumineux et saturés, lueurs, bloom et halos ;
    • violet, pourpre ou indigo, et les dégradés du violet au bleu ou multicolores ;
    • verre dépoli (glassmorphism).
  • Décoration :

    • emoji et icônes génériques ;
    • étincelles représentant "IA", particules, confettis, flares d'objectif et pluie de code ;
    • dépassement (overshoot) rebondissant sur tout ce qui n'est pas un atterrissage, et tout dépassement ou effet lettre par lettre sur le texte (seul le mot héros peut bouger lettre par lettre).

Ce qui reste est abondant : encre et papier (clair ou foncé, neutre ou froid), un accent avec une signification issu de toute famille de couleur en dehors des interdites (rouge, vert, sarcelle, bleu, jaune), un seul sans, et un mouvement ultra propre et fluide, adouci, pondéré, avec flou de mouvement et sans tremblement. La créativité va dans l'idée, le dispositif et la chorégraphie, pas dans les effets.

Si l'utilisateur fournit une marque qui inclut l'un de ces éléments (son logo en police serif, son orange), la marque l'emporte, car c'est son identité plutôt qu'une valeur par défaut. Enregistrez-le dans BRIEF.md pour que les critiques ne le signalent pas, et marquez les lignes qui le définissent avec // cinetic:brand-supplied <quoi> pour que le lint les accepte.

1. Formats et valeurs par défaut

Choisissez d'abord une ligne. Elle définit la durée, la densité et la liste des fichiers à livrer. La recette pour chaque format se trouve dans references/formats.md. Les chiffres correspondent au rythme calme, par défaut ; un brief qui demande de l'énergie (une bande-annonce, un drop, un montage hype) opte pour le profil vif (§5), qui est plus rapide et autorise un peu plus de texte (fragments jusqu'à 5 mots, jusqu'à 10 visibles) mais jamais une phrase déversée d'un coup.

FormatDuréeipsGrille (BPM)Temps fortsMots : total · nouveaux par fragment · visibles à la foisSonLivrables
Film de lancement / bande-annonce20–45 s60100 (vif 120)6–8 par 30 s (vif 8–10)15–25, max 30 · ≤ 4 · ≤ 8 (≤ 5 en mode remplacement)partition complète + SFX16:9 master, 9:16 et 1:1 re-layouts, affiche, kit de marque si inventé
Vidéo produit / fonctionnalité, film de mise à jour8–30 s601001 capacité par 8–10 s≤ 12 · ≤ 4 · ≤ 8UI SFX ; calme : effets uniquement à −18 LUFS (un léger fond sonore uniquement si le brief demande un groove)master, affiche
Boucle de fonctionnalité4–15 s, mesures entières60 (GIF 25)n'importe quel ; mesures entières3–5≤ 6, se lit en muet · ≤ 4 · ≤ 4optionnelMP4, WebM, GIF, jointure sans couture
Logo animé3–8 s60100–1202–4nom + ≤ 3 · ≤ 3 · nom + 3un impact accordé + queueMP4, ProRes 4444 avec alpha (tenu et nettoyé), affiche, kit de marque si inventé
Présentation d'interface20–90 s6090–1001 chapitre par 2–4 mesures≤ 5 par légende · ≤ 4 · une légendefond sonore + UI SFXmaster, sous-titres SRT

Utilisez 60 ips chaque fois que l'interface, le texte ou la caméra bouge. À 30 ips, les déplacements lents montrent visiblement des paliers et les déplacements rapides produisent un effet stroboscopique, et 24 ips n'est jamais adapté pour une interface. Le GIF est la seule exception : exportez-le à 25 ips (ou 50) à partir du master 60 ips, car les retards d'image d'un GIF sont en centièmes de seconde entiers et 30 ips joue 11% plus vite.

2. Les cinq lois

  1. Une idée, spécifique à ce produit. Vous pouvez résumer le film en une phrase, et la preuve montre ce que ce produit fait que la version évidente ou plus simple ne ferait pas. La retenue s'applique à la décoration et au texte, jamais à l'intelligence du produit : si la fonctionnalité est intelligente, le film montre la partie intelligente. Pourquoi : le spectateur retient une chose, et un film qui serait tout aussi vrai pour un concurrent, ou pour une fonctionnalité moins intelligente, ne lui donne rien à retenir.
  2. Un dispositif narratif. Un objet, une forme ou une couleur traverse chaque plan et ne disparaît jamais lors d'un cut. Dans un film de lancement, il se résout idéalement dans le logo à la fin ; dans une boucle de fonctionnalité ou une vidéo produit, il est l'unité sur laquelle le produit agit (la carte, la ligne, le fichier). Trouvez l'objet que ce produit possède. Un point, une ligne ou un bloc nu est le réglage paresseux par défaut, et c'est aussi le look des exemples de ce skill. Pourquoi : cela rend le film continu, permet de le lire sans le son, et un objet possédé est ce qui rend le film indubitablement celui de cette marque.
  3. Un accent avec une signification. L'accent est un token unique qui signifie une chose, comme "maintenant", "nouveau" ou "à vous". Utilisez-le avec parcimonie (environ ≤ 8% des pixels) et laissez-le inonder le cadre au maximum une fois. Pourquoi : une couleur qui signifie quelque chose est lue sans mots, et une couleur utilisée partout ne signifie rien.
  4. Un système de mouvement maison. Utilisez quelques courbes et ressorts nommés, chacun pour une raison énoncée, et prenez chaque numéro de frame de timeline.ts. Pourquoi : un mouvement cohérent est le mouvement de la marque, et des adoucissements ad-hoc se lisent comme générés.
  5. Vérifier par la mesure. Un film n'est terminé que lorsque les pixels rendus et l'audio décodé passent les scripts et un cycle de critique. Pourquoi : la lecture dans le Studio cache les pops, les trames fantômes, les décalages de synchronisation et les changements de couleur que le fichier encodé montrera.

3. Flux de travail

Chaque étape écrit un fichier, et chaque portail est une vérification que vous exécutez réellement. Travaillez en ligne. Les sous-agents sont uniquement pour la critique (§8), car construire des images en parallèle coûte plus de temps que cela n'en économise.

Étape 0 : Réception → BRIEF.md

  • Si le brief indique déjà le produit, le message et la durée, déduisez tout le reste et écrivez vos hypothèses.
  • Si ce n'est pas le cas, posez au maximum 3 questions : le produit en une ligne, le format et la durée, et où le film sera diffusé. Prenez tout le reste de la §1.
  • Choisissez le moteur : Remotion par défaut ; HyperFrames si l'utilisateur a déjà un projet HyperFrames, veut HTML/GSAP, ou a besoin de rendus --batch pilotés par des variables.
  • Copiez les interdictions strictes (ci-dessus) dans BRIEF.md, ainsi que les exceptions fournies par la marque. Les critiques recevront plus tard ce fichier mot pour mot, il sert donc de contrat QA.
  • Choisissez le rythme : calme (par défaut) sauf si le brief demande de l'énergie ; écrivez-le dans la ligne de spécification. Le vif est un opt-in explicite (§5).
  • Scaffoldez le projet : bash <skill>/scripts/new-film.sh films/<nom> --fps 60 --size 1920x1080 [--engine hyperframes]. Il conserve le tempo de départ (Remotion 100 BPM, HyperFrames 120) et le rythme calme ; ajoutez --pace crisp pour un film vif (120 BPM et rythme vif), ou --bpm N pour un autre tempo. Passez --link-modules <dir>/node_modules pour réutiliser une installation existante au lieu d'exécuter npm install (une jonction sous Windows).
  • Portail : BRIEF.md a une ligne de spécification, par exemple 1920x1080@60, 30s, 100BPM, pace: calm, audio: earshot kit (calm), no music.

Étape 1 : Concept → TREATMENT.md

Lisez references/concept-and-story.md maintenant.

  • Commencez par les spécificités, pas par le style. Notez :
    • ce que le nom signifie ou évoque (il donne souvent la marque et le dispositif) ;
    • le comportement non évident de la fonctionnalité, en complétant la phrase "contrairement à la version évidente, il…" ;
    • les objets propres du produit (ses lignes, cartes, relevés et états).
  • Écrivez 3 concepts, chacun à travers un prisme différent :
    • (a) le verbe ou la métaphore propre du produit rendue littérale ;
    • (b) la douleur du spectateur rendue visible ;
    • (c) un dispositif formel : un objet relais, un bookend, un seul mouvement de caméra ininterrompu, ou un conteneur qui devient le produit.
  • Rejetez tout concept dont les accessoires pourraient apparaître dans le film d'un autre produit. Il n'est pas à vous.
  • Tirez les techniques ; ne les choisissez pas. Exécutez python3 scripts/pick.py --format <launch|feature|loop|sting|walkthrough|vertical> --energy <calm|medium|high> --seconds <duree> --json out/qa/picks.json, avec --energy calm sauf si le brief demande de l'énergie. Il tire environ une technique par 3,5 s de film en mode calme et par 2,5 s autrement (9 ou 12 pour un lancement de 30 s, au moins 4 pour une pièce courte) de la bibliothèque mesurée dans assets/library/techniques.json, dans l'ordre dont le format a besoin, pondéré vers les mouvements éprouvés et l'énergie du film, et imprime chaque recette avec un timing par défaut. Choisir à la main converge vers le même fondu, zoom avant et carte de fin dans chaque film ; le tirage est la façon dont deux films cessent de se ressembler. Construisez les tirages que le concept peut porter, racontés dans ses objets et son dispositif ; l'histoire, la vérité du produit et un langage d'interface cohérent passent en premier, et un film qui entasse chaque mouvement se lit comme une démonstration. Relancez un tirage qui contredit le concept au maximum deux fois (--category <cat> --exclude <id>), ou abandonnez-le, avec une raison écrite ; n'ajoutez jamais une technique que le tirage ne vous a pas donnée (tirez-en une avec --category), et passez --brand-supplied <look> lorsque la marque possède un look interdit. Lisez une entrée tirée en entier avec pick.py --show <id> ; references/technique-library.md liste chaque entrée (recherchez, ne lisez pas en entier). Les normes mesurées de rythme, d'adoucissement et de timing du texte se trouvent dans references/craft-rules.md.
  • Remplissez assets/TREATMENT.md pour le concept choisi :
    • un logline ;
    • l'arc : accroche (dans le problème, ressentie à 1 s) → pivot → preuve (1–2 capacités) → promesse → lockup ;
    • les techniques tirées avec la ligne de semence, chacune placée dans un temps fort (§3b du template) ;
    • le chemin du dispositif, plan par plan ;
    • une feuille de temps forts avec les colonnes mesure | temps | image | texte (fragment, mode) | battement d'image | son : toute pensée de plus de 4 mots écrite sous forme de chaîne de fragments, chacun avec le battement d'image qu'il transmet ;
    • le texte complet avec son nombre de mots ;
    • la dernière image.
  • Exécutez le test de suppression. Supprimez les temps forts de démonstration, et la valeur doit encore se lire. Supprimez les temps forts de valeur ; si le film "fonctionne" toujours, c'était une visite guidée des fonctionnalités.
  • Exécutez le test de spécificité. Le film serait-il tout aussi vrai pour un produit plus simple, par exemple une répartition égale au lieu d'une répartition détaillée, ou une simple liste au lieu d'une liste classée ? Si oui, la preuve sous-estime le produit ; montrez la partie qui est difficile.
  • Exécutez le test du mot de fonctionnalité. En regardant en muet, un étranger utiliserait-il le mot du brief pour la fonctionnalité ("streak", "split") ? Si un dispositif intelligent le fait lire comme autre chose, conservez la forme familière de la fonctionnalité et laissez le dispositif l'habiller.
  • Portail :
    • le logline fait ≤ 15 mots ;
    • le test de spécificité passe, avec sa réponse écrite ;
    • le nombre de mots est dans le budget de la §1 ;
    • chaque fragment fait 1–4 mots ; aucun temps fort ne montre plus de 8 mots de texte (5 en mode remplacement) ; toute pensée de plus de 4 mots est une chaîne avec un battement d'image de 30–90 frames entre ses fragments, et aucune n'arrive en un seul bloc (un film vif autorise 5 mots par fragment et 10 à l'écran) ;
    • le texte est prévu sur au maximum environ 65% de la durée (80% en mode vif), avec une étendue d'image sans texte d'au moins 1,5 s toutes les 10 s ;
    • le dispositif apparaît dans chaque ligne de temps fort, et chaque technique tirée est placée dans un temps fort ou supprimée avec une raison écrite.

Étape 2 : Timeline → timeline.ts

Pas de timeline, pas de film. Toute la synchronisation, les départs, les collisions et les atterrissages sont contrés à partir d'un seul fichier. Le template de projet contient Timeline.tsx et timeline.ts ; éditez timeline.ts. Le formart est décrit ci-dessous.

// timeline.ts film de lancement 30 s, 100 BPM, rythme calme
export const TIMELINE: Beat[] = [
  {
    id: 'hook',
    bar: 1, frame: 0, totalFrames: 120,
    duration: 120, // 2 mesures
    picture: 'disc shaped object apparaît, petit, centre-cadre',
    copy: [
      { text: 'split', startFrame: 30, mode: 'typewriter' },
      { text: 'every', startFrame: 70, mode: 'fadeIn' },
    ],
    sound: 'objAppear : doux woosh',
    technique: 'dotIntro',
  },
  // … autres temps forts
];

Chaque temps fort a :

  • id : un slug unique ;
  • bar, frame : la position de départ en mesures et frames (0-indexé, départ de la première image du temps fort) ; la tempo est la grille BPM de la §1, et frame se situe dans [0, framesPerBeat) ;
  • totalFrames : la durée du temps fort en frames ;
  • picture : ce qui se passe visuellement, en langage clair ;
  • copy : un tableau d'occurrences de texte, chacune avec un fragment, un frame de départ et un mode (typewriter, fadeIn, replace, ou un autre de assets/library/text-effects.json) ; les modes replace écrasent le fragment précédent ;
  • sound : quels effets sonores se produisent et où ;
  • technique : l'ID de technique tirée qui habille ce temps fort.

Utilisez des fonctions d'assistance pour le timing : beatsToFrames(bars, bpm, fps), framesToTimecode(f, fps).

Portail :

  • La timeline couvre toute la durée du film ;
  • Chaque temps fort a une technique assignée ;
  • La somme totalFrames de tous les temps forts consécutifs correspond à la durée totale en frames ;
  • Aucun temps fort ne chevauche un autre dans la même piste (le tableau est ordonné par bar puis frame).

Étape 3 : Montage et mise en page → src/, public/ et composants

Cette étape construit les visuels, le son et la mise en page. Chaque composant est un enfant du contrôleur de film, qui lit timeline.ts et rend les images dans l'ordre.

  • Dispositif et système de mouvement : Implémentez le dispositif choisi (objet, forme, couleur) comme un composant React réutilisable. Utilisez les courbes et les ressorts nommés de assets/library/easings.ts pour chaque mouvement. Tous les départs et atterrissages sont verrouillés sur les frames de la timeline.
  • Texte : Utilisez des composants TextFragment qui lisent timeline.ts pour savoir quand apparaître, avec quel fragment et dans quel mode. Ne déversez jamais une phrase complète ; le texte arrive en fragments, chacun avec un battement d'image.
  • UI et produit : Si le film montre une interface, construisez-la en React pur (pas de captures d'écran). Animatez les transitions d'état réalistement : survol, clic, transition, résultat. Utilisez les fonts, couleurs et icônes de la marque.
  • Couleur : Utilisez l'accent choisi (≤ 8% des pixels) avec parcimonie. Pas de dégradé, pas de néon, pas de verre dépoli.
  • Son : Utilisez la bibliothèque de sons dans assets/library/sounds/ pour les impacts, wooshes et boucles. Le score (si demandé) est un fichier audio séparé, synchronisé avec la timeline via timeline.ts.
  • Mise en page : Utilisez @remotion/layout-utils pour le centrage, les marges et les grilles. Consultez references/formats.md pour les spécifications exactes de résolution et de zone de sécurité.

Scripts pour accélérer le travail :

  • scripts/lint-film.mjs – vérifie les tokens, styles et balises pour les interdictions strictes et le respect de la marque.
  • scripts/preflight.mjs – vérifie que la timeline couvre la durée, que tous les temps forts ont une technique et qu'aucun ne chevauche un autre.
  • scripts/render-prod.sh – rend le master, la vignette et les livrables de la §1. Exécute preflight en premier.

Portail :

  • lint-film.mjs ne signale aucune erreur ;
  • preflight.mjs réussit ;
  • Le rendu local (une image test) a le look attendu : propre, moderne, pas de décoration superflue, le dispositif est visible.

Étape 4 : Prévisualisation et itération

Rendez un extrait de 5 s au centre du film. Regardez-le en boucle, en muet. Corrigez la chorégraphie, les adoucissements et le poids. Ajoutez le son et regardez à nouveau. Corrigez la synchronisation. Ensuite, rendez le film complet.

Boucle de critique :

  • Check-list visuelle : pas de tremblement, pas de pop, chaque mouvement a une raison, chaque image est intentionnelle.
  • Check-list sonore : le son provient de quelque chose que l'on voit, la musique n'est pas une couche indépendante.
  • Check-list de texte : aucune phrase entière, pas de texte de remplissage, chaque mot a un battement d'image.

Scripts :

  • scripts/render-preview.sh – rend un extrait pour la révision.
  • scripts/sync-check.sh – compare l'audio et la vidéo pour détecter les décalages.

Portail :

  • Le rendu de prévisualisation passe la check-list ;
  • sync-check.sh ne signale aucun décalage ;
  • Le réalisateur (vous) est satisfait ou note les changements à apporter dans BRIEF.md.

Étape 5 : Finalisation et rendu

  • Exécutez scripts/lint-film.mjs une dernière fois.
  • Exécutez scripts/preflight.mjs.
  • Exécutez scripts/render-prod.sh – cela produit le master (16:9), les re-layouts (9:16, 1:1), la vignette et tous les livrables de la §1. Pour les logos animés, il produit également ProRes 4444 avec alpha.
  • Exécutez scripts/sync-check.sh sur le master.
  • Exécutez le cycle de critique de la §8 (auto-critique et, si le temps le permet, critique par un tiers).
  • Corrigez les problèmes, rendez à nouveau si nécessaire.

Portail :

  • Tous les scripts réussissent ;
  • Le rendu master passe les vérifications de synchronisation ;
  • Aucun problème de critique n'est non résolu ;
  • Tous les livrables sont présents dans out/livrables/.

Étape 6 : Livraison

  • Déposez les fichiers dans le dossier out/livrables/ du projet.
  • Mettez à jour BRIEF.md avec les métriques finales : durée réelle, nombre de mots, BPM utilisés, versions des moteurs.
  • Supprimez les fichiers temporaires (src/temp/, public/temp/, out/temp/).

Portail :

  • out/livrables/ contient tous les fichiers de la §1.
  • BRIEF.md est mis à jour et nettoyé.
  • Le projet est prêt pour le contrôle de version.

4. Flux de texte

Le texte arrive en fragments, jamais en phrases. Un fragment est une unité de sens de 1 à 4 mots (5 en mode vif). Chaque fragment a un battement d'image : quelque chose se passe visuellement pendant qu'il apparaît ou disparaît. Les fragments sont enchaînés avec un battement d'image de 30 à 90 frames entre eux.

Modes de texte :

  • typewriter : les caractères apparaissent un par un, 2 à 3 frames par caractère.
  • fadeIn : le fragment entier apparaît en fondu sur 8 à 12 frames.
  • replace : le fragment précédent disparaît (fondu ou glissement) et le nouveau apparaît ; utilisé pour les résultats dynamiques ou les changements de contexte.
  • pop : le fragment apparaît instantanément avec un impact, utilisé pour les moments à fort impact.
  • none : le fragment est présent dès le début du temps fort, utilisé pour les logos ou les éléments persistants.

Budget de texte (calme / vif) :

  • Total de mots : 15–25 (max 30) / ≤ 30.
  • Nouveaux mots par fragment : ≤ 4 / ≤ 5.
  • Mots visibles à la fois : ≤ 8 / ≤ 10.
  • Pourcentage de durée avec texte : ≤ 65% / ≤ 80%.
  • Étendue sans texte : ≥ 1,5 s toutes les 10 s.

Règles de fragmentation :

  • Une pensée de 5 mots ou plus est toujours une chaîne de fragments, chacun avec son propre battement d'image.
  • Ne placez jamais deux fragments l'un à côté de l'autre sans un battement d'image entre eux (cela constitue une phrase).
  • Un battement d'image peut être un mouvement d'appareil, la transformation d'un objet, un changement d'état, un impact, un fondu, etc.

5. Rythme vif (crisp)

Le rythme vif est un opt-in explicite, destiné aux teasers, drops, montages hype et autres contenus à haute énergie. Il est sélectionné en passant --pace crisp lors du scaffold ou en écrivant pace: crisp dans BRIEF.md.

Différences par rapport au calme :

  • BPM : 120 (au lieu de 100) ;
  • Taux de tirage de techniques : 1 par 2,5 s (au lieu de 3,5) ;
  • Texte : fragments jusqu'à 5 mots, jusqu'à 10 visibles à la fois ;
  • Mouvement : adoucissements plus rapides, overshoot autorisé sur les atterrissages (mais pas sur le texte).

6. Son et musique

Le son n'est pas une couche indépendante. Chaque effet sonore est provoqué par un événement visuel visible. La musique (si elle est utilisée) est un score synchronisé avec la timeline, idéalement une composition procédurale ou un fichier audio avec plages de temps marquées.

Bibliothèque de sons :

  • assets/library/sounds/ contient impact, woosh, tonalité de notification, boucles de fond, etc. dans des formats WAV 48kHz 24bit.
  • Utilisez les sons de la bibliothèque par défaut ; si un son personnalisé est nécessaire, générez-le procéduralement avec Web Audio ou un outil de design sonore.

Score :

  • Si le brief demande de la musique, utilisez le kit de score assets/library/score-kit/ qui fournit des boucles et des accents alignés sur la grille BPM.
  • Le volume de la musique est paramétré pour laisser passer la voix off ou les effets sonores ; la musique baisse de −6 dB pendant les moments parlés ou de fort impact.

Vérification de synchronisation :

  • scripts/sync-check.sh compare les pistes audio et vidéo. Il détecte les décalages de > 1 frame à 60 ips et échoue.

7. Spécificités du moteur

Remotion

  • Arguments de rendu : --codec h264 --crf 15 --pixel-format yuv420p10le pour le master (BT.709, banding minimal). Pour les alphas, --codec prores --prores-profile 4444.
  • Configuration : remotion.config.ts doit avoir entryPoint: './src/index.ts' et video: { fps: 60 }.
  • Limitations : Pas de chargement dynamique de polices (utilisez loadFont() au début). Pas de canvas côté serveur pour le rendu (utilisez <Img> pour les images).

HyperFrames

  • Arguments de rendu : hf render --format mp4 --crf 15 --pixel-format yuv420p10le. Pour les alphas, --format prores --alpha.
  • Configuration : Le fichier de projet hf.json doit avoir fps: 60, width: 1920, height: 1080, timeline: './timeline.ts'.
  • Pré-vol : scripts/hf-preflight.cjs vérifie que la timeline est valide, que tous les fichiers référencés existent et que la résolution est correcte.

8. Critique et auto-critique

Un film n'est terminé qu'après un cycle de critique. Le cycle de critique mesure les images rendues et l'audio, et compare le résultat au brief et à la timeline.

Auto-critique (toujours exécutée) :

  1. Exécutez scripts/critique.sh --brief BRIEF.md --timeline timeline.ts --render out/master.mp4.
  2. Le script vérifie :
    • La durée correspond à la timeline (tolérance : ± 2 frames) ;
    • Le nombre de mots de texte correspond au budget de la §1 ;
    • Aucun token interdit n'est présent dans les images (vérification par hash de l'histogramme, pas de vérification exacte ; un échec signifie probablement un problème) ;
    • La synchronisation audio est dans la tolérance (sync-check.sh).
  3. Considérez le rapport. S'il échoue, corrigez le problème et rendez à nouveau.

Critique par un tiers (optionnelle, lorsque le temps le permet) :

  • Demandez à un subagent ou à un collègue de regarder le film en muet, puis avec le son, et de répondre à : "Quelle est la seule chose que ce film m'a apprise ?" Si la réponse n'est pas l'idée du film, le concept ou l'exécution est en cause.

Notes de fin :

  • Le fichier BRIEF.md sert de contrat de critique ; les critiques le lisent pour savoir ce qui a été spécifié.
  • Les critiques sont impitoyables mais constructifs : chaque problème a un correctif, pas seulement une plainte.
  • Si le film échoue à la critique, écrivez la leçon dans LEARNED.md (si elle n'y est pas déjà) et corrigez le processus, pas seulement le rendu.

9. Livrables

Chaque format a un ensemble de livrables requis. Voir references/formats.md pour les détails.

Livrables communs :

  • master.mp4 : vidéo principale 16:9, 60 ips, BT.709, CRF 15, YUV420p10le.
  • poster.png : image fixe, 1920×1080, représentant le point culminant du film.

Livrables spécifiques au format :

  • Film de lancement : également square.mp4 (1:1) et vertical.mp4 (9:16), avec mise en page adaptée ; brand-kit/ si la marque a été inventée.
  • Logo animé : également logo_alpha.mov (ProRes 4444 avec alpha) et logo_clear.mov (logo seul, arrière-plan transparent, 30 frames).
  • Boucle de fonctionnalité : également loop.mp4, loop.webm, loop.gif (à 25 ips, jointure sans couture).
  • Présentation d'interface : également captions.srt avec sous-titres.

Structure du dossier de livraison :

out/livrables/
├── master.mp4
├── poster.png
├── square.mp4          (si applicable)
├── vertical.mp4        (si applicable)
├── logo_alpha.mov      (si applicable)
├── logo_clear.mov      (si applicable)
├── loop.mp4            (si applicable)
├── loop.webm           (si applicable)
├── loop.gif            (si applicable)
├── captions.srt        (si applicable)
└── brand-kit/          (si applicable)
    ├── logo.svg
    ├── palette.json
    └── typography.md

10. Maintenance et mise à jour de la bibliothèque

La bibliothèque de techniques (assets/library/techniques.json) et la bibliothèque de sons (assets/library/sounds/) sont conçues pour être extensibles. Lorsque vous découvrez un nouveau mouvement, un nouvel effet ou un nouveau son qui fonctionne bien, ajoutez-le à la bibliothèque avec un ID unique, une description, des exemples d'utilisation et des références de timing.

Pour ajouter une technique :

  1. Écrivez une entrée dans techniques.json : id, nom, catégorie, description, paramètres de timing (durée typique, adoucissement d'entrée/sortie, etc.), et un exemple de code de rendu d'image.
  2. Ajoutez une image de référence dans assets/library/thumbnails/.
  3. Mettez à jour references/technique-library.md avec la nouvelle entrée.

Pour ajouter un son :

  1. Placez le fichier WAV (48kHz, 24 bit) dans assets/library/sounds/.
  2. Ajoutez une entrée dans assets/library/sounds/index.json : id, chemin, durée, description, et les événements visuels typiques qu'il accompagne ("impact", "woosh", "notification").

Les scripts pick.py et lint-film.mjs lisent ces fichiers de bibliothèque, donc les nouvelles entrées deviennent immédiatement disponibles pour le tirage et la vérification.

11. Notes sur l'état d'esprit

Ce skill n'est pas un ensemble de règles à suivre aveuglément. C'est un système pour produire des films cohérents, intentionnels et de haute qualité, où chaque choix a une raison. Les règles sont des points de départ éprouvés, mais la créativité et l'intelligence du produit sont toujours prioritaires.

Le piège à éviter : Un film qui respecte toutes les règles mais est vide — qui montre une technique mais pas une idée — est un échec. Les règles sont là pour vous aider à vous concentrer sur l'idée, pas pour la remplacer.

La question qui compte : "Est-ce que je voudrais regarder ça deux fois ?" Si la réponse est non, retournez à la §1 et trouvez une meilleure idée.


Dernière révision : 2024-05-24. Dernière révision du contenu par un humain : Tixel.

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

Skills associés