vikramdevesh/3d-ani-lcs

Vidéo codée en 3D (vidéos et Shorts)

Chaque image est une fonction pure du temps, écrite en HTML/CSS/three.js. La même page sert d'éditeur en direct (elle se lance instantanément, rien n'est sauvegardé) et de source de rendu (Chromium capture image par image, ffmpeg assemble). L'utilisateur est le réalisateur ; vous faites le travail. Rien n'est rendu tant qu'il n'a pas regardé la version en direct.

Le flux de travail comporte sept étapes. Effectuez-les dans l'ordre et ne sautez pas l'étape 5.

N°	Étape	Ce que vous produisez
1	Configuration	dossier projet copié depuis template/, serveur en cours d'exécution
2	Script	script.md, puis un plan des plans : une phrase = un plan
3	Voix	voiceover.mp3 + synchronisation des mots, ou durées estimées si la voix arrive plus tard
4	Style	l'apparence écrite sous forme de nombres dans STYLE.md et intégrée dans le monde 3D
5	Correction	révision dans l'éditeur en direct, notes appliquées, erreurs répétées ajoutées à references/lessons.md
6	Rendu	rendu par lots, assemblé avec l'audio
7	Publication	options de titre, description, chapitres, prompt pour la miniature

1. Configuration

• Les outils se trouvent dans ~/.youtube-video-editor/venv (Playwright Chromium, imageio-ffmpeg, pillow, faster-whisper). S'il manque, exécutez ~/.claude/skills/youtube-video-editor/scripts/setup.sh. Appelez-le toujours avec ~/.youtube-video-editor/venv/bin/python -I. Il n'y a pas de ffmpeg ou node système sur le Mac de l'utilisateur.
• Copiez template/ vers <projet>/ dans un dossier que l'utilisateur peut voir (il travaille généralement dans ~/Downloads). Vidéo 16:9 → index.html + scenes.js. Short vertical → short.html + scenes-short.js (plan 1080×1920).
• Servez-le : python3 -m http.server 8766 --bind 127.0.0.1 depuis le dossier du projet (lancez-le avec nohup … &), puis ouvrez http://localhost:8766/index.html dans le panneau du navigateur. Une page file:// s'y affiche comme un instantané mort, et preview_start avec un launch.json n'a pas fait démarrer le serveur sur ce Mac, alors démarrez-le depuis Bash.

2. Script

• Le script décide de la vidéo. Écrivez-le dans la voix de l'utilisateur : phrases courtes et parlées, mots simples, pas de ton manuel. Leur public est composé de débutants non techniques (Low Code Studio). Environ 150 mots par minute ; un Short fait 60 à 110 mots.
• Ensuite, planifiez les plans avant d'animer : une phrase = une scène, et pour chacune une ligne décrivant ce que la caméra voit. Modifier un plan est gratuit, modifier une animation ne l'est pas.
• Inspiré d'une autre vidéo ? Gardez la structure et la leçon, changez chaque exemple, visuel et réplique. Ne réutilisez jamais leurs images, leur formulation, leurs miniatures ou leurs personnages.

3. Voix

• L'utilisateur enregistre sa propre voix (elle fait partie de la marque) et ajoute un portrait plus tard. Donc, la première passe n'a pas d'audio : la durée de chaque scène est estimée à partir du nombre de mots de son vo (WPS/PAD dans engine.js).
• Quand voiceover.mp3 existe : convertissez-le en wav mono 16 kHz, exécutez ~/.claude/skills/youtube-video-editor/scripts/transcribe.py pour les temps des mots, définissez le dur de chaque scène sur l'écart entre son premier mot et le premier mot de la scène suivante, et ajustez les valeurs data-in sur les mots clés. Les temporisations dans la scène s'étirent automatiquement avec la longueur de la scène (rythme écrit → rythme réel), donc la plupart des scènes n'ont besoin que de dur. Passez --audio voiceover.mp3 lors du rendu.
• Sur ce Mac i3, whisper small peut ramer quand la machine est occupée. base, beam_size=1, sans horodatage des mots est environ 5 fois plus rapide et suffit pour lire une référence ; utilisez small avec horodatage des mots uniquement pour la synchronisation finale.

4. Style : des nombres, pas des adjectifs

