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 (compositionBridgeShort, 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
- 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.
- Écrivez les faits avec leur source en haut de
- 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à.
- Voix. Enregistrez ou générez
voice.wav, puis faites ses timings de motswords.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.
- Placez-les dans le dossier du projet, par exemple
- Plan des plans dans
story.ts: copieztemplates/bridge/(le code source final du pont, identique àsrc/videos/bridge/de votre projet Remotion) verssrc/videos/<name>/, enregistrez une nouvelle composition à côté deBridgeShortdanssrc/Root.tsx, et renommez-la.SHOTS: id, images a/b, lumière jour/dorée, mode foule, temps d'histoiretau.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.
- Monde.
lights.ts: LIGHTS plus le ciel/rivière/nuage LOOK par lumière.shade.ts: ombrage à deux tons etuntone().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.
- Personnages.
toon.ts: API de dessin Canvas2DPen, 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 calqueNOINK.cardshade.ts: cartes éclairées par la lumière de la scène, sans émission.
- 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.
- 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.
- 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.tsxpour 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.
- Définissez
- 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.jsonvé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.
- 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 calqueNOINK(elles portent leur propre encre prune). - Objectif (
lensblur.ts+dofAtdans 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 »)
- 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. - Sandbox, un propriétaire par fichier. Copiez le dossier du projet vers
src/videos/<name>_{cam,world,mat,char,post}avec les entréessrc/sandboxes/<n>/index.tsx(mêmeindex.tsxque 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.
- Fusionnez avec
python scripts/bridge_merge.py [cam,world,mat,char,post](sauvegarde le principal dansbackup/bridge_<time>/, copie uniquement les fichiers détenus). Ensuitenpx 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. - 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. - Les contrats entre propriétaires vivent dans des constantes exportées (par exemple calque
NOINKde ink.ts,dofAt/FOREGROUNDde story.ts,LIGHTS/LOOKde 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.5rendent toujours un tampon de 1080x1920. - Disque : chaque bundle Remotion copie
public/(~1,3 Go) dansle 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 avecexport 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 dossiersremotion-webpack-bundle-*etpuppeteer_dev_chrome_profile-*. - Dans les chaînes JS, écrivez
"<grand disque>/remotion-tmp", jamais"<grand disque>\remotion-tmp"(\rdevient 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
.tsde travail à l'intérieur deout/cassenttsc: 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 (
swingKiddans 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]