kinetic-reels

Kinetic reels

Vous réalisez un reel comme le ferait un motion designer, mais en code : une page HTML dessine n'importe quel instant t de la vidéo, un navigateur headless la rend image par image à 30 ips, ffmpeg ajoute la voix et la musique. Même entrée, même vidéo, à chaque fois.

SKILL ci-dessous désigne le dossier où se trouve ce fichier. Exécutez chaque commande depuis le dossier projet de l'utilisateur (là où se trouvent reels/ et .env). Utilisez python3 sur Mac/Linux et python sur Windows.

Avant le premier reel (une fois)

1. node "SKILL/scripts/doctor.mjs". S'il affiche des lignes FIX, exécutez node "SKILL/scripts/setup.mjs", puis faites ce que disent les lignes FIX restantes. Ne continuez pas tant qu'il n'affiche pas ALL GOOD.
2. L'utilisateur a besoin d'une clé API Gemini dans .env (GEMINI_API_KEY=..., gratuite sur https://aistudio.google.com/apikey). N'imprimez jamais la clé, ne commitez jamais .env.
3. kinetic.config.json contient son pseudo (le filigrane), son nom et une photo carrée pour le carton de fin. new-reel.mjs le crée la première fois ; demandez à l'utilisateur les trois valeurs et remplissez-le.

Fabriquer un reel (chaque étape, dans l'ordre)

1. Sujet et faits. Convenez d'UN SEUL sujet. Recherchez-le à partir de sources directes (docs, le dépôt, la page du fournisseur) et écrivez chaque affirmation dans facts.md avec l'URL et la date de consultation. Pas de fait, pas d'affirmation.
2. Planifier les séquences (montrez à l'utilisateur avant de construire). 38 à 45 s pour une liste de 5 à 7 éléments, jusqu'à 60 s pour une explication. Par scène : secondes, ce qui est dit, l'image, le fichier exact de l'asset et sa provenance. Si un asset est introuvable (un logo, une photo, une capture d'écran), ARRÊTEZ-VOUS et demandez-le à l'utilisateur. Ne dessinez jamais un faux logo, n'inventez pas d'interface utilisateur et ne générez pas de personne.
3. Créer le dossier : node "SKILL/scripts/new-reel.mjs" <slug> [--logo claude]. Le logo en coin est le logo du sujet (fichiers dans as/ ; ajoutez le vrai SVG s'il manque).
4. Script. Écrivez tts.json (ce que dit la voix, divisé en accroche / corps / révélation / appel à l'action, chaque partie avec son propre style) et script.txt (les légendes, mêmes mots, même ordre). Règles : references/SCRIPT.md. Balises et styles : references/VOICE.md.
5. Voix : python "SKILL/scripts/voice.py" reels/<slug> puis python "SKILL/scripts/tighten.py" reels/<slug> (pauses à 0,34 s, vitesse normale). Écoutez la prise, ou vérifiez-la avec un transcripteur : si une ligne manque ou un nom est erroné, corrigez le texte et relancez voice.py.
6. Légendes + timing : python "SKILL/scripts/captions.py" reels/<slug> affiche DUR, SCN et CAPS. Collez-les dans reel.js. Ajustez manuellement une ancre ([email protected]) si un mot arrive trop tôt ou trop tard.
7. Assets réels : captures d'écran avec node "SKILL/scripts/docshot.mjs" <url> reels/<slug>/as/<name>.png [--selector "css"], logos en SVG provenant du fournisseur ou de SKILL/assets/logos. Chaque asset reçoit une petite ligne de source à l'écran. Détails : references/ASSETS.md.
8. Construire reel.js. Lisez d'abord examples/claude-code-shortcuts/reel.js : c'est le reel de référence qui montre tous les motifs. Éléments utilisables : references/COMPONENTS.md. Les images se situent dans y 260 à 1100, les légendes occupent y 1150 à 1570.
9. Juger : node "SKILL/engine/shot.cjs" reels/<slug> audit doit afficher LAYOUT PASS. Ensuite node "SKILL/engine/shot.cjs" reels/<slug> prev 0 <un temps à l'intérieur de chaque scène> et REGARDEZ chaque image fixe (ouvrez les JPG). Corrigez et répétez. Vérifiez les 5 images d'accroche à 0, 0,5, 1, 2, 3 s par rapport à references/SCRIPT.md (règles d'accroche).
10. Son : éditez mix.py (DUR, SCN, un son par changement d'image ; references/SOUND.md), exécutez python reels/<slug>/mix.py. Un autre fond sonore : python "SKILL/scripts/music.py" search "lofi chill" puis pull <id> reels/<slug> (uniquement CC0).
11. Rendu : node "SKILL/engine/render.cjs" reels/<slug> puis python "SKILL/scripts/finish.py" reels/<slug> (doit afficher PASS) et node "SKILL/engine/shot.cjs" reels/<slug> cover 0.6.
12. Remettre reels/<slug>/out/final.mp4 et out/cover.jpg, ainsi qu'une légende avec les mots-clés du sujet en ligne 1, 3 à 5 hashtags, et les sources de facts.md.

Règles qui retiennent l'attention (basées sur des résultats réels, pas de la théorie)

• La révélation va en ligne 1. « 7 raccourcis Claude Code que presque personne n'utilise » bat « Aujourd'hui je veux vous montrer quelque chose ».
• Mouvement à l'image 0. Commencez les entrées à des temps négatifs (popV(t,-0.3,...)) pour que la première image soit déjà en mouvement. Jamais de première image vide ou statique.
• Un seul look de la première à la dernière image. Ne passez jamais du sombre au clair : cela donne l'impression d'une nouvelle vidéo et les gens balayent.
• Pour les listes : un en-tête qui compte (RACCOURCI 3/7 + points), et une boucle ouverte en ligne 2 (« et le numéro sept me fait gagner des heures ») récompensée à la fin.
• Une nouvelle image toutes les 0,8 à 1,5 s. Montrez l'effet, ne le décrivez pas.
• La voix est au premier plan. La musique est basse (les valeurs par défaut dans sfx.mix_reel sont testées).
• L'appel à l'action est écrit pour ce reel uniquement (enregistrez-le, envoyez-le à la personne concernée, ou posez une vraie question). Jamais « suivez pour plus ».

En cas de problème

references/TROUBLESHOOTING.md. Les problèmes courants : ffmpeg absent du PATH, Chromium non installé, 429 de l'API vocale (limite gratuite pour l'instant : attendez ou activez la facturation), un CLIP du juge (texte plus large que sa carte : raccourcissez-le ou élargissez la carte jusqu'à 920 px).