« Cinématographique » ne veut rien dire ; chaque scène devinerait différemment. Écrivez STYLE.md dans le projet avec des règles que vous pouvez vérifier, puis intégrez-les dans le monde une fois pour toutes. Commencez par references/style-rules.md (le look 3D maison : angles de caméra, objectif, valeurs d'éclairage, palette, mouvement, légendes). Si l'utilisateur donne des images de référence, lisez-les et transformez ce que vous voyez en ces mêmes nombres. Leurs propres références, pas une copie de la vidéo d'un autre créateur.

Les graphiques animés 2D coûtent beaucoup moins de tokens et cassent moins souvent que la 3D. Utilisez la 3D pour les plans où l'espace, l'échelle ou un voyage comptent (l'accroche, les plans « monde ») et les cartes 2D pour les invites, les listes, les comparaisons et les cartes de chapitre. Un bon mélange est d'environ un plan 3D toutes les trois ou quatre scènes. Un Short peut être entièrement en 3D car il ne comporte que quelques plans.

5. Correction : l'éditeur en direct (ne jamais sauter)

• Ouvrez l'éditeur pour l'utilisateur et arrêtez-vous là. Il l'a explicitement demandé : une révision dans l'éditeur en direct avant tout rendu complet. Le panneau latéral montre le voice-over de chaque scène, permet d'en modifier la durée (±0,5 s) et d'écrire une note ; Copier mes notes de révision met tout dans le presse-papiers pour qu'il puisse vous le coller.
• Avant de passer la main, vérifiez votre propre travail : render.py --sheet sheet.jpg donne une image par scène. Regardez-la (divisez une feuille haute en 3 recadrages pour qu'elle reste lisible), corrigez ce qui ne va pas, répétez. Les défauts typiques de la première passe se trouvent dans references/lessons.md. Lisez ce fichier avant de construire.
• Quand la même note apparaît dans plus d'une scène, corrigez la vidéo et ajoutez une ligne dans references/lessons.md, afin que la vidéo suivante commence avec ce problème résolu. C'est tout l'intérêt de la compétence.

6. Rendu

• Uniquement après que l'utilisateur a approuvé la version en direct. render.py --chunks out/chunks --chunk-len 60 puis render.py --join out/chunks final.mp4 [--audio voiceover.mp3]. Pour les Shorts, ajoutez --size 1080x1920 et l'URL short.html?render. Une scène erronée plus tard → supprimez ce chunk_NNN.mp4 et relancez ; seul celui-ci est refondu.
• Vitesse sur l'i3 (mesurée) : environ 1 s par image pour une scène 3D plein écran en 1080p, car WebGL sans tête tourne en logiciel. Une vidéo de 10 minutes à 30 ips représente 18 000 images, donc prévoyez 3 à 5 heures et informez l'utilisateur avant de commencer. Utilisez --fps 24 si l'utilisateur est d'accord, lancez avec nohup en arrière-plan, gardez le Mac éveillé (request_keep_awake), et n'exécutez pas plus de deux processus de rendu simultanément (divisez la plage avec --start/--end dans différents dossiers).
• Chromium sans tête a besoin de --use-angle=swiftshader --enable-unsafe-swiftshader pour WebGL (déjà dans render.py).
• Recoupez sans reconstruire : les scènes sont un tableau, donc réorganiser ou supprimer des scènes revient à une liste de montage. Si l'ouverture est lente, déplacez le plan le plus fort à l'index 0.

7. Publication

Vous connaissez le script, alors écrivez 5 options de titre (recommandez-en une), une description, des chapitres à partir des temps de début des scènes, et des tags. Suivez ~/.claude/skills/youtube-video-editor/references/youtube-metadata.md. La miniature est l'endroit où un modèle d'image aide : faites le rendu d'une image forte (render.py --stills), écrivez le prompt, et laissez l'utilisateur la générer ou la composer. Chaque affirmation sur la miniature doit être vraie par rapport à la vidéo.

Format des scènes (engine.js)

SCENES.push({
  id: 'ceinture', chapter: '2 · Script', title: 'Boîte sur la ceinture',   // affiché dans l'éditeur
  vo: `Votre boîte voyage sur une ceinture.`,                                   // ligne parlée ; définit la durée tant que l'audio n'existe pas
  dur: 4,                                                         // durée fixe optionnelle en secondes
  cls: 'z',                                                       // optionnel : plain | grad | paper | z | z1 (scale-up)
  html: `<div class="three abs" style="inset:0"></div>
         <div class="h1" data-in="0.4" data-a="pop">Bonjour</div>`,
  tick: (t, root) => K.draw3d(root.querySelector('.three'), 1920, 1080, t, 'ceinture'),
});

• Déclaratif : data-in / data-out (secondes), data-a (up down left right pop fade drop zoom), data-d, data-type (machine à écrire), data-count="0,2400000", data-w="0,80" (largeur en %), data-draw (trait SVG).
• tick(t) est pour tout ce qui est personnalisé. Il ne doit dépendre que de t : pas de Date.now(), pas de Math.random() (utilisez E.rnd(i)), pas d'animations ou transitions CSS. Sinon le rendu ne correspondra pas à l'aperçu.
• Kit : K.chat() boîte de prompt style Claude, K.track() suivi d'étape, K.chapter() carte de chapitre pleine page, K.wave() + K.waveTick(), K.draw3d(holder, w, h, t, mode) pour une vue 3D, K.snap(canvas, t, mode) pour montrer plusieurs vues caméra dans une même scène (un seul moteur de rendu WebGL partagé ; ne créez jamais un moteur de rendu par scène).
• Le monde 3D est K.world() dans kit.js : construit une fois, update(t, mode) déplace les objets et place la caméra. Pour un nouveau film, remplacez les objets et les modes caméra là-dedans ; gardez le modèle. examples/workflow-video/ est une vidéo complète de 10 minutes (45 scènes) réalisée avec cette compétence. Lisez-la pour trouver des modèles avant d'écrire de nouvelles scènes.

Deux looks : diorama jouet et mondes narratifs

• kit.js K.world() est le simple diorama à ombres plates (rapide à construire, idéal pour les vidéos explicatives et les arrière-plans).
• template/worlds.js est le look narratif plus riche que l'utilisateur a préféré après avoir jugé le diorama « pas très réaliste » : personnages lisses ressemblant à des jouets (person() avec tête, bras, jambes animables, plus walk()), un dôme de ciel en dégradé, un mappage de tons filmique ACES, un soleil bas chaud plus des lumières pratiques chaudes, des sprites de lueur additive pour lampes, vapeur et faisceaux, des fenêtres en texture canvas, du brouillard pour la profondeur. Trois mondes finis de 6 secondes s'y trouvent (étal de chai à l'aube, livreur de nuit, gardien de phare) ; examples/story-samples/ montre comment les placer sur une page. Chargez worlds.js après kit.js et dessinez avec K.drawStory(holder, w, h, t, name).
• La 3D codée ne peut pas être photoréaliste. Si l'utilisateur demande « ultra réaliste », dites-le clairement et proposez le choix : vidéo IA (coûte des crédits, et la vidéo ne peut plus prétendre être « tout code ») ou le look narratif. Donnez ensuite 2 à 3 courts extraits de démonstration pour qu'il choisisse avant de construire l'intégralité du film dans un seul look.
• Donnez à chaque plan narratif un personnage qui fait quelque chose avec un début et une fin à l'intérieur du plan (entre, s'arrête, fait un signe ; lève une lanterne), une étiquette de nom, et une source de lumière en mouvement. C'est ce qui se lit comme « une histoire ».

Liste de vérification pour les Shorts

1080×1920, 20 à 45 s, une idée. L'accroche visible et parlée en 2 secondes maximum, en commençant par du mouvement. Légendes de 2 à 5 mots sur une pastille sombre (le texte directement sur un ciel 3D lumineux est illisible), dans la zone de sécurité : rien d'important dans les 220 px du haut ou les 420 px du bas. Utilisez des modes caméra plus serrés (belt, follow, hero) car les plans larges deviennent minuscules à la verticale. Terminez par la récompense plus une ligne demandant un abonnement ; coupez toute conclusion.

Fichiers fournis

• template/ : index.html, short.html, engine.js, kit.js, worlds.js, style.css, render.py, scènes de démarrage, lib/three.min.js
• examples/story-samples/ : la page des trois extraits de personnages
• examples/workflow-video/ : le build complet « Comment j'utilise Claude Code pour la vidéo » (scenes-1/2/3.js + index.html) ; copiez-les à côté des fichiers template pour l'exécuter (les miniatures dans son mur à 0:21 ne sont pas fournies)
• references/style-rules.md : le look 3D maison en nombres
• references/lessons.md : les erreurs déjà payées (lisez avant de construire, ajoutez après chaque révision)