nathanaelhub/make-reel

Que fait make-reel ?

Vous êtes l'éditeur, l'animateur et le narrateur. L'utilisateur tape une ligne (« fais un reel sur pourquoi la nourriture d'avion est si fade ») ; vous rendez un MP4 que vous avez vous-même vérifié.

Tout s'exécute depuis la racine du dépôt avec des scripts npm. Tous les chemins ci-dessous sont relatifs à la racine du dépôt.

0 · Configuration (première fois dans une session)

Exécutez npm run doctor. Si quelque chose affiche ✗, exécutez npm run doctor -- --fix et relancez doctor.

• Si aucun fournisseur de voix n'est disponible, dites-le une fois à l'utilisateur : les reels seront des brouillons silencieux jusqu'à ce qu'il ajoute ELEVENLABS_API_KEY (meilleur, synchronisation exacte des mots) ou OPENAI_API_KEY dans .env, ou installe Piper. Sur macOS, la voix intégrée say fonctionne gratuitement. Continuez ensuite ; un brouillon silencieux reste utile.
• N'imprimez et ne commitez jamais le contenu de .env.

1 · Le goût d'abord (quand il y en a un)

Un reel sans référence donne un résultat générique. Si l'utilisateur donne des liens ou fichiers de référence, nomme une marque, ou dit « comme celui-ci » :

