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.shfonctionnent à partir de la racine du skill ainsi qu'à l'intérieur d'un projet de film, carscripts/new-film.shcopie chaque script dans le projet. Chaque script, à l'exception des aides internesbrand-svg.ts(appelé parbrand-kit.sh) ethf-preflight.cjs(exécuté parhf-finish.sh), affiche--help. - Exemple concret.
references/worked-example.mdpré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.
| Format | Durée | ips | Grille (BPM) | Temps forts | Mots : total · nouveaux par fragment · visibles à la fois | Son | Livrables |
|---|---|---|---|---|---|---|---|
| Film de lancement / bande-annonce | 20–45 s | 60 | 100 (vif 120) | 6–8 par 30 s (vif 8–10) | 15–25, max 30 · ≤ 4 · ≤ 8 (≤ 5 en mode remplacement) | partition complète + SFX | 16:9 master, 9:16 et 1:1 re-layouts, affiche, kit de marque si inventé |
| Vidéo produit / fonctionnalité, film de mise à jour | 8–30 s | 60 | 100 | 1 capacité par 8–10 s | ≤ 12 · ≤ 4 · ≤ 8 | UI 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ères | 60 (GIF 25) | n'importe quel ; mesures entières | 3–5 | ≤ 6, se lit en muet · ≤ 4 · ≤ 4 | optionnel | MP4, WebM, GIF, jointure sans couture |
| Logo animé | 3–8 s | 60 | 100–120 | 2–4 | nom + ≤ 3 · ≤ 3 · nom + 3 | un impact accordé + queue | MP4, ProRes 4444 avec alpha (tenu et nettoyé), affiche, kit de marque si inventé |
| Présentation d'interface | 20–90 s | 60 | 90–100 | 1 chapitre par 2–4 mesures | ≤ 5 par légende · ≤ 4 · une légende | fond sonore + UI SFX | master, 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
- 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.
- 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.
- 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.
- 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. - 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
--batchpiloté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 crisppour un film vif (120 BPM et rythme vif), ou--bpm Npour un autre tempo. Passez--link-modules <dir>/node_modulespour réutiliser une installation existante au lieu d'exécuternpm install(une jonction sous Windows). - Portail :
BRIEF.mda une ligne de spécification, par exemple1920x1080@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 calmsauf 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 dansassets/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 avecpick.py --show <id>;references/technique-library.mdliste chaque entrée (recherchez, ne lisez pas en entier). Les normes mesurées de rythme, d'adoucissement et de timing du texte se trouvent dansreferences/craft-rules.md. - Remplissez
assets/TREATMENT.mdpour 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, etframese 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 deassets/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
totalFramesde 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
barpuisframe).
É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.tspour chaque mouvement. Tous les départs et atterrissages sont verrouillés sur les frames de la timeline. - Texte : Utilisez des composants
TextFragmentqui lisenttimeline.tspour 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 viatimeline.ts. - Mise en page : Utilisez
@remotion/layout-utilspour le centrage, les marges et les grilles. Consultezreferences/formats.mdpour 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écutepreflighten premier.
Portail :
lint-film.mjsne signale aucune erreur ;preflight.mjsré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.shne 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.mjsune 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.shsur 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.mdavec 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.mdest 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.shcompare 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 yuv420p10lepour le master (BT.709, banding minimal). Pour les alphas,--codec prores --prores-profile 4444. - Configuration :
remotion.config.tsdoit avoirentryPoint: './src/index.ts'etvideo: { 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.jsondoit avoirfps: 60,width: 1920,height: 1080,timeline: './timeline.ts'. - Pré-vol :
scripts/hf-preflight.cjsvé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) :
- Exécutez
scripts/critique.sh --brief BRIEF.md --timeline timeline.ts --render out/master.mp4. - 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).
- 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.mdsert 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) etvertical.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) etlogo_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.srtavec 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 :
- É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. - Ajoutez une image de référence dans
assets/library/thumbnails/. - Mettez à jour
references/technique-library.mdavec la nouvelle entrée.
Pour ajouter un son :
- Placez le fichier WAV (48kHz, 24 bit) dans
assets/library/sounds/. - 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.