Communitygithub.com

kbohara315/cartoon-3d-short

Crée un court métrage animé vertical de 55 à 70 secondes dans le style « personnages 2D dans un monde 3D coloré », rendu avec three.js dans Remotion.

Qu'est-ce que cartoon-3d-short ?

Ce skill permet de générer un court métrage animé vertical (55-70 secondes) dans un style distinctif mêlant personnages 2D (têtes de haricot plates avec contours à l'encre) évoluant dans un monde 3D peint et coloré. Le rendu utilise three.js au sein de Remotion, et l'ensemble du pipeline est documenté pas à pas : choix du sujet et des faits historiques, écriture du script suivant une structure narrative précise (accroche, décor, action, cassure, explication, conséquence, retournement final), enregistrement de la voix, planification des plans caméra, construction du monde 3D avec textures peintes et ombres, animation des personnages via des sprites billboards, et post-production (encre, flou de lentille, bloom, étalonnage). Le skill inclut également la génération sonore (bruitages synthétisés, musique originale) et des étapes de vérification qualité rigoureuses (analyse frame par frame, vérification Opus). Il est conçu pour être réutilisable en copiant le dossier template `templates/bridge/` et en adaptant l'histoire, la construction du monde et les rôles des personnages.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add kbohara315/animated-shorts-forge

Demander à votre IA préférée

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

Documentation

Court métrage animé style cartoon 3D (three.js + Remotion)

Exemple éprouvé : Le pont qui est tombé pour une chanson. Il s'agit d'un court métrage original de 67 secondes sur le pont de Broughton de 1831 et 74 soldats marchant au pas.

  • Code : src/videos/bridge/ de votre projet Remotion (composition BridgeShort, 1080x1920, 30 ips).
  • Script, voix et son : ~/bridge-short/.
  • Recherche de style : references/.

La référence de style est une chaîne étudiée en privé (references/ : STYLE_BIBLE.md, reports/*.md, frames/).

  • Ces vidéos sont du matériel d'étude privé. Ne les téléchargez, publiez ou envoyez jamais.
  • Ne copiez jamais leurs scripts, personnages ou plans. L'histoire, les personnages et la voix sont TOUJOURS les NÔTRES.
  • Ne mentionnez jamais le nom de la chaîne dans une voix-off ou une description.

Règles utilisateur applicables :

  • Pas de légendes ou d'étiquettes dans la vidéo.
  • Anglais uniquement.
  • Voix : un ton régulier.
  • Les blagues sont des faits réels recherchés.
  • Mix standard : musique +3 dB, SFX -6 dB, voix inchangée.
  • Export final 2K vertical : 1440x2560, --scale 1.3333.
  • Opus max vérifie chaque point.
  • Sauvegarder après chaque étape.
  • « Fais-le » une fois le script approuvé.

Pipeline

  1. Sujet et faits. Choisissez une histoire vraie surprenante avec une cause et un effet physiques (qui doit être visuelle), plus une analogie simple du quotidien qui l'explique.
    • Écrivez les faits avec leur source en haut de SCRIPT.md.
  2. Script (~3,7 mots/s, 55-70 s). Formule de rythme du court métrage sur le pont :
    • Accroche : le fait absurde en une ligne (« Soixante-quatorze soldats ont renversé un pont en fer en marchant simplement dessus. »).
    • Décor : année, lieu, fierté.
    • Action : escalade sur trois ou quatre temps, chacun un peu plus grand.
    • Cassure : le moment où ça casse.
    • Double ligne impassible : « Heureusement... / Malheureusement... ».
    • Explication : une idée physique à travers une analogie quotidienne (l'enfant sur une balançoire).
    • Conséquence : la règle qu'elle a créée.
    • Retournement final : la fin.
    • Ne décrivez jamais à l'écran ce que le spectateur voit déjà.
  3. Voix. Enregistrez ou générez voice.wav, puis créez son minutage des mots words.json (n'importe quelle reconnaissance vocale avec temps des mots).
    • Placez-les dans le dossier du projet, par ex. ~/bridge-short/voice/.
    • Corrigez manuellement le minutage des mots. Tout est synchronisé sur words.json.
  4. Plan des plans dans story.ts : copiez templates/bridge/ (le code source final du pont, identique à src/videos/bridge/ de votre projet Remotion) vers src/videos/<name>/, enregistrez une nouvelle composition à côté de BridgeShort dans src/Root.tsx, et renommez-la.
    • SHOTS : id, images a/b, lumière jour/dorée, mode foule, tau temps narratif.
    • XFADE : fondus enchaînés aux changements de lieu/temps.
    • FLASH_AT : un flash blanc après l'accroche.
    • CAMS : clés par plan {f, dur?, cut?, s: f => {pos, look, fov, roll}}.
    • KICKS : secousses de retournement lors des impacts.
    • DOF/dofAt : flou de lentille par temps.
    • FOREGROUND : accessoires de cadrage au premier plan.
    • Chaque réaction visuelle arrive 0 à 3 images avant son mot.
  5. Monde.
    • lights.ts : LUMIÈRES plus le LOOK ciel/rivière/nuage palette par lumière.
    • shade.ts : ombrage deux tons et untone().
    • build.ts : ville, maisons et accessoires du kit CC0 Kenney, recolorés, avec élimination par ligne de vue de tout ce qui bloque une caméra.
    • paint.ts : textures peintes HD Canvas2D avec joints peints dans des teintes sombres.
    • world.ts : shader de ciel, brouillard = couleur d'horizon, rivière, pose par image, soleil gelé par plan et relatif à la caméra.
  6. Personnages.
    • toon.ts : l'API de dessin Pen Canvas2D, toile de conception 600x1000, semelles à y = 975, têtes de haricot, membres en bâton, contour prune à largeur variable, bibliothèque de visages.
    • cast.ts : panneaux d'affichage face à la caméra, foules, cartes d'effet, clignements, cycles de marche. Tous les panneaux d'affichage vont sur la couche NOINK.
    • cardshade.ts : cartes éclairées par la lumière de la scène, sans émissif.
  7. Post (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
    • Ordre du compositeur : encre → pré-flou → flou principal → bloom → mappe tonale NEUTRE → étalonnage (MSAA 4).
    • Chaque paramètre de pixel s'adapte à la hauteur de sortie / 1920.
  8. Son (~/bridge-short/audio/ : timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).
    • Tableau d'événements → bruitages synthétisés plus une partition originale atténuée sous la voix.
    • Sortie : mix.wav (48 kHz, longueur exacte), stems et cues.md.
    • Verrouillez les constantes de temps de l'image avant de créer le son. Tout changement de timing ultérieur signifie relancer le son.
  9. Vérifications du rendu. Exécutez node scripts/bridge-stills.mjs out/<name>/x_ 100,400 0.5.
    • Définissez BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx pour rendre une copie bac à sable.
    • Faites des comparaisons côte à côte avec les images de référence en utilisant python scripts/sbs_sheet.py out.jpg --ours ... --ref ....
    • Envoyez-les à un vérificateur Opus max : 1 à 3 images, un verdict ≤200 mots.
  10. Rendu final.
    • npx remotion render src/index.ts <Comp> out/<name>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • Muxez avec -map 0:v:0 -map 1:a:0 (Remotion écrit une piste audio silencieuse).
    • AQ : python scripts/short_qa.py final.mp4 out/<name>/qa shots.json vérifie chaque image pour les images noires, blanches, figées et les images sautées, plus le volume sonore et les feuilles.
    • Corrigez tout ce qu'il trouve, puis exécutez un audit Opus approfondi.
  11. Livraison. EnvoyezUserFile le mp4 final, mettez à jour la mémoire, écrivez des notes.

Valeurs de rendu final (pont après 4 tours de vérification ; tout dans templates/bridge/)

Commencez chaque nouveau court métrage à partir de templates/bridge/ (copiez vers src/videos/<name>/) : le rendu vit dans ces valeurs, l'histoire vit dans story.ts / build.ts layout / cast.ts rôles. Scores Opus max à la fin : couleur jour 7, doré 5-6, éclairage 5-6, encre 6, textures 5-6, personnages 7, profondeur 6-7, composition 6-7 (à partir de 5/3/4/5/4/7/4/6 au début).

  • Préréglages d'éclairage (lights.ts, soleil relatif à la caméra et gelé par plan) :
    • jour : az 75 / el 48, éclairé [1,58,1,5,1,33], ombre [0,30,0,29,0,36], lift [0,05,0,06,0,11] (teinte froide UNIQUEMENT dans l'ombre), ciel haut #3e7fd2 → horizon #b8d0ec, brouillard = horizon, 25→300 m, uSat 1,08, ~15 % brume bleue au-delà de 60 m.
    • doré : az 6 / el 7 (soleil bas rétro-éclairé), clé vers #FFB36B ×1,5, ombre violet-bleu (façade ≈ #444380), ciel #ffc47c → #8a6f8a, brouillard pêche seulement au-delà de 50 m, disque solaire #ffcf9e + bloom, gouttes de contact + ombres réelles des cartes.
  • Albédos (paint.ts/build.ts) : maisons en brique atténuée / crème / ocre / terre cuite avec plinthe, corniche, rebords, auvents, marche de porte, cheminée + pot, hauteurs 7 / 8,4 / 9,8 m ; pierre gris chaud/beige (saturation −35 % du « livre d'images ») ; pont en bois ocre C* ~51-58 avec joints presque noirs ; fer sombre et désaturé. Jamais citron, jamais visages éclairés lavande.
  • Encre (ink.ts) : #030303, 5,1 px près (6 m) → 3,3 px loin (90 m) à 1080x1920, plis ×0,8 à partir de 35°, sauts de profondeur à partir de 1 %, teinte de brouillard 0,3 seulement loin ; cartes de personnages sur la couche NOINK (elles portent leur propre encre prune).
  • Lentille (lensblur.ts + dofAt dans story.ts) : cInf px à 1080 : accroche/rivière CU 15-16, gros plans 12-14, PM 10-12, parc 7, balancement doré 5, plans larges/aériens 0. Mise au point sur les yeux de la première rangée.
  • Post (Bridge.tsx) : encre → pré-flou → flou principal → bloom (seuil 1,0, int 0,5, 6 niveaux, rayon 0,6) → mappe tonale NEUTRE → étalonnage ; MSAA 4. Le grain film existe mais est DÉSACTIVÉ (la référence ne mesure aucun grain ; il quadruple la taille du fichier).
  • Personnages (toon.ts/cast.ts/cardshade.ts) : têtes de haricot h/l 0,94, encre prune #241726, yeux espacés de 0,26 L, pas de blush, 14 expressions ; adultes 3,5 hauteurs de tête ; balancier de marche 5 %, inclinaison 1-7°, pas planté 0,8 m ; clignements 0,5-2,3 s ; ombre de contact serrée ~0,5 sous les pieds + queue direction soleil le jour ; bord doré intérieur uniquement (jamais une copie externe décalée).
  • Caméra (story.ts) : coupes sur les grands sauts, glissements smootherstep 18-40 i, chaque tenue bouge (pas de tenue statique ≥4 i), retours de coup de pied décroissants sur 7 i lors des impacts, roulis 4-4,6°, accessoires de premier plan (FOREGROUND) dans ~1/3 des plans.

Cibles de rendu (mesurées à partir de la référence ; voir references/reports/)

  • Encre :
    • Lignes du monde : environ 3 px à 1080 de large, presque noir #0b0a0c, presque constant avec la distance. Silhouettes, sauts de profondeur et plis normaux uniquement. Pas de ligne sur les jonctions mur/sol ou l'horizon. Les cartes de personnages ne sont jamais cerclées par l'encre du monde.
    • Encre des personnages : prune foncé #201628-#2f1d28, plus épaisse sur le côté inférieur/ombre.
  • Couleur :
    • Luma médian jour ~0,57. Non-encre p5 ~0,23 (pas de noirs écrasés). Chroma éclairé C* p90 ~55. Haut du ciel jour ~#5e93d9, horizon 1,28x plus lumineux.
    • Doré : horizon pêche #ffd08a, ombres violet-bleu (jamais marron), soleil rétro-éclairé.
  • Profondeur :
    • DOF sur environ 1/3 du temps d'écran (GP, PM, inserts), cInf 10-16 px à 1080, mise au point sur les yeux. Les plans d'établissement et larges restent nets.
    • Brouillard = couleur d'horizon, 25→420 m jour, 20→360 m doré.
    • Bloom uniquement sur les émissifs HDR : seuil 1,0.
  • Caméra :
    • Coupes franches sur les grands sauts. Tout le reste est un glissement smootherstep de 18-40 i, pic ≤ 25 px/i à 720p.
    • Chaque tenue avance de 0,15-0,35 %/i, avec 0,6 %/i sur les mots d'impact.
    • Roulis de 4-5°.
    • Pas de flottement caméra portée. Les secousses d'impact inversent le signe à chaque image et décroissent sur 7 i.
  • Personnages :
    • Environ 3,5 hauteurs de tête, jambes 1,4 HT.
    • Membres en bâton environ 0,055 de la largeur de la tête, mains en points d'encre.
    • Tête de haricot (h/l ~0,93, menton plus étroit, couronne plus pointue).
    • Pas de blush ou de reflets d'yeux. Visages à luminosité ~0,93.
    • Balancier de marche 3-7 %, inclinaison 1-7°, pieds plantés.
    • Clignements toutes les 0,5-2,3 s, durant 4 i.

Boucle d'ajustement du rendu (comment le rendu du pont a été atteint ; réutilisable pour toute passe « faire ressembler à X »)

  1. Mesurez d'abord la référence. Un agent d'analyse par sujet (mouvement, profondeur, textures, personnages, éclairage, contours, étalonnage), chacun écrivant des nombres, pas des adjectifs, dans references/reports/<topic>.md. Brief commun : compare/CONTEXT.md. Les rapports sont la source de vérité pour chaque agent après.
  2. Bacs à sable, un propriétaire par fichier. Copiez le dossier du projet vers src/videos/<name>_{cam,world,mat,char,post} avec les entrées src/sandboxes/<n>/index.tsx (même index.tsx que principal, seul le chemin d'importation change). Propriété utilisée pour le pont :
    • cam : story.ts (clés caméra, coupes, secousses, table DOF, accessoires de premier plan)
    • world : world.ts, lights.ts, shade.ts, grade.ts (soleil, ciel, brouillard, rivière, couleur, étalonnage)
    • mat : paint.ts, build.ts (textures peintes, bâtiments, accessoires)
    • char : toon.ts, cast.ts, cardshade.ts (dessin des personnages, pose, éclairage des cartes, cartes d'effet)
    • post : ink.ts, Bridge.tsx, lensblur.ts (passe de contour, compositeur, flou de lentille, bloom) Les agents éditent uniquement leurs propres fichiers dans leur propre bac à sable et rendent des images fixes avec BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<name>/<n>/x_ <frames> 0.5.
  3. Fusionnez avec python scripts/bridge_merge.py [cam,world,mat,char,post] (sauvegarde du main vers backup/bridge_<time>/, copie uniquement les fichiers possédés). Puis npx tsc --noEmit (filtrer sur le dossier du projet), puis resynchronisez chaque bac à sable depuis main (cp -f src/videos/<name>/* src/videos/<name>_<n>/) avant le tour suivant.
  4. Vérifiez avec un nouvel agent Opus max : feuilles côte à côte (python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), notez chaque zone sur 10 (couleur jour / doré, éclairage, encre, textures, personnages, profondeur, composition) plus une liste de correctifs numérotés avec numéros d'image. Mappez chaque correctif au propriétaire du fichier et reprenez l'agent de ce propriétaire avec SendMessage (conserve son contexte). Scores du pont : tour 1 5/3/4/5/4/7/4/6 → tour 2 5/4/5/6/4/7/6/6 → tour 3 voir notes.
  5. Les contrats entre propriétaires vivent dans des constantes exportées (par ex. couche NOINK de ink.ts, dofAt/FOREGROUND de story.ts, LIGHTS/LOOK de lights.ts). Changer un contrat signifie informer chaque propriétaire qui le lit.

Pièges

  • Les matériaux du kit nature Kenney sont turquoise : recoloriez-les par nom de matériau dans build.ts.
  • Les caméras se retrouvent à l'intérieur des maisons : l'éliminateur par ligne de vue dans build.ts/world.ts supprime tout ce qui bloque un rayon de caméra.
  • L'encre dans la même passe d'effet fusionnée que le DOF est écrasée. L'encre doit être sa propre passe avant le flou.
  • Les paramètres de post à l'échelle du pixel doivent s'adapter à la résolution : les images fixes sont à 0,5, le final à 1,333. R3F fixe dpr à ≥ 1, donc les images fixes --scale 0.5 rendent toujours un buffer 1080x1920.
  • Disque : chaque bundle Remotion copie public/ (~1,3 Go) dans le dossier temp emotion-webpack-bundle-* et ne le supprime jamais. 60+ Go ont rempli le disque système pendant les passes du pont et un rendu est mort avec ENOSPC. Rendez toujours avec export TEMP='<grand disque>/remotion-tmp' TMP='<grand disque>/remotion-tmp' (bridge-stills.mjs le définit lui-même) et demandez à l'utilisateur avant de supprimer les anciens dossiers de bundle dans le dossier temp partagé (le mode automatique bloque le nettoyage). /remotion-tmp se remplit aussi (~500 dossiers / 110 Go après les 4 tours du pont) : lorsqu'un projet est terminé et que rien n'est en cours de rendu, supprimez ses dossiers remotion-webpack-bundle-* et puppeteer_dev_chrome_profile-* là-bas.
  • Dans les chaînes JS, écrivez "<grand disque>/remotion-tmp", jamais "<grand disque>\remotion-tmp" (\r devient un retour chariot).
  • Remotion écrit une piste audio silencieuse : multiplexez avec -map 0:v:0 -map 1:a:0.
  • Les sous-agents ne peuvent pas écrire de fichiers de rapport dans ce cadre : demandez-leur un message final ≤150 mots et sauvegardez-le vous-même dans out/<name>/<n>/REPORT.md.
  • Les fichiers .ts brouillons dans out/ cassent tsc : nommez-les .txt.
  • Les rendus 2K tournent à ~4 ips (≈10 min pour 67 s). Les images fixes à 0,5 prennent 3 à 8 s chacune après un bundle de ~40 s.
  • Le grain film à 2,5 % a fait passer le fichier 2K à 910 Mo au lieu de ~250 Mo et deviendra de la bouillie sur YouTube ; la référence n'en a pas. Gardez-le désactivé.

Pièges de lisibilité détectés par le vérificateur (vérifiez chaque nouvel accessoire/plan pour ceux-ci)

  • Une balançoire dessinée comme une seule corde qui disparaît derrière l'enfant se lit comme une PENDAISON. Toujours deux cordes pour une large planche avec l'enfant entre elles (swingKid dans toon.ts), et un cadre dont les jambes dégagent l'arc (cadre en A à chaque extrémité).
  • Les accessoires ou débris à moins de ~2 m d'une lentille deviennent d'énormes taches coupées au bord du cadre. Lorsqu'une caméra bouge, revérifiez chaque accessoire près de sa nouvelle position (les caméras de la rivière se sont déplacées dans les chapeaux flottants).
  • Un buisson de premier plan coupé par le bord du cadre se lit comme une « boule verte » ; un accessoire de premier plan doit être reconnaissable ou disparu.
  • Drapeaux : rouge + étoile/losange jaune se lit comme le Vietnam. Utilisez un drapeau historiquement correct (croix de Saint-Georges pour l'Angleterre 1831).

Skills associés