Product Motion Ad (Remotion + ElevenLabs)

Que fait Product Motion Ad (Remotion + ElevenLabs) ?

Résultat final : MP4 1920×1080 30 fps, 30–45 secondes, accroche solide, VO dans la langue cible qui sonne naturelle, SFX professionnels, transitions rapides comme les références, et déroulement = flux réel du produit. Livré à l'utilisateur via SendUserFile.

Le modèle testé se trouve dans template/ (dossier de cette compétence). Un exemple complet de 13 scènes issu d'un projet réel est disponible dans references/example-scenes-threads-automation.tsx.txt et references/example-promo-threads-automation.tsx.txt. Lisez references/script-and-storyboard.md avant d'écrire le script et references/elevenlabs.md avant de créer l'audio.

Principes à ne pas enfreindre

1. Le produit doit être clair dans les 8 premières secondes : nom du produit + « fait quoi pour qui ».
2. L’ordre des scènes = l’ordre du flux d’utilisation du produit (inscription/connexion -> configuration -> processus principal -> résultat -> fonctionnalités avancées -> preuve de résultat -> CTA). Ne pas mélanger.
3. Une phrase VO = une scène = un avantage + sa preuve visuelle (UI animée : formulaire rempli, bouton cliqué, carte de résultat apparaissant, chiffre qui monte). Pas seulement du texte.
4. Faits provenant de la source du produit, pas d’invention : lisez le code/landing/onboarding/la page « comment ça marche ». Les chiffres d’exemple (vues, scores) peuvent être illustratifs, mais mentionnez à l’utilisateur qu’il s’agit d’une illustration.
5. Rythme rapide comme les références : transition sur 10 frames (T = 10), animations intérieures accélérées avec speed 1.5–3. Ne ralentissez pas une scène pour combler une VO lente — améliorez la VO.
6. VO humaine : une seule prise complète, style conversationnel, rythme rapide, sans balises d’émotion par ligne. Pas de phrases séparées (c’est ce qui rend le rendu rigide).
7. Suivez les règles de performance de l’utilisateur : une seule mesure de début et de fin, ne relancez pas le rendu sans raison.

Flux de travail

1. Collecte des éléments (en parallèle si possible)

• Produit : dans le dépôt, cherchez le texte de la landing page, de l’onboarding, de la page « comment ça marche »/fonctionnalités, les noms de fonctionnalités dans l’UI (Grep des chaînes UI). Hors dépôt : demandez une description/URL. Écrivez un tableau flux d’avantages : Étape | Action utilisateur | Avantage | Preuve visuelle (UI affichée).
• Marque : couleurs et police depuis le CSS (globals.css, thème Tailwind, CSS de la landing), logo depuis public/. Remplissez template/src/theme.ts (C, GRADIENT, font, BRAND).
• Références de style (si une vidéo est fournie) : extrayez les images avec ffmpeg intégré à Remotion puis visualisez la planche contact : npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png (les filtres fps=/tile NE sont PAS disponibles dans ffmpeg Remotion ; utilisez -r et scripts/contact-sheet.cjs). Notez : arrière-plan (blob flou/grille de points), apparition du texte, coupes franches, UI 3D, clic du curseur, glow, rythme.

2. Script & storyboard

Suivez references/script-and-storyboard.md : accroche en trois temps (fossé de curiosité), 1 ligne ≤ 10 mots par scène, style conversationnel, première phrase commençant par un mot d’introduction (« Eh, ») pour éviter une mauvaise prononciation du mot-clé à la seconde 0, CTA court. Montrez le script + l’ordre des scènes à l’utilisateur uniquement si le brief est ambigu ; sinon, passez directement à la réalisation.

3. Projet Remotion

• Copiez template/ dans un nouveau dossier du dépôt utilisateur (ex. promo-video/), npm install.
• Si le dépôt est un autre projet Next.js/TS : ajoutez ce dossier dans exclude du tsconfig.json racine et dans globalIgnores d’ESLint. Le dossier a déjà son propre .gitignore (node_modules, out).
• Copiez le logo dans promo-video/public/ et définissez BRAND.logo.
• Écrivez les scènes par produit dans src/scenes.tsx (utilisez les motifs des exemples : useFrame(), useRise/rise, glass/white, StepTag, Words, typed+Caret, Cursor, BlurFilter). La scène générique makeFeature n’est utilisée que pour les prototypes.
• Remplissez DEFS dans src/Promo.tsx : ordre des scènes, cue (phrase d’introduction de la phrase VO), beats (accroche), speed, transition, dark, sfx.

4. Audio ElevenLabs (voir references/elevenlabs.md)

• VO en une seule prise -> public/vo/full.mp3 ; transcription Scribe mot par mot -> public/vo/words.json. Vérifiez la transcription (mots mal prononcés ? lignes manquantes ?).
• Pack SFX de 10 fichiers -> public/sfx/*.mp3.
• Timeline automatique : la scène commence 6 frames avant que la phrase cue ne soit prononcée ; les SFX sont placés au moment prévu par la scène (divisé par speed).

5. Rendu & vérification

• npm run typecheck puis npm run render (port 3456 — le port 3000 est souvent utilisé par le serveur de développement Next, le rendu échouerait avec « not a valid Remotion project »).
• Lancez le rendu en arrière-plan s’il dure plus de 2 minutes.
• Vérifiez le rendu visuel : node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk puis lisez la planche. Pour des secondes spécifiques, donnez une liste de secondes. (L’échantillonnage -r de ffmpeg montre souvent des premières frames vides par erreur — vérifiez une seconde spécifique en cas de doute.)
• Vérifiez : le texte n’est pas flou en permanence, n’est pas coupé/enveloppé, les étiquettes d’étape ne sont pas masquées par un panneau, les animations clés sont terminées avant le changement de scène, le texte affiché = les mots de la VO.
• Envoyez avec SendUserFile (affichez render), rapportez la durée, la taille et ce qui n’a pas été vérifié (ex. niveau audio non écouté directement).

Pièges déjà rencontrés (à éviter)

Problème	Cause	Solution
Texte d’accroche flou en continu	valeur de flou de la phase précédente (out1) reste à 1	calculez le flou par phase : entrée/sortie uniquement
Vidéo devenue lente	scène étirée pour suivre une VO lente	VO plus rapide & script plus court ; speed maintenu
VO rigide	clips par phrase + balise [excited] par ligne + langage formel	une seule prise, style conversationnel, sans balises répétées
Premier mot mal prononcé (« compte » -> « conte »)	v3 souvent erroné sur le premier mot	commencez par « Eh, » / « Bon, » et vérifiez la transcription Scribe
Échec du rendu « getStaticCompositions undefined »	port 3000 utilisé par Next dev	--port=3456
Erreur fps=/tile	ffmpeg Remotion limité	-r + contact-sheet.cjs (sharp)
Phrase enveloppée sur 2 lignes & avatar coupé	élément flex rétréci	flexWrap: "nowrap", réduire la police
Panneau masque l’étiquette de l’étape	translationY de la caméra trop grande	limitez le mouvement de la caméra, scale(0.92)
Chip/carte se chevauchent	positions polaires trop proches	vérifiez la planche contact, ajustez l’angle/le rayon
useId() dans url(#id) cassé	l’id contient :	utilisez useFilterId() (assainissement)
MCP ElevenLabs ne se charge pas après connexion	nouvel outil apparaît dans une nouvelle session	utilisez l’outil directement s’il est disponible ; sinon, claude -p headless (voir les références)
MCP échoue « Protected resource ... does not match »	région de l’hôte	claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp