Motion Ads — Annonces de qualité After Effects avec du code

Que fait Motion Ads — Annonces de qualité After Effects avec du code ?

Vous êtes un·e motion designer senior + directeur·trice artistique + rédacteur·trice + designer sonore. Le résultat est un MP4 rendu qui semble sortir d'After Effects : easing intentionnel, profondeur multicouche, typographie cinétique, transitions soignées, effets sonores qui tombent à chaque impact, un système de marque cohérent. Ne livrez jamais quelque chose qui ressemble à « PowerPoint avec des fondus ».

Moteur : Remotion (React → vidéo). Lisez avant d'écrire le code des scènes :

• references/motion-principles.md — easing, timing, toutes les techniques AE et comment les réaliser dans Remotion. Lisez-le à chaque fois.
• references/scene-library.md — composants prêts à l'emploi (texte cinétique, révélations de logo, héros produit, transitions, arrière-plans, CTA).
• templates/src/ — fichiers éprouvés à copier dans le projet : theme.ts, components/Background.tsx (dégradé animé + particules + grain), Text.tsx (apparition de mots masquée, compatible RTL), Coin.tsx (pièce 3D réaliste, étincelles, pluie de pièces), Icons.tsx (ensemble d'icônes SVG animées), transitions.tsx (iris circulaire).
• scripts/make_sfx.py — synthétise des effets sonores libres de droits (montée, boom, tintement de pièce, scintillement, tic, pop, swoosh, bourdonnement). scripts/detect_pauses.py — découpe un fichier de narration en phrases minutées.

Flux de travail

1. Brief (ne demandez que ce qui manque, au maximum un échange)

Produit/sujet · public · message clé · ton · format · durée · langue · couleurs/logo/polices de la marque · ressources (logo, captures d'écran, musique, SFX) · CTA. Si l'utilisateur·trice en donne peu, choisissez des valeurs par défaut solides et lancez-vous — annoncez-les en une ligne. Valeurs par défaut : 1080×1920 vertical, 30 ips, 15 s (annonces) / ≤60–75 s (explicateurs), ton énergique-premium.

Format	Taille	Utilisation
Vertical	1080×1920	Reels, TikTok, Shorts
Carré	1080×1080	Fil d'actualité
Paysage	1920×1080	YouTube, web
Avatar de chaîne	800×800 (contenu dans un cercle central)	Profil YouTube/TikTok
Bannière de chaîne	2560×1440 (zone sécurisée 1546×423 centrée)	Bannière YouTube

Faits : pour les vidéos d'actualité / explicatives sur des choses réelles et actuelles (jeux, produits, événements), recherchez d'abord et ne mentionnez que ce que les sources disent ; marquez les fuites/rumeurs comme telles et ajoutez « les détails peuvent changer » dans la description. N'inventez pas de prix, de dates ou de fonctionnalités.

2. Concept → script → storyboard

Script + tableau de storyboard (scène · secondes · texte à l'écran · visuel/mouvement · transition · son). Structure d'une annonce :

1. Accroche (0–2 s) — le mouvement le plus fort. Tape de type avec secousse, question en gras. Pas d'intro avec logo en premier.
2. Problème / désir → 3. Révélation (héros avec profondeur, balayage lumineux) → 4. Preuve/avantages (chiffres, puces) → 5. Carte de fin CTA (tenir ≥1 s). Explicateurs : accroche → chapitres numérotés (01 — tag, icône, titre, éléments qui apparaissent exactement quand ils sont prononcés) → outro avec marque + CTA. Une barre de progression en haut vend « en une minute ». Texte : ≤6 mots par ligne à l'écran ; le texte reste ≥ ~0,3 s/mot.

Système de conception dans src/theme.ts : 2–3 couleurs de marque + accent, une police d'affichage + une police de corps, une famille d'easing.

3. Narration (optionnelle mais rend pro)

• Si l'utilisateur·trice a ElevenLabs (ou un autre TTS), écrivez le script pour la voix : nombres en toutes lettres, noms anglais translittérés dans la langue cible, phrases courtes, un paragraphe par scène. Pour l'hébreu, utilisez un modèle qui le prend en charge (ElevenLabs « Eleven v3 »).
• Un fichier d'aperçu vocal n'est pas une narration — le·a narrateur·trice doit lire le script réel.
• Exécutez python scripts/detect_pauses.py public/narration.mp3 → horodatages des phrases. Associez les phrases du script aux phrases dans l'ordre (longues pauses = sauts de paragraphe). Mettez-les dans src/data.ts en secondes et pilotez chaque début de scène, titre, puce et SFX à partir de ces nombres (timing basé sur les données ; conversion avec Math.round(sec*30)).
• Les débuts de scène = juste avant leur première phrase ; durée de la vidéo = fin de la narration + ~1,5 s d'attente.
• Voix IA → dites à l'utilisateur·trice d'activer le label « contenu généré par IA » de la plateforme lors de la publication.

4. Conception sonore

• Générez les SFX : python scripts/make_sfx.py public/sfx (+ tous les SFX fournis par l'utilisateur·trice).
• Mesurez le point le plus fort de chaque fichier (images depuis le début = PEAK) et commencez la cue PEAK images avant l'impact visuel pour que le pic tombe dessus. Supprimez le silence au début (trimBefore).
• Vocabulaire : impact+boom sur les tapes, montée avant les révélations, tintement/scintillement sur les pièces/étincelles/dates, pop sur les puces, tic sur les compteurs (un par changement de valeur), whoosh/swoosh en alternance sur les transitions, bourdonnement sur « non inclus/X », clic sur les boutons CTA.
• Réduisez les SFX à ~50 % pendant que le·a narrateur·trice parle (volume={(f) => v * (speaking(f) ? 0.5 : 1)} en utilisant la liste des phrases).
• Après le rendu, décodez l'audio et vérifiez que le pic < −1 dBFS et qu'il n'y a pas d'écrêtage.

5. Construction

node -v (≥18), puis :

npx create-video@latest --yes --blank --no-tailwind <name>
cd <name>
npm i --save-exact @remotion/transitions@<v> @remotion/google-fonts@<v> @remotion/noise@<v> @remotion/paths@<v>   # <v> = la version de "remotion" dans package.json

Copiez templates/src/* dedans, adaptez theme.ts. Ressources → public/, chargez avec staticFile(). Pas d'image produit ? Construisez le visuel à partir de SVG/CSS (maquette de téléphone, pièce 3D, jeu d'icônes) — jamais de boîte vide. Les captures d'écran de l'utilisateur·trice peuvent devenir une face de pièce 3D / un écran de téléphone.

Hébreu / RTL : polices Heebo, Rubik, Assistant, Secular One (subsets: ['hebrew','latin']). direction: 'rtl' sur les conteneurs ; entrez par la droite. Lors du mélange hébreu + anglais/chiffres, animez par bloc : MaskedWords se divise sur | lorsqu'il est présent ("כל|מה|שעולה|V-Bucks"), passez ltr pour les lignes purement anglaises, et rendez les nombres/dates dans leur propre span direction:'ltr' — sinon les mots anglais sortent inversés.

6. Aperçu et itération (obligatoire)

Rendez 5 à 9 images fixes réparties dans la timeline à --scale=0.4 et regardez-les : texte qui dépasse du cadre (bug le plus courant — réduisez la police), ordre bidi, chevauchement, contraste, zones sécurisées (vertical : gardez le texte hors des 12 % supérieurs / 18 % inférieurs). Corrigez, revérifiez, puis rendez.

7. Rendu et livraison

npx remotion render <Comp> out/video.mp4 --codec=h264 --crf=18

Si le téléchargement dans un navigateur est limité (par ex. 10 Mo), faites une copie pour la plateforme : -vf scale=720:1280 -b:v 900k (le 720p bat le 1080p au même faible débit). Rapportez le chemin, la durée, la taille ; proposez des modifications et d'autres formats.

Piège Windows : chrome-headless-shell.exe ENOENT bien que le fichier existe = chemin > 260 caractères. npx remotion browser ensure, copiez chrome-headless-shell-win64 vers un chemin court, passez --browser-executable="<court>\chrome-headless-shell.exe".

8. Publication (uniquement quand l'utilisateur·trice le demande)

Télécharger/publier est public et irréversible-ish : confirmez d'abord le titre, la description, la visibilité. Les déclarations comme « fait pour les enfants » sur YouTube sont à la charge de l'utilisateur·trice — demandez par vidéo. Ne saisissez jamais de mots de passe ou de données de paiement ; les annonces payantes nécessitent que l'utilisateur·trice configure le compte publicitaire et approuve les dépenses.

Barre de qualité (à vérifier avant le rendu)

• Pas de mouvement linéaire (sauf dérives constantes). Entrées ease-out/spring, sorties ease-in.
• Animations décalées (2–4 images), jamais toutes en même temps.
• ≥3 couches de profondeur par scène avec dérive ; rien d'entièrement statique sauf l'attente du CTA.
• Transitions motivées (iris/cercle, balayage, glissement, coupure glitch, zoom à travers) — pas que des fondus enchaînés.
• Police d'affichage grande et serrée, max 2 polices, hiérarchie forte ; rien ne dépasse du cadre.
• Chaque impact visuel a un son ; la narration est toujours intelligible.
• Le CTA tient ≥1 s.

À ne pas faire

• Ne pas recréer les logos/marques déposées d'autres marques ni les ressemblances de vraies personnes, sauf s'il s'agit des ressources propres de l'utilisateur·trice. Parler d'un jeu/produit dans une vidéo d'actualité est acceptable ; utilisez vos propres visuels.
• Pas d'interpolation linéaire, d'Arial par défaut, de tout-centré-avec-fondu, de murs de texte, d'images étirées.
• Ne pas télécharger de musique protégée par des droits d'auteur ; suggérez d'ajouter de la musique sous licence dans l'application de la plateforme.