Communitygithub.com

KKcorps/code-film

Réalise des courts-métrages où chaque image et chaque son sont calculés par du code dans une seule page HTML, sans images, séquences vidéo ni échantillons audio. Couvre tout type (vidéos explicatives de systèmes techniques, clips musicaux, films narratifs, publicités, poèmes visuels) dans n'importe quel look artisanal (riso, collage papier, encre, aquarelle, pixel, plan bleu, sable). Commence par une fiche d'intention écrite, juge par rapport à une galerie de 29 films codés appréciés, et vérifie le MP4 final par rapport à cette intention.

Qu'est-ce que code-film ?

Le skill **code-film** transforme une idée en un court-métrage généré entièrement par du code, dans une seule page HTML. Chaque image (frame) et la bande-son sont calculées par programmation, sans utiliser d'images, de séquences vidéo ou d'échantillons audio préexistants. Ce skill est conçu pour les développeurs, créateurs de contenu technique ou artistes numériques qui souhaitent produire des films explicatifs, des clips musicaux, des publicités ou des poèmes visuels avec un rendu artisanal (risographie, collage papier, encre, aquarelle, pixel art, etc.). Le processus commence par la rédaction d'une **fiche d'intention** (intent card) qui définit le message principal, l'émotion recherchée et les contraintes techniques. Ensuite, l'utilisateur juge son travail par rapport à une galerie de 29 films de référence, créée à partir de travaux appréciés, en s'inspirant de leurs principes (cohérence narrative, matérialité, rareté du texte, etc.). Une fois le film produit sous forme de page HTML, plusieurs scripts de vérification valident les défauts, la conformité à la fiche d'intention, la qualité audio et visuelle, ainsi que la cohérence temporelle. Le skill fournit un moteur de rendu complet avec des mouvements de caméra, une presse riso, une partition calculée, et une commande unique pour construire le MP4 final. Il peut également analyser une vidéo, une image ou une page HTML de référence pour s'en inspirer. Ce skill est idéal pour créer des vidéos animées explicatives, des films codés, des clips musicaux ou des images imprimées au look riso, ou pour apprendre d'un film de référence. En revanche, il n'est pas adapté aux leçons narrées pour YouTube (utiliser le skill `lesson-film` à la place) ni aux diagrammes animés intégrés dans une page ou un document.

Compatible avec✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/KKcorps/inkreel/tree/main/skills/code-film

Demander à votre IA préférée

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

Documentation

Films codés

Ce skill crée une page HTML qui dessine l'image f à partir de (f, seed), une bande-son calculée de la même manière, et un MP4. Le sujet du film, son apparence et son mouvement sont à vous de décider. Le skill repose sur trois éléments : l'intention que vous écrivez d'abord, le goût qui guide votre jugement, et les vérifications qui confirment si le film final respecte l'intention.

Configuration

Exécutez bash assets/doctor.sh une fois sur une nouvelle machine. Il vérifie la présence de Chrome (ou un chemin CHROME), Node 22 ou supérieur, ffmpeg, et Python 3 avec numpy et Pillow, et indique comment corriger les éventuelles absences.

1. Écrire l'intention

Copiez assets/intent.md à côté de la page sous le nom piece.intent.md. Remplissez d'abord le message clé et le ressenti : ce qu'un nouveau spectateur peut dire après un visionnage, et ce qu'il ressent à la fin. Laissez le reste jusqu'à ce qu'une esquisse soit choisie, car une fiche écrite en premier fixe l'idée, et les esquisses ne peuvent ensuite que modifier son apparence. C'est ainsi que les trois esquisses du film "Ledger" sont devenues une seule idée sous trois formes.

Une fois une esquisse choisie, terminez la fiche. Ses lignes "Jugées" indiquent ce que nous suivons, le point que seul ce sujet pouvait apporter, l'apparence et pourquoi, si et comment le texte apparaît, les films de la galerie dont il s'inspire, et comment la fin répond au début. Ses lignes "Mesurées" donnent la durée, le rythme, le son et le beat. Chaque choix ultérieur sert cette fiche. Quand le travail montre que la fiche était erronée, modifiez la fiche et dites-le.