1. npm run ref -- <goût> <liens ou fichiers> (un nom, ou un chemin absolu pour un dossier de marque privée). Il télécharge, mesure et écrit des planches de contact.
2. Ouvrez chaque refs/*.sheet.jpg avec l'outil Read et regardez. Remplissez ensuite la section Notes de taste/<goût>/taste.md : rythme, sous-titres et type, couleur, mouvement, son, à faire, à ne pas faire. Soyez précis (« lettres capitales condensées blanches, deux mots à la fois, tiers inférieur »), pas générique (« moderne, propre »).
3. Définissez "taste" : "<goût>" dans script.json.

Si un goût existe déjà pour cette marque, lisez son taste.md et regardez ses planches avant d'écrire quoi que ce soit. Si l'utilisateur veut un look soigné et qu'il n'y a pas de goût, demandez-lui une fois 3 à 5 reels qu'il aime avant de construire.

Inspiré, jamais copié : ne réutilisez jamais les images, la musique, le wording, les logos ou les mises en page exactes d'une référence.

2 · Planifier le reel

Choisissez un slug court en kebab-case, puis npm run new -- <slug> "<Titre>". Cela crée reels/<slug>/ avec script.json, reel.html, assets/.

Lisez .claude/skills/make-reel/guides/script.md et écrivez reels/<slug>/script.json :

• 6 à 10 scènes, 30 à 55 secondes au total. Une idée par scène, 8 à 20 mots parlés par scène.
• La scène 1 est l'accroche et doit atterrir en moins de 2 secondes.
• Chaque scène a un id, un say (narration exacte) et un visual (ce que le spectateur voit, avec le mot sur lequel chaque battement visuel atterrit).
• Si le sujet est factuel, vérifiez les faits. Vérifiez tout ce dont vous n'êtes pas sûr (cherchez si possible) et mettez la source dans un carton ou une note à l'écran. Préférez les nombres avec marge (« jusqu'à 30 % ») à une précision inventée.

3 · La voix

npm run voice -- <slug>

Cela produit voice.mp3 et timeline.json (début/fin de scène + horodatage de chaque mot). Lisez le tableau imprimé : c'est le timing sur lequel vous animez. Les clips sont mis en cache par scène, donc les éditions ultérieures ne re-voix que les scènes modifiées.

4 · Animer

Lisez .claude/skills/make-reel/guides/scenes.md (la référence complète du kit) et .claude/skills/make-reel/guides/style.md (le rendu). Écrivez ensuite reels/<slug>/reel.html : une <section class="scene" data-scene="<id>"> par scène du script, mêmes ids, même ordre.

Règles les plus importantes :

• Synchronisez le mouvement aux mots. Utilisez data-at="@word" pour que les choses atterrissent quand elles sont dites. Chaque scène doit avoir un battement sur son mot clé, pas seulement une entrée à 0.
• Quelque chose bouge en permanence. Pas de segment de plus de ~2 s sans changement. Utilisez des battements synchronisés aux mots, data-loop, des compteurs, des traits SVG dessinés.
• Disposition : texte à l'intérieur de x 72–1008. Titres à partir de y≈230. Visuel principal entre y≈450 et 1180. Les sous-titres se situent à y≈1240–1440 ; gardez le contenu hors de cette bande, ou définissez data-captions="top" / "off" sur la scène. Rien d'important en dessous de y 1700 (l'UI de l'app le couvre).
• Les positions sont absolues (class="abs" + left/top en ligne). N'utilisez jamais d'animations ou de transitions CSS ; tout le mouvement provient d'attributs data ou de hooks Reel.on(), et tout fonctionne sur des ressorts (spring, spring-snappy, spring-bouncy, spring:k,c,m). La vérification échoue sinon.
• Pas de texte centré en majuscules sur un dégradé de couleurs (la vérification échoue).
• Visuels : emoji, SVG en ligne, formes CSS, les cartes/téléphone/fenêtre/timbre/chips du kit, et les images dans reels/<slug>/assets/. Ne téléchargez pas d'images de vraies personnes et n'utilisez pas de logos ou personnages que vous ne possédez pas.

5 · Vérifiez votre propre travail (toujours, avant le rendu)

npm run check -- <slug>

1. Corrigez toutes les erreurs ✗. Corrigez les avertissements ⚠ sauf si vous avez une raison de ne pas le faire.
2. Ouvrez chaque PNG de planche de contact qu'il liste avec l'outil Read et regardez réellement. Le lint ne peut pas juger le goût. Cherchez : éléments qui se chevauchent ou sont serrés, texte difficile à lire, scènes vides ou ennuyeuses, visuels qui ne correspondent pas à la narration, sous-titres couvrant le contenu, style incohérent entre les scènes.
3. Si le reel a un goût, la vérification imprime ses planches de référence. Regardez-les à côté des planches du reel et nommez les trois plus grandes différences (rythme, type, couleur, mouvement). Corrigez celles qui comptent, ou dites pourquoi pas.
4. Modifiez, relancez check, regardez à nouveau. Répétez jusqu'à ce que ce soit propre. Généralement 1 à 3 séries.

6 · Rendu

npm run render -- <slug>. Sortie : out/<slug>.mp4. Utilisez --draft pour un aperçu rapide en demi-résolution, --from 10 --to 18 pour rendre une section seulement.

Après le rendu, extrayez 3–4 images du MP4 (ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg) aux transitions et aux battements synchronisés aux mots et regardez-les, pour que vous sachiez que le MP4 correspond à ce que la vérification a montré.

Remettez : le chemin du MP4, sa durée, la voix utilisée, et une ligne sur tout ce que vous amélioreriez encore. Si l'utilisateur est sur sa propre machine, mentionnez npm run preview -- <slug> pour le regarder avec l'audio dans le navigateur.

7 · Boucle de rétroaction

Lisez .claude/skills/make-reel/guides/feedback.md. L'utilisateur dira des choses comme « ça cloche », « l'accroche est faible », « la scène 4 traîne », « agrandis le timbre ». Associez chaque note au plus petit changement :

• Wording, rythme, scène trop longue/courte → modifiez script.json, puis npm run voice (seules les scènes modifiées sont re-voix). Les horodatages des mots bougent, mais les références @word suivent automatiquement.
• Aspect, disposition, mouvement, timing d'un battement → modifiez reel.html seulement. Pas de re-voix.
• Ensuite, vérification → regardez les planches → rendu. Dites ce que vous avez changé en une ou deux lignes.