alifmahmudashik/shorts-studio-skill

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

Exemple éprouvé : The Bridge That Fell for a Song. C'est un court métrage original de 67 secondes racontant l'histoire du pont de Broughton en 1831 et de 74 soldats marchant au pas.

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

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

• 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 prononcez jamais le nom de la chaîne dans une voix-off ou une description.

Règles utilisateur applicables :

• Sous-titres : ACTIVÉS par défaut pour les Shorts. Un mot à la fois, centré, en gras, avec un contour sombre, à l'intérieur de la zone de sécurité, synchronisé avec words.json (voir 'Sous-titres'). Ne les désactivez que si l'utilisateur le demande. Pas d'autres étiquettes à l'écran.
• Anglais uniquement.
• Voix : un ton constant et neutre (le narrateur ne réagit jamais, les personnages le font).
• Les blagues sont basées sur des faits réels recherchés.
• Mixage standard : musique +3 dB, effets sonores -6 dB, voix inchangée.
• Export final 2K vertical : 1440x2560, --scale 1.3333.
• Opus max vérifie chaque étape.
• Sauvegardez 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), plus une analogie simple de la vie quotidienne qui l'explique.
   • Notez les faits avec leur source en haut du fichier SCRIPT.md.
2. Script (~3,7 mots/s, 35-70 s). Pour les courts métrages factuels, utilisez le 'Format d'histoire virale' et 'Rendez-le drôle' ci-dessous ; la formule des « beats du pont » est l'alternative pour les histoires de catastrophe :
   • Accroche : le fait absurde en une ligne (« Soixante-quatorze soldats ont fait tomber un pont en fer simplement en marchant dessus. »).
   • Contexte : année, lieu, fierté.
   • Action : escalade sur trois ou quatre temps, chacun un peu plus grand.
   • Casse : le moment où ça casse.
   • Double réplique impassible : « Heureusement... / Malheureusement... ».
   • Explication : une idée physique à travers une analogie quotidienne (l'enfant sur une balançoire).
   • Conséquence : la règle qui a été créée.
   • Chute en boucle : 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 ses timings de mots words.json (n'importe quelle synthèse vocale avec horodatage des mots).
   • Placez-les dans le dossier du projet, par ex. ~/bridge-short/voice/.
   • Corrigez manuellement les timings des mots. Tout est synchronisé sur words.json, et les sous-titres en sont également tirés.
4. Plan des plans dans story.ts : copiez templates/bridge/ (la source finale 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 tau de l'histoire.
   • 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.
   • 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.
   • Enchaînez les sujets de chaque phrase en un flux continu (flow.ts, voir 'Flux continu'), donnez un nom à chaque mouvement et une taille de cadrage à chaque arrêt (voir 'Variété de caméra' et 'Cadrage').
   • Donnez à chaque lieu sa propre présélection d'éclairage (voir 'Éclairage pour chaque lieu').
5. Monde.
   • lights.ts : LUMIÈRES plus la palette LOOK ciel/rivière/nuage par lumière.
   • shade.ts : ombrage bicolore et untone().
   • build.ts : ville, maisons et accessoires du kit Kenney CC0, recoloriés, avec élimination par ligne de vue de tout ce qui bloque une caméra.
   • paint.ts : textures peintes HD sur Canvas2D avec les 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 : l'API de dessin Canvas2D Pen, toile de conception 600x1000, semelles à y = 975, têtes de haricot, membres en bâton, contour variable prune, 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 le calque NOINK.
   • cardshade.ts : cartes éclairées par la lumière de la scène, sans émissif.
7. Post-traitement (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Ordre du compositeur : encre → pré-flou → flou principal → bloom → mappage de tons NEUTRE → étalonnage (MSAA 4).
   • Chaque paramètre de 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).
   • Tableau d'événements → effets sonores synthétisés plus une partition originale masquée sous la voix.
   • Sortie : mix.wav (48 kHz, durée 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 implique de refaire le son.
9. Vérifications de l'aspect. 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 de ≤200 mots.
   • Exécutez la vérification du cadrage (templates/bridge/framing.ts) pour chaque plan et faites une planche contact avec une image par plan (première, milieu, dernière image). Voir 'Porte de qualité'.
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 pop, plus le volume sonore et les planches.
    • 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, rédigez des notes.

Pré-vol (faites ceci en premier)

• Vérifiez que templates/bridge/, references/ et scripts/ existent (clonez github.com/mromidev/claude-animated-shorts, ou votre fork, à côté du projet Remotion s'ils manquent). S'ils manquent, ARRÊTEZ-VOUS et récupérez-les. N'improvisez jamais un aspect three.js générique sans les modèles.
• Faites d'abord un clip de test de 15 s (accroche + 2-3 plans, avec sous-titres et son). Rendez des images fixes, exécutez la Porte de qualité, corrigez, puis étendez à l'histoire complète. Ne passez jamais directement à un rendu complet.

Format d'histoire virale : « riez d'un génie » (à utiliser pour les courts métrages factuels)

Six temps, à chaque fois :

1. Action étrange sans contexte, montrée dans une image (accroche, premières 3 s).
2. Le rire : les autres personnages se moquent du héros.
3. Ils regardent tous à droite : le temps passe et le héros semble avoir tort ou est inoffensif.
4. L'indice : un détail qui présage la récompense.
5. La récompense : l'événement qui prouve que le héros a raison (le point culminant visuel).
6. La science : montrez le mécanisme (vue intérieure / en coupe / macro) et expliquez-le en une phrase simple.

• Racontez-le comme une histoire avec un héros, pas une liste de faits. Choisissez une pratique étrange visible dans une image et dont les gens se moqueraient.
• La dernière ligne lance un argument ou un commentaire (quelque chose de discutable), pas un résumé net.
• Modèle de titre : « Pourquoi X... », « Comment X... », « Ce que X signifiait vraiment ». Pas de spoiler de la récompense dans le titre.
• Rythme : un nouveau sujet toutes les 2-3 s, atteint par un déplacement de caméra (voir 'Flux continu') plutôt que par un cut, avec un effet sonore sur presque chaque mouvement ou fondu (whoosh, cliquetis, rire de foule) et de la musique sous la voix.
• Richesse des lieux, personnages simples (têtes rondes, bras en bâton) : prévoyez 12 à 16 lieux distincts et 20+ accessoires pour un court métrage de 60 s, et donnez à chaque lieu sa propre ambiance d'éclairage.
• Écrivez d'abord les faits avec leurs sources. Les années et les nombres sont prononcés naturellement (« dix-huit cent quarante-sept ») et sous-titrés en chiffres.
• Exemple : templates/SCRIPT_viral_example.md.

Rendez-le drôle (moteur comique)

La foule rit du héros ; le spectateur devrait aussi rire.

• Voix impassible, images absurdes. Le narrateur ne réagit jamais ; les personnages le font. L'écart entre les deux est la blague.
• Un gag toutes les 4 à 6 s, utilisant au moins trois types par court métrage : un gag de réplique (litote, « Heureusement... / Malheureusement... »), un gag visuel (visage de réaction, un petit détail en arrière-plan, un accessoire à la mauvaise échelle) et un gag sonore (un effet sonore idiot qui tombe sur la réaction).
• Règle de trois : deux temps normaux, puis le troisième brise le schéma.
• Gag récurrent : un personnage ou objet d'arrière-plan (un pigeon, un homme avec un sandwich) apparaît 3 à 4 fois et obtient une récompense vers la fin.
• Plans de réaction : la caméra s'arrête sur le visage (un arrêt de flux ou un changement de mise au point, pas un cut) 3 à 6 images après le mot choc et tient 8 à 12 images. Utilisez la bibliothèque de visages ; incluez au moins un « pas impressionné » et un « choc ». Voir 'Réactions et temps de dialogue'.
• Héros confiant, foule suffisante, responsables trop sérieux : les personnages prennent des choses triviales mortellement au sérieux.
• Exagérez la physique pour un seul temps (la récompense) : compression et étirement, un nuage de poussière, un coup d'impact.
• Fin en boucle : la dernière ligne tord la première ligne (l'accroche) en utilisant ce qui s'est passé.
• Les blagues restent dans les limites des faits réels : la partie drôle est le détail vrai. Ne frappez jamais les vraies victimes ou les groupes ; la cible est l'excès de confiance et la suffisance.

Sous-titres (sous-titres mot à mot)

• Source : words.json (timings des mots de la voix, corrigés manuellement). N'importe quelle synthèse vocale fonctionne ; normalizeWords() dans templates/bridge/Captions.tsx accepte {word|text, start|start_time, end|end_time} en secondes ou millisecondes et ignore les entrées « espacement » d'ElevenLabs.
• Si le texte de la synthèse vocale diffère du script (nombres, noms, orthographe), remplacez le texte par les mots du SCRIPT et conservez les temps de la STT. Les sous-titres montrent l'orthographe du script (« 1847 »), même si la voix dit « eighteen forty-seven ».
• Composant : copiez templates/bridge/Captions.tsx vers src/videos/<name>/ et rendez <Captions words={WORDS} /> comme dernier enfant de la composition, en superposition DOM au-dessus du canevas three.js, en dehors du compositeur de post-traitement (pas d'encre, de flou, de bloom ou d'étalonnage sur le texte).
• Style : un mot à la fois, centré horizontalement à environ 68 % de la hauteur de l'image (en dessous des visages, à l'intérieur de la zone de sécurité), sans sérif épais, remplissage blanc, contour sombre de 9 px à 1080 de large, échelle d'apparition 0,8 → 1,08 → 1 sur 6 images, pas de boîte d'arrière-plan, largeur max 86 %. Les nombres, noms et mots chocs utilisent la couleur d'accentuation (highlight). Les tailles en pixels sont mises à l'échelle avec la hauteur de sortie / 1920.
• Ne couvrez jamais un visage : lorsqu'un gros plan a le visage à la position du sous-titre, passez yPercent={(frame) => ...} pour le déplacer pour ce plan.
• Le sous-titre apparaît 1 image avant que son mot ne soit entendu (lead).
• AQ : rendez une image fixe sur un mot choc dans chaque plan et confirmez que le sous-titre est à l'intérieur de la zone de sécurité et ne couvre pas un visage.

Cadrage, zone de sécurité et limites de zoom (appliquées)

• Cadre 9:16. Zone de sécurité : marge de 6 % à gauche/droite, 8 % en haut, 15 % en bas (interface utilisateur de la plateforme et sous-titres). Tout ce qui compte (personnages, accessoires, bulles, panneaux) est entièrement à l'intérieur, à l'exception des accessoires de cadrage délibérés au premier plan.
• La tête d'un personnage prend au maximum 30 % de la hauteur du cadre (un gag de réaction en plan unique peut utiliser 40 %). Privilégiez les plans moyens (taille) et les plans larges en pied.
• Ne coupez jamais un personnage aux pieds, et ne recadrez jamais une bulle de dialogue ou un panneau. Un accessoire de premier plan est soit reconnaissable, soit supprimé ; un accessoire coupé ne doit pas couvrir plus de 35 % du cadre.
• Pas plus de deux plans de la même taille à la suite (large / moyen / rapproché / insert).
• Les push-ins sur les arrêts restent lents : 0,15-0,35 % par image, 0,6 % sur les mots chocs. Pas de gros zooms soudains.
• Vérification automatique : checkShot(camera, items) dans templates/bridge/framing.ts projette les boîtes englobantes dans l'espace écran et liste chaque problème. Exécutez-la sur la première, la moyenne et la dernière image de chaque plan, dans bridge-stills, et corrigez les plans défaillants avant le rendu. Auto-test : npx tsx templates/scripts/framing_selftest.ts.

Éclairage pour chaque lieu (le pont ne définit que le jour et le doré)

Chaque lieu a besoin de sa propre présélection d'éclairage dans lights.ts : une direction de clé claire, un ombrage bicolore (chaud éclairé, ombre fraîche), des ombres portées et de contact, et un ciel ou plafond correspondant. Jamais de pièce plate et non éclairée, et jamais de ciel ou de nuages visibles à l'intérieur d'une pièce.

• Intérieur (hall, hôtel, bureau) : un plafond ou un haut de mur sombre, une lumière clé venant d'une fenêtre ou d'une lampe, des lumières pratiques chaudes (bougies, lampes) avec bloom, un côté ombre fraîche, une douce vignette, des ombres au sol et aux murs de chaque accessoire, des rayons de lumière ou de la poussière provenant des fenêtres.
• Nuit : clé bleue éclairée par la lune (environ #5b7fd6), ombre bleu-violet foncé, fenêtres et lampes chaudes éclairées comme contraste, disque de lune ou étoiles.
• Aube / coucher de soleil : soleil bas avec rayons divins, ciel pêche à rose, ombre violette, longues ombres.
• Ce sont des valeurs de départ : ajustez-les par rapport à references/frames/ avec des planches côte à côte (sbs_sheet.py).
• Ombre de contact sous chaque personnage et accessoire, plus une traînée d'ombre directionnelle provenant de la lumière clé ; les meubles et accessoires projettent des ombres sur les sols et les murs (les ombres des cartes sont réelles, pas des taches, à l'intérieur).
• La profondeur de champ (tableau ci-dessous) est appliquée de manière cohérente : les gros plans et les plans moyens ne sont jamais complètement nets, les plans larges restent nets.

Variété de caméra (toujours en mouvement, jamais le même mouvement deux fois de suite)

• Dans un flux ou un plan, utilisez des mouvements nommés : push-in lent, pull-back révélateur, orbite autour du sujet, travelling latéral avec parallaxe, grue vers le haut/bas, inclinaison, changement de mise au point d'un accessoire de premier plan au sujet, petit roulis hollandais (4-5°).
• Pas deux mouvements consécutifs identiques.
• Placez des accessoires de premier plan (piliers, rampes, meubles) entre l'objectif et le sujet dans environ un tiers des plans, de sorte que le mouvement de la caméra se lise comme de la profondeur.
• Au moins deux plans d'insertion par histoire : une macro ou une vue en coupe du mécanisme pour les temps 4-6, plus un angle dramatique (angle héroïque bas ou vue à vol d'oiseau).
• Conservez les glissements smootherstep existants (18-40 i), les arrêts rampants et les coups d'impact.

Flux continu : voyage entre les sujets, ne coupez pas (la référence...

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