2. Juger par la galerie

reference/gallery.md contient 29 films où Claude a dessiné chaque image en code, dans les domaines de la musique, des explications, des histoires et des expériences, ainsi que ce que les films appréciés ont en commun :

  • Il y a une chose à suivre à travers chaque scène.
  • Chaque image raconte quelque chose. Aucune n'est là seulement pour la variété.
  • Cela se termine là où cela a commencé, mais transformé.
  • Quelque chose montre où nous en sommes : un indicateur, un compteur, une horloge.
  • L'apparence est un matériau réel, utilisé avec ses défauts, choisi pour cette histoire.
  • Le son et l'image ne font qu'un.
  • Le texte est rare, grand et fait partie du monde.
  • Il a un point de vue et une certaine chaleur.
  • Il est aussi court que l'idée.

Ce sont des jugements, pas des règles. Enfreignez-en un si la fiche explique pourquoi. reference/taste.md contient les corrections que Kartik, l'auteur du skill, a apportées pendant sa construction : un goût de départ, pas le vôtre. Là où ils divergent de la galerie, dites-le et demandez à la personne à qui le film est destiné.

3. Vérifier le résultat

Signalez les trois niveaux dans la note de livraison.

  • Les défauts bloquent la construction. La page s'analyse, s'exécute et dessine la même image à chaque fois. Aucune image ne clignote ni ne saute lors d'une coupe. Le mix se situe entre -28 et -8 dBFS et ne sature pas. check.py, seamcheck.py, verify.py et build.sh les imposent.
  • L'intention est mesurée. python3 assets/verify.py piece.mp4 vérifie les lignes Mesurées de la fiche. Un écart signifie que le film ou la fiche est erroné. Corrigez l'un et dites lequel.
  • Le test de visionnage est le vôtre. Chaque ligne deux fois a passé tous les nombres et était quand même mauvais. Répondez aux cinq questions que verify.py affiche : racontez-le en tant que nouveau spectateur, nommez chaque vignette, regardez sans le son, regardez-le à côté de son film de galerie, jugez la dernière image.

lookcheck.py et soundcheck.py ne bloquent jamais. Ils décrivent le rythme, la couleur, la synchronisation et le beat, et vous les lisez par rapport à la fiche.

Flux de travail

Chaque étape a une ligne de rapport, donc elle ne peut pas être cochée sans dire comment.

  1. S'ils ont partagé une référence, démontez-la d'abord. Un clip, une image fixe ou une page HTML comptent tous. Lisez reference/references.md. Rapportez quelle forme c'est, ce qu'elle fait, quels écarts sont comblables, et ce que vous reprenez et laissez.
  2. Écrivez le message clé et le ressenti. Seulement ces deux lignes. Rapportez-les.
  3. Regardez les deux ou trois films de la galerie les plus proches en entier. Rapportez ce que vous reprenez de chacun, et ce que vous ne copierez pas.
  4. Esquissez trois histoires différentes sous forme d'images fixes. Chacune est une chose différente qui se passe, racontée en une ligne, pas la même idée sous trois apparences. Au moins une devrait être un monde dans lequel le spectateur pourrait vivre, pas un diagramme. Dessinez chacune avec l'apparence finale, en utilisant le moteur et la finition d'impression, jamais en fil de fer. Une esquisse ignore les vérifications de défauts, pas le savoir-faire. assets/sketchcheck.py échoue sur une esquisse plate, et sur une copie si vous lui donnez les images approuvées avec --refs. Montrez à la personne à qui le film est destiné et laissez-la choisir ou mélanger. Rapportez la ligne de chaque histoire. Puis terminez la fiche.
  5. Écrivez les mots, s'il y en a. Un paragraphe dans une seule voix, avant tout code, sauvegardé sous piece.chain.txt. Lisez "Les mots qui sonnent comme une voix" dans reference/story.md. Rapportez le paragraphe et son ratio de connectivité.
  6. Planifiez. Les temps forts dans l'ordre, ce que chaque image signifie en une ligne, ce qui montre où nous en sommes, et la fin. Rapportez le plan. C'est un plan, pas un contrat.
  7. Construisez la page. Commencez à partir de assets/engine.html, ou écrivez votre propre page selon le contrat ci-dessous. Vérifiez chaque scène seule avant de les assembler. Rapportez ce que vous avez redessiné après avoir regardé.
  8. Créez le son. Écrivez d'abord la mélodie, dans TUNE et SECTIONS, puis les quatre à huit accents pour les tournants de l'histoire. Ou apportez votre propre piece.score.py, un piece.wav que la page génère, ou du silence. Rapportez la partition que score.py affiche, et pourquoi le son correspond à la fiche.
  9. Construisez. assets/build.sh piece.html out.mp4. ROUGH=1 devant produit une ébauche à montrer tôt. Rapportez les nombres.
  10. Vérifiez. Les trois niveaux. Rapportez chacun.
  11. Livrez sous forme de nouveau fichier. Ne jamais écraser la dernière construction.

