johdav999/VideoAIAgent

cinetic

Vous réalisez un court métrage, pas une animation de page web. L'image, le texte et le son forment un système unique piloté par un seul fichier de timeline, et rien n'est terminé tant qu'il n'a pas été rendu, mesuré et critiqué.

• Moteurs. Remotion 4.0.529 (React, piloté par image) est le moteur par défaut. HyperFrames 0.8.79 (HTML plus 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.
• Nombres. Chaque nombre ici est un défaut éprouvé issu de travaux livrés : un point de départ que vous pouvez modifier lorsque vous avez une raison énoncée. Ce n'est pas une loi de la nature.
• Marque. Lorsque l'utilisateur fournit une marque (couleurs, polices, logo, images, ton), la marque prévaut. Les goûts par défaut couvrent les parties que vous devez inventer.
• Chemins. Les chemins comme scripts/render.sh fonctionnent depuis la racine du skill et également à l'intérieur d'un projet de film, car scripts/new-film.sh copie chaque script dans le projet. Chaque script, sauf brand-svg.ts (que brand-kit.sh appelle), affiche --help.
• Exemple concret. references/worked-example.md détaille Tessel, un film de lancement de 33 s en 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

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 cadre semble choisi 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 parfait 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 bénéficie d'un langage visuel dérivé de son nom, de son produit et de sa personnalité, dans le cadre des Interdictions strictes ci-dessous. 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 fluide, pondéré et lisse à 60 ips : pas de tremblement, pas de saut et pas d'effets qui remplacent les idées.
• Visuel, pas narratif. 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 une masse, arrive sur le temps et se repose ensuite, de sorte que les moments rapides portent.
• Un son qui rend l'image meilleure : chaque impact est causé par quelque chose que vous pouvez 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 ne ressemblent pas à du contenu généré. lint-film.mjs vérifie les tokens et les styles pour les détecter, et les critiques vérifient les images.

• Mots :

  • étiquettes "eyebrow" ou "kicker" au-dessus d'un titre ;
  • taglines empilées, et "Présentation de…" ;
  • murs de texte, et texte de remplissage aléatoire : légendes mono décoratives, fausses métriques, étiquettes dont personne n'a besoin, lorem ipsum.

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

• Typographie : polices serif, et styles italiques ou obliques, y compris une inclinaison qui en simule une. Utilisez un seul sans-serif moderne et propre, plus un mono pour le code ou les chiffres si le produit en a besoin.

• Couleur :

  • orange, ambre, beige, crème, brun clair ou sable, comme accent, papier ou lueur ;
  • néon : accents très vifs et saturés, lueurs, bloom et halos ;
  • violet, pourpre ou indigo, et dégradé violet-bleu ou tout dégradé multicolore ;
  • effet de verre (glassmorphism).

• Décoration :

  • emoji et icônes génériques ;
  • étincelles représentant "IA", particules, confettis, lentilles flares et pluie de code ;
  • dépassement rebondissant sur tout ce qui n'est pas une atterrissage.

Ce qui reste est ample : encre et papier (clair ou foncé, neutre ou froid), un accent avec une signification provenant de toute famille de teinte en dehors de celles interdites (rouge, vert, sarcelle, bleu, jaune), un sans-serif, et un mouvement ultra propre et fluide, avec des courbes d'accélération, pondéré, 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 serif, son orange), la marque prévaut, car c'est son identité plutôt qu'une valeur par défaut. Enregistrez-la dans BRIEF.md pour que les critiques ne la signalent pas, et marquez les lignes qui la 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.

Format	Durée	ips	Grille (BPM)	Temps narratifs	Mots à l'écran	Son	Livrables
Film de lancement / teaser	20–45 s	60	120	8–10 par 30 s	≤ 20–35 au total	partition complète + effets sonores	Master 16:9, réagencements 9:16 et 1:1, affiche, kit de marque si inventé
Vidéo produit / fonctionnalité	8–30 s	60	100–120	1 capacité par 8–10 s	≤ 15	Fond sonore léger + effets sonores UI	Master, affiche
Boucle de fonctionnalité	4–15 s, mesures entières	60 (GIF 25)	quelconque ; mesures entières	3–5	≤ 8, se lit en sourdine	optionnelle	MP4, WebM, GIF, jointure sans couture
Logo animé	3–8 s	60	120	2–4	nom + ≤ 4	Un impact ajusté + queue	MP4, ProRes 4444 avec transparence (maintenue et effacée), affiche, kit de marque si inventé
Démonstration UI	20–90 s	60	90–110	1 chapitre par 2–4 mesures	≤ 6 par légende	Fond sonore + effets sonores UI	Master, sous-titres SRT

Utilisez 60 ips chaque fois que l'interface utilisateur, le texte ou la caméra se déplace. À 30 ips, les dérives lentes sont visibles par paliers et les mouvements rapides strobent, et 24 ips n'est jamais adapté à l'UI. Un GIF est la seule exception : exportez-le à 25 ips (ou 50) à partir du master 60 ips, car les délais d'image GIF sont des 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 : un spectateur retient une chose, et un film qui serait tout aussi vrai pour un concurrent, ou pour une fonctionnalité moins sophistiquée, ne lui donne rien à retenir.
2. Un dispositif narratif. Un objet, une forme ou une couleur voyage à travers chaque plan et ne disparaît jamais à une coupe. 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 simple point, ligne ou bloc est le défaut paresseux, et c'est aussi le look des propres 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 "vôtre". Utilisez-le avec parcimonie (environ ≤ 8 % des pixels) et laissez-le envahir le cadre au maximum une fois. Pourquoi : une couleur qui signifie quelque chose se lit sans mots, et une couleur utilisée partout ne signifie rien.
4. Un système de mouvement propre à la marque. Utilisez quelques courbes et ressorts nommés, chacun pour une raison énoncée, et prenez chaque numéro d'image de timeline.ts. Pourquoi : un mouvement cohérent est le mouvement de la marque, et des accélérations ad hoc se lisent comme générées.
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 masque les pops, les images 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 porte 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 fait gagner.

Étape 0 : Réception → BRIEF.md

• Si le brief énonce déjà le produit, le message et la durée, déduisez tout le reste et écrivez vos hypothèses.
• Sinon, 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, plus toute exception fournie par la marque. Les critiques sont ensuite invitées avec ce fichier mot pour mot, il fait donc office de contrat QA.
• Initialisez le projet : bash <skill>/scripts/new-film.sh films/<nom> --fps 60 --bpm 120 --size 1920x1080 [--engine hyperframes]. Passez --link-modules <dossier>/node_modules pour réutiliser une installation existante au lieu d'exécuter npm install.
• Porte : BRIEF.md a une ligne de spécification, par exemple 1920x1080@60, 30s, 120BPM, audio: synthétisé.

Étape 1 : Concept → TREATMENT.md

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

• Partez des spécificités, pas du style. Écrivez :
  • ce que le nom signifie ou évoque (il donne souvent le logo et le dispositif) ;
  • le comportement non évident de la fonctionnalité, en complétant la phrase "contrairement à la version évidente, il…" ;
  • les objets propres au produit (ses lignes, cartes, lectures et états).
• Écrivez 3 concepts, chacun à travers un prisme différent :
  • (a) le verbe ou la métaphore propre au produit rendue littérale ;
  • (b) la douleur du spectateur rendue visible ;
  • (c) un dispositif formel : un objet relais, un cadre, un mouvement de caméra ininterrompu, ou un contenant qui devient le produit.
• Jetez tout concept dont les accessoires pourraient apparaître dans un film d'un autre produit. Ce n'est pas le vôtre.
• Remplissez assets/TREATMENT.md pour le concept que vous avez choisi :
  • un logline ;
  • l'arc : accroche (dans le problème, ressentie en 1 s) → retournement → preuve (1–2 capacités) → promesse → logo final ;
  • le chemin du dispositif, plan par plan ;
  • un tableau des temps avec les colonnes mesure | temps | image | texte | son ;
  • le texte complet avec son nombre de mots ;
  • le dernier cadre.
• Exécutez le test de suppression. Supprimez les temps de démo, et la valeur doit toujours se lire. Supprimez les temps de valeur ; si le film "fonctionne" toujours, c'était un tour de 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 difficile.
• Exécutez le test du mot de fonctionnalité. Regardé en sourdine, un étranger utiliserait-il le mot du brief pour la fonctionnalité ("streak", "split") ? Si un dispositif astucieux le fait lire comme autre chose, conservez la forme familière de la fonctionnalité et laissez le dispositif l'habiller.
• Porte :
  • le logline fait ≤ 15 mots ;
  • le test de spécificité est réussi, avec sa réponse écrite ;
  • le nombre de mots est dans le budget de la §1 ;
  • aucune ligne ne dépasse 5 mots, et aucun plan n'a plus de 2 lignes ;
  • le dispositif apparaît dans chaque ligne du tableau des temps.

Étape 2 : Marque et maquettes → src/brand/

Lisez references/brand-and-color.md et la section typographie de references/copy-and-type.md.

• La palette, les polices, le logo et le nom de démonstration du starter sont des substituts marqués // cinetic:placeholder, et lint-film.mjs signale une erreur jusqu'à ce que chaque marqueur ait disparu. Appliquez la marque de l'utilisateur, ou inventez-en une pour ce film, puis supprimez les marqueurs. Un film qui conserve l'apparence du starter ressemble à tous les autres films fabriqués à partir de celui-ci.

• Personnalité d'abord. Écrivez trois adjectifs pour la marque, puis déduisez les choix à partir d'eux. Cette correspondance se trouve dans references/brand-and-color.md §2 :

  • la police : choisissez le sans-serif pour cette marque parmi @fontsource-variable/* et intégrez-le avec node scripts/add-font.mjs <nom> (sans danger avec un node_modules partagé) ; Geist n'est que le substitut du starter ;
  • le poids et la casse ;
  • le fond (clair ou foncé : un outil de développement ou une marque au nom de feu demande souvent du foncé), neutre ou froid, et la teinte de l'accent parmi les familles autorisées ;
  • le caractère du mouvement, du net à l'nonchalant.

  Une application de notes calme et un outil CI rapide ne devraient pas partager le même look.

• Écrivez src/brand/tokens.ts (python3 scripts/palette.py --accent '#…' --stage dark construit les neutres, vérifie le contraste et refuse une teinte interdite) :

  • couleurs : une encre, un papier, 2–4 neutres, et un accent avec sa signification dans un commentaire ;
  • typographie : une famille à 2 poids, plus un mono si nécessaire ;
  • une échelle typographique ;
  • une valeur de crénage par rôle.

• Explorez le logo avant de vous engager sur un.

  • Esquissez 6–10 directions, chacune d'une source différente : le sens du nom, une forme de lettre, l'objet propre du produit, la métaphore de l'idée, et une construction purement géométrique.
  • Rendez-les ensemble sur une seule feuille et regardez-la (la MarkSheet se trouve toujours dans references/brand-and-color.md §4).
  • Rejetez toute direction qui pourrait appartenir à dix autres startups, y compris la famille "bloc géométrique + point d'accent", qui est le propre vocabulaire d'exemple de ce skill.
  • Exécutez le test de mauvaise lecture. Montrez le logo à 64 px pendant une demi-seconde. S'il se lit d'abord comme un symbole courant (un moins, un émoticône, une icône de menu ou de hamburger, un cadenas, un bouton de lecture, un plus), rejetez-le ou modifiez-le jusqu'à ce que ce ne soit plus le cas.
  • Construisez le gagnant dans src/brand/Mark.tsx sur une grille de 100 unités, avec des espaces d'au moins 8 unités pour qu'il survive à une réduction.

• Une palette avec du caractère, dans les interdictions. Dérivez-la du monde du nom et du produit (une colline donne du pin, de la mousse et de l'ardoise ; une fonderie donne du charbon, de la suie et un rouge incandescent), pas des valeurs par défaut du framework. Lorsque le monde du nom est la chaleur ou le feu, l'orange est interdit, alors optez pour le rouge incandescent (un rouge profond brillant sur un vrai charbon) ou le blanc incandescent, jamais le bleu générique d'outil de développement : la couleur doit porter le nom. Un fond bleu-gris presque noir est le thème sombre standard des outils de développement (palette.py le note), et dans un outil de développement, les étiquettes d'interface rouge se lisent comme des erreurs ; dépensez le rouge pour la propre chose de la marque.

  • Les bleus de framework (la famille #3B82F6 / #2563EB) et les gris purs plats se lisent comme "par défaut".
  • Teintez les neutres vers le monde, avec un gris-vert froid ou une ardoise bleue ; un fond sombre peut être noir-pin ou bleu-encre plutôt que #000.
  • references/brand-and-color.md §8–10 contient des palettes testées.

• Définissez le look. Écrivez src/brand/tokens.ts pour

…

[le contenu a été tronqué pour la traduction]