Communitygithub.com

mromidev/cartoon-3d-short

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

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

Cette compétence permet de générer un court métrage animé vertical (55-70 secondes) dans un style cartoon 3D distinctif, combinant des personnages 2D en forme de haricot avec des contours à l'encre et un monde 3D peint et coloré. Le rendu est réalisé avec three.js et Remotion, garantissant une qualité visuelle élevée et des performances fiables. L'outil est idéal pour les histoires historiques ou scientifiques visuelles, avec une narration vocale, des effets sonores synthétisés et une musique de marche. Il est prouvé sur le projet « The Bridge That Fell for a Song » et s'active lorsque l'utilisateur demande une vidéo similaire. La compétence guide l'utilisateur à travers un pipeline complet : recherche de faits, écriture du script, enregistrement vocal, planification des plans, construction du monde 3D, animation des personnages 2D, post-traitement (encre, flou, bloom, étalonnage), synthèse sonore, vérifications qualité et rendu final. Elle respecte des règles strictes de style et de qualité, avec des cibles de rendu précises (encre, couleur, profondeur, caméra).

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add mromidev/claude-animated-shorts

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 d'histoire cartoon 3D (three.js + Remotion)

Exemple prouvé : The Bridge That Fell for a Song. 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 dites 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.
  • Mixage standard : musique +3 dB, SFX -6 dB, voix inchangée.
  • Export final 2K vertical : 1440x2560, --scale 1.3333.
  • Vérification finale par Opus max.
  • 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 (elle doit être visuelle), ainsi qu'une analogie quotidienne simple qui l'explique.
    • Écrivez les faits avec leur source en haut de SCRIPT.md.
  2. Script (~3,7 mots/s, 55-70 s). Structure des beats du court métrage du pont :
    • Accroche : le fait absurde en une phrase (« Soixante-quatorze soldats ont détruit un pont en fer en marchant simplement dessus. »).
    • Contexte : année, lieu, fierté.
    • Action : escalade sur trois ou quatre beats, chacun un peu plus grand.
    • Point de rupture : le moment où ça casse.
    • Double ligne impassible : « Heureusement... / Malheureusement... ».
    • Explication : une idée physique via une analogie quotidienne (l'enfant sur une balançoire).
    • Conséquence : la règle qu'elle a créée.
    • Rebondissement 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 faites ses timings de mots words.json (n'importe quelle reconnaissance vocale avec horodatages).
    • Placez-les dans le dossier du projet, par exemple ~/bridge-short/voice/.
    • Corrigez manuellement les timings 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, temps d'histoire tau.
    • XFADE : fondus enchaînés lors des 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 d'impact inversées.
    • DOF/dofAt : flou d'objectif par beat.
    • FOREGROUND : accessoires de cadrage proches.
    • Chaque réaction visuelle arrive 0 à 3 images avant son mot.
  5. Monde.
    • lights.ts : LIGHTS plus le ciel/rivière/nuage LOOK 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 coutures peintes en 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 : API de dessin Canvas2D Pen, toile de conception 600x1000, semelles à y = 975, têtes en forme de haricot, membres en bâton, contour variable prune, bibliothèque de visages.
    • cast.ts : panneaux publicitaires face à la caméra, foules, cartes d'effet, clignements, cycles de marche. Tous les panneaux publicitaires vont sur le calque NOINK.
    • cardshade.ts : cartes éclairées par la lumière de la scène, sans émission.
  7. Post-traitement (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 pixel est mis à l'échelle avec 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).
    • Table d'événements → SFX synthétisé 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 de l'apparence. 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 sandbox.
    • Faites des comparaisons côte à côte avec des images de référence avec 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).
    • QA : python scripts/short_qa.py final.mp4 out/<name>/qa shots.json vérifie chaque image pour les pixels noirs, blancs, gelés et les images pop, ainsi que la loudness et les feuilles.
    • Corrigez tout ce qu'il trouve, puis exécutez un audit Opus approfondi.
  11. Livraison. Envoyez le fichier final mp4 à l'utilisateur, mettez à jour la mémoire, écrivez des notes.

Valeurs finales de l'apparence (pont après 4 rounds de vérification ; tout dans templates/bridge/)

Commencez chaque nouveau court métrage à partir de templates/bridge/ (copie vers src/videos/<name>/) : l'apparence vit dans ces valeurs, l'histoire vit dans story.ts / disposition build.ts / rôles cast.ts. 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 de lumière (lights.ts, soleil relatif à la caméra et gelé par plan) :
    • jour : az 75 / el 48, éclairé [1,58,1,5,1,33], ombre [.30,.29,.36], lift [.05,.06,.11] (teinte froide UNIQUEMENT dans l'ombre), ciel haut #3e7fd2 → horizon #b8d0ec, brouillard = horizon, 25→300 m, uSat 1,08, ~15 % de brume bleue au-delà de 60 m.
    • doré : az 6 / el 7 (soleil bas en contre-jour), 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, blobs de contact + ombres de carte réelles.
  • Albedos (paint.ts/build.ts) : maisons en brique atténuée / crème / ocre / terre cuite avec plinthe, corniche, appuis, capuchons, seuil de porte, cheminée + pot, hauteurs 7 / 8,4 / 9,8 m ; pierre grise chaude/beige (saturation −35 % par rapport à « conte de fées ») ; pont en bois ocre C* ~51-58 avec coutures presque noires ; fer foncé et désaturé. Jamais de citron, jamais de lavande sur les visages éclairés.
  • 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 le calque NOINK (elles portent leur propre encre prune).
  • Objectif (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 du premier rang.
  • Post-traitement (Bridge.tsx) : encre → pré-flou → flou principal → bloom (seuil 1,0, int .5, 6 niveaux, rayon .6) → mappe tonale NEUTRE → étalonnage ; MSAA 4. Le grain argentique 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 en haricot l/h .94, encre prune #241726, yeux distants de .26 W, pas de rougissement, 14 expressions ; adultes 3,5 hauteurs de tête ; balancement de marche 5 %, inclinaison 1-7°, foulée plantée 0,8 m ; clignements 0,5-2,3 s ; ombre de contact serrée ~.5 sous les pieds + queue direction du soleil le jour ; bord doré intérieur uniquement (jamais de copie extérieure décalée).
  • Caméra (story.ts) : coupes sur les grands sauts, glissements smootherstep 18-40 f, chaque maintien bouge (pas de maintien statique ≥4 f), secousses inversées s'atténuant sur 7 f aux impacts, roulis de 4 à 4,6°, accessoires de premier plan (FOREGROUND) dans ~1/3 des plans.

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

  • Encre :
    • Lignes du monde : environ 3 px à 1080 de large, presque noires #0b0a0c, presque constantes avec la distance. Uniquement silhouettes, sauts de profondeur et plis normaux. Pas de ligne sur les joints mur/sol ou l'horizon. Les cartes de personnages ne sont jamais entourées par l'encre du monde.
    • Encre des personnages : prune foncé #201628-#2f1d28, plus épaisse sur le côté inférieur/ombragé.
  • Couleur :
    • Luminance médiane du jour ~.57. Non-encre p5 ~.23 (pas de noirs écrasés). Chroma éclairé C* p90 ~55. Ciel jour haut ~#5e93d9, horizon 1,28x plus lumineux.
    • Doré : horizon pêche #ffd08a, ombres violet-bleu (jamais marron), soleil en contre-jour.
  • Profondeur :
    • DOF sur environ 1/3 du temps d'écran (CU, 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 f, pic ≤ 25 px/f à 720p.
    • Chaque maintien pousse de 0,15-0,35 %/f, avec 0,6 %/f sur les mots forts.
    • Roulis de 4 à 5°.
    • Pas de flottement à main levée. Les secousses d'impact changent de signe à chaque image et s'atténuent sur 7 f.
  • Personnages :
    • Environ 3,5 hauteurs de tête, jambes 1,4 HH.
    • Membres en bâton d'environ 0,055 de la largeur de la tête, mains en points d'encre.
    • Tête en haricot (l/h ~0,93, menton plus étroit, couronne plus pointue).
    • Pas de rougissement ou de reflets dans les yeux. Visages à luminosité ~.93.
    • Balancement de marche 3-7 %, inclinaison 1-7°, pieds plantés.
    • Clignements toutes les 0,5-2,3 s, durant 4 f.

Boucle de correspondance d'apparence (comment l'apparence du pont a été atteinte ; réutiliser pour toute passe « rends-le comme 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 partagé : compare/CONTEXT.md. Les rapports sont la source de vérité pour chaque agent par la suite.
  2. Sandbox, 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 le principal, seul le chemin d'importation change). Propriété utilisée pour le pont :
    • cam : story.ts (clés de 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 de personnages, pose, éclairage de carte, cartes d'effet)
    • post : ink.ts, Bridge.tsx, lensblur.ts (passe de contour, compositeur, flou d'objectif, bloom) Les agents modifient uniquement leurs propres fichiers dans leur propre sandbox 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 le principal dans backup/bridge_<time>/, copie uniquement les fichiers détenus). Ensuite npx tsc --noEmit (filtrez vers le dossier du projet), puis re-synchronisez chaque sandbox à partir du principal (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 numérotée de corrections avec numéros d'images. Mappez chaque correction au propriétaire du fichier et reprenez l'agent de ce propriétaire avec SendMessage (conserve son contexte). Scores du pont : round 1 5/3/4/5/4/7/4/6 → round 2 5/4/5/6/4/7/6/6 → round 3 voir notes.
  5. Les contrats entre propriétaires vivent dans des constantes exportées (par exemple calque 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'élimateur 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 post-traitement de la taille d'un pixel doivent être mis à l'échelle avec la résolution : les images fixes sont à 0,5, la finale à 1,333. R3F limite dpr à ≥ 1, donc les images fixes avec --scale 0.5 rendent toujours un tampon de 1080x1920.
  • Disque : chaque bundle Remotion copie public/ (~1,3 Go) dans le dossier temporaire\remotion-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 temporaire partagé (le mode automatique bloque le nettoyage). /remotion-tmp se remplit aussi (~500 dossiers / 110 Go après les 4 rounds du pont) : lorsqu'un projet est terminé et que rien n'est rendu, supprimez ses dossiers remotion-webpack-bundle-* et puppeteer_dev_chrome_profile-*.
  • 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 : muxez 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 de travail à l'intérieur de 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 argentique à 2,5 % a fait passer le fichier 2K de ~250 Mo à 910 Mo et se transformera en bouillie sur YouTube ; la référence n'en a pas. Gardez-le désactivé.

Pièges de lisibilité que le vérificateur a détectés (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 est lue comme une SUSPENSION. Toujours deux cordes vers une large planche avec l'enfant entre elles (swingKid dans toon.ts), et un cadre dont les jambes dégagent l'arc (un cadre en A à chaque extrémité).
  • Les accessoires ou débris à moins de ~2 m d'un objectif deviennent d'énormes blobs coupés 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 est lu comme une « boule verte » ; un accessoire de premier plan doit être reconnaissable ou absent.
  • Drapeaux : étoile/diamant rouge + jaune est lu comme le Vietnam. Utilisez un drapeau correct pour l'époque (croix de Saint-Georges pour l'Angleterre 1831).

...

[La suite a été tronquée pour la traduction]

Skills associés