reels-motion

Que fait reels-motion ?

Produit un reel vertical (1080×1920, 30 fps, ~40–50 s) avec le style « Terminal Pop » : fond sombre avec grille, une seule couleur d'accent, texte grand mot par mot avec un mot-clé dans une boîte colorée, une mascotte pixel qui exécute l'action, un compteur 01 / 04 et un CTA avec mot-clé à la fin.

Fichiers de cette skill (chemins relatifs à ce dossier) :

• references/motion_system.md : palette, typographie, mouvement, transitions, composition et rythme. À lire avant de concevoir.
• template/ : projet Remotion complet et fonctionnel (le reel « Cartuchos » sur ce qu'est une skill). Utilise-le comme base ; ne pars pas de zéro.
• template/README.md : structure du projet, commandes et réglages.

Flux

1. Comprendre la demande

Ne pose que les questions manquantes : thème, public, @ du compte, mot-clé du CTA et ce qui est livré à celui qui commente, si une voix off est présente (et quelle voix ElevenLabs) et la durée approximative.

2. Script et storyboard (montre-les et attends l'OK avant d'animer)

• Structure : accroche (≤ 2 s) → 4 sections avec HUD 01–04 → CTA (~4 s).
• Accroche : 3 impacts de texte, le dernier avec le mot-clé dans une boîte et une action de la mascotte sur cet impact.
• Phrases de voix : ≤ 14 mots, parlées et non lues du texte à l'écran. À l'écran, ≤ 6 mots par phrase.
• Mascotte : chaque section nécessite une action qui explique le concept (brancher, choisir, scanner…), pas de décoration.
• CTA : « Commente MOT_CLÉ et je t'envoie X », avec le mot dans une boîte d'accent.

3. Créer le projet

cp -r <chemin-de-cette-skill>/template <dossier-utilisateur>/<nom-du-reel>
cd <dossier-utilisateur>/<nom-du-reel>
npm install

Demande à l'utilisateur un chemin court. Sous Windows, les chemins longs (plus de ~200 caractères) empêchent le démarrage de Chrome utilisé par Remotion pour le rendu.

4. Adapter au thème

• src/config/texts.ts : tous les textes à l'écran et BRAND.handle. [mots] = boîte d'accent.
• src/config/voiceover.ts : script par scène, divisé en blocks (une phrase chacun).
• src/config/theme.ts : couleur d'accent et positions.
• src/scenes/S2…S5 : sont l'exemple « Cartuchos ». Pour un autre thème, réécris l'action de chaque section en réutilisant components/ (Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx) et lib/anim.ts. Garde le motif : chaque phase démarre avec cue('scène', n, fallback), qui est le début de la phrase n de la voix.
• Bit : la matrice MAP de src/components/Bit.tsx (16×16) définit sa forme ; change-la si le compte a une autre mascotte.

5. Effets sonores

npm run sfx synthétise les .wav de public/sfx/. Place-les avec <Sfx name="…" at={frame} /> en utilisant les mêmes constantes que l'animation. Volume et on/off dans src/config/audio.ts.

6. Voix off (choisis une voie)

• Clé API personnelle : ELEVENLABS_API_KEY dans .env, voice ID dans VOICE.voiceId et npm run voiceover. Génère un MP3 par scène et écrit src/config/voiceover.generated.ts avec le début exact de chaque phrase.
• Connecteur ElevenLabs dans Claude : génère chaque scène avec le texte exact de ses blocks concaténés et télécharge les MP3 dans public/voiceover/<reel>/. Le connecteur ne fournit pas de timestamps, donc :
  1. Décode chaque MP3 en WAV (npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav).
  2. Mesure dans Node l'énergie sur des fenêtres de 10 ms et détecte les pauses de 80 ms ou plus.
  3. Assigne chaque phrase à la pause la plus proche de sa position attendue (proportionnelle aux caractères).
  4. Écris manuellement voiceover.generated.ts avec duration = fin de la parole (sans le silence final) et blockStarts.
• Sans voix : laisse VOICE_TIMINGS = {} et les scènes utilisent les fallback de chaque cue.

7. Rythme

Chaque scène dure ce que sa phrase + 0,2–0,4 s de respiration jusqu'à la voix suivante : SCENES.x ≈ (fin de la parole + 0,3 s) × 30. Accroche ≤ 2 s. Le CTA laisse ~1,5 s après la voix pour le lire. La voix n'est jamais coupée : chaque MP3 commence avec sa scène et sa queue de silence peut sonner sous la suivante. Si une animation est trop serrée, simplifie-la ; ne l'accélère pas.

8. Vérifier avant de livrer

1. npx tsc --noEmit.
2. Rends les images clés (accroche, chaque section et CTA) et regarde-les : texte mal coupé, chevauchements, zone de sécurité (120 px en haut, 340 px en bas, 64 px sur les côtés) et que le @ tienne sur une ligne.
3. Mixage : rends deux pistes WAV séparément (--codec=wav), une avec sfxEnabled = false et l'autre avec voiceEnabled = false, et compare leur volume toutes les 0,1 s. Pendant la voix, les effets doivent rester ≥ 10 dB en dessous ; sinon, baisse le gain de cet effet dans audio.ts. Le ffmpeg de Remotion n'a pas volumedetect : décode en WAV et mesure dans Node.
4. Rendu final : npx remotion render ReelCartuchos out/<nom>.mp4.

9. Vignette et publication

• Vignette : npm run thumbnail (composition Miniatura, frame 29). Le contenu doit tenir dans le recadrage 4:5 (et 285–1635).
• Textes : livre la description pour TikTok (courte, CTA, 3–5 hashtags) et Instagram (valeur en étapes, CTA, max. 5 hashtags), le texte alternatif et le message de DM automatique pour le mot-clé.

Erreurs connues

• Windows, Failed to launch the browser process … ENOENT : chemin trop long. Utilise un dossier court ou --browser-executable=<chemin court>/chrome-headless-shell.exe.
• Titres invisibles sur un still du frame 0 : les entrées commencent à une opacité de 0. Rends la vignette au frame 29.
• generate-*.ts : nécessitent Node 22.18+ (TypeScript natif).