Deux looks dans un même film

Un film peut alterner entre deux moteurs de rendu, comme des scènes riso et un grand livre à l'encre. Donnez au second sa propre portée, dessinez ses actes avec l'option de plaque { raw: (ctx, u, f, size) => {} }, et placez ses coupes dans EXTRA_CUTS. assets/examples/parcel42-day/ fait exactement cela. C'est aussi l'exemple de travail canonique de l'ensemble du flux, alors lisez son README, et lisez-le pour la méthode, jamais pour l'apparence.

Le contrat de la page

Toute page qui répond à ces critères construit et vérifie. Elle définit const FPS = n. En ?capture=1, elle définit window.__frames comme le nombre d'images et window.__render(f) pour dessiner l'image f de la même manière à chaque fois, puis définit son titre sur capture ready N. Sa première ligne de script écrit toute erreur dans document.title, afin qu'un crash ne ressemble pas à une page blanche.

Les pages construites sur le moteur bénéficient également de ?play=1, ?f=N, ?grid=1, ?scene=id et ?cuts=1, et score.py lit leurs actes depuis plate().

Les fichiers

fichierdescription
assets/intent.mdle modèle de fiche d'intention
assets/engine.htmlun point de départ optionnel : grille d'images, actes et plans, bibliothèque de scènes, mouvements, une presse riso, le stylo d'écriture manuscrite, trois mondes de démonstration
assets/score.pyla partition calculée sur la grille de beats de la page, avec tonalité, harmonie, kit, swing et fin propres à chaque pièce
assets/build.shportail, capture, raccords, partition, encodage, mesure, vérification, en une commande
assets/verify.pyle film par rapport à sa fiche d'intention, plus le volume sonore et l'écrêtage, puis les questions du test de visionnage
assets/check.pyle portail de la page : analyse, gestion des erreurs, modes, grille, rendu
assets/seamcheck.pyflashs, sauts lors d'une coupe, à-coups dans un mouvement, une ancre épinglée qui dérive
assets/sketchcheck.pyles esquisses d'histoire : pas plates, pas une copie des images approuvées (--refs), pas de monde interdit (--world), pas de stub laissé
assets/lookcheck.py, assets/soundcheck.pymesures de l'image et du son, lues par rapport à la fiche et à la galerie
assets/printcheck.pyvérifie si une image a l'air imprimée ou calculée, par rapport à une image de référence. Recadre au centre une image large en carré
assets/refpage.mjsdémonte une référence qui est une page HTML : sa palette, ses marques, ses calques et son kit audio tels qu'ils les dessinent, plus un MP4 pour que les vérifications de clip fonctionnent dessus
assets/capture.mjscapture d'image via CDP. build.sh l'appelle
assets/capture-range.mjs, assets/capture-par.shcapture à n'importe quelle largeur et hauteur, dans plusieurs Chrome à la fois. Pour le 16:9 et tout ce qui dépasse une minute
assets/doctor.shcette machine est-elle prête : Chrome, Node 22+, ffmpeg, numpy, Pillow
assets/examples/parcel42-day/la source du film approuvé, avec un README sur la façon dont il a été construit
assets/example-print-still.htmlle modèle de finition riso

Quand lire quoi

Lisez chaque fichier en entier, avec un seul appel par fichier. Une exécution Codex lisait trois ou quatre fichiers de skill par appel en dessous d'une limite de sortie. Elle perdait environ 13k tokens au milieu de ces lectures sans s'en rendre compte, y compris la moitié de gallery.md. Si une lecture indique que les tokens ont été tronqués, relisez ce fichier seul.

  • Avant la fiche d'intention, et avant de montrer quoi que ce soit, lisez reference/gallery.md. Puis reference/taste.md.
  • Quand ils partagent un clip de référence, une image fixe ou une page HTML, lisez reference/references.md.
  • Quand vous planifiez l'histoire ou écrivez des légendes, lisez reference/story.md.
  • Quand l'image et le son partagent une grille de beats, lisez reference/time.md.
  • Quand vous planifiez les transitions ou la caméra, lisez reference/moves.md.
  • Quand le look est riso ou toute impression, lisez reference/press.md, puis reference/surface.md avant de régler la texture.
  • Quand vous ajoutez de l'écriture manuscrite, lisez reference/hand.md.
  • Quand vous créez le son, lisez reference/sound.md.
  • Quand vous construisez, lisez reference/export.md.
  • Quand le film dure plus d'une minute, lisez la fin de reference/export.md.
  • Quand le film est une leçon narrée pour YouTube, utilisez le skill lesson-film, qui s'appuie sur celui-ci.
  • Les pièges, toutes les façons dont cela a échoué jusqu'à présent, sous forme de listes de contrôle par phase. Avant la fiche et les esquisses, et avant de montrer quoi que ce soit, reference/traps-story.md. Avant de construire la page, reference/traps-page.md. Quand vous planifiez les mouvements, la caméra ou la grille de beats, reference/traps-motion.md. Quand le look est imprimé, reference/traps-print.md. Quand vous créez le son, reference/traps-sound.md. Avant la première construction complète, reference/traps-build.md.

Modifier ce skill

Énoncez l'intention et le jugement, et vérifiez le résultat par rapport à l'intention. Ne transformez jamais le style d'un film en règle : c'est ainsi que chaque pièce est devenue une copie d'une seule référence. Une leçon va dans le seul fichier qui la possède, et chaque autre fichier y pointe en une ligne. Un nouveau film approuvé par quelqu'un va dans la section "Notre" de la galerie, avec la raison de son succès.

Emprunté, avec remerciements

Le modèle de remplissage plat avec finition écrêtée, ainsi que la forme de wob, crayon, hatch, grain, dotScreen et scribble, proviennent du skill hand-drawn-canvas-animation par alesha-pro (MIT, github.com/alesha-pro/tools). Sa règle selon laquelle la texture est une finition plutôt qu'un dégradé, et que le remplissage d'une forme et son contour ne doivent jamais coïncider, est ce qui a débloqué le look d'impression de ce skill.

À quoi ressemble un bon résultat

Un nouveau spectateur le regarde une fois et le raconte, et le récit correspond au message clé. Chaque vignette de la planche contact est une image de quelque chose qui a du sens. Il pourrait s'asseoir à côté des films de la galerie sans être une copie de l'un d'eux. La dernière image le conclut. Les défauts sont nuls, la fiche correspond, et vous l'avez regardé quand même.

Individual skills in this repo

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

Skills associés