Vidéo publicitaire produit, réalisée en code
Un pipeline pour des pubs produit de 15 à 20 secondes sans éditeur vidéo : chaque image, son et voix est généré par des scripts, rendant l'ensemble reproductible et éditable en texte.
faits du projet ─► brief + storyboard ─► visuels ─────────────► Rendu Remotion ─► MP4
├ 2D : React (Remotion) ▲
└ 3D : Blender (headless) ─► Images JPG
son : scripts/score.py ─► WAV ┘
voix : scripts/kokoro_tts.py ─┘
Exemple concret (GhostCommits, fichiers réels) : examples/ghostcommits/.
Étape 1 — Comprendre le produit, rédiger le brief
Lisez le README, la landing page et le code. Extrayez : un pitch en une ligne, 3 à 4 preuves concrètes (les chiffres sont meilleurs que les adjectifs : « 1 fichier », « 0 connexion »), les couleurs de la marque depuis le CSS, le logo SVG, l'URL. Notez ce qui ne doit PAS être revendiqué (par exemple « testnet uniquement », « pas anonyme », pas de comptes utilisateurs). Chaque ligne à l'écran et chaque ligne de voix est vérifiée par rapport à cette liste. Demandez à l'utilisateur de choisir une palette/un style uniquement si la marque n'en définit pas déjà une.
Étape 2 — Storyboard (écrivez-le dans un fichier .md avant de construire)
18 s à 30 ips = 540 images. 5 à 6 plans d'environ 2,5 s (75 images, soit une mesure à 96 BPM, donc les coupes tombent sur le temps). Chaque plan : images, caméra/mouvement, texte à l'écran, son. Terminez par un carton final de 3 à 4 s (nom, tagline, URL). Modèle : references/storyboard.md.
Étape 3a — Style 2D (Remotion)
Typographie cinétique + formes plates, énergie « Spotify Wrapped ». Voir references/remotion-2d.md. Lancez npx create-video@latest --yes --blank --no-tailwind video puis un composant par annonce, piloté uniquement par useCurrentFrame() + interpolate avec easing. Pas de transitions CSS.
Étape 3b — Style 3D (Blender, headless)
Objet principal brillant dans un vide noir, macros plans rapprochés, traînées de lumière sur la surface, coupes franches, grand chiffre + petite légende en bas à gauche. Voir references/blender-3d.md. Un script Python construit la scène, keyframe chaque plan et rend les images : blender -b --factory-startup -P scene.py -- anim ../public/frames. Remotion superpose le texte sur les images (examples/ghostcommits/GhostAdV2.tsx). Rendez d'abord 2 à 3 images fixes et examinez-les avant l'animation complète.
Étape 4 — Son (scripts/score.py)
Écrivez une feuille de repères JSON : une entrée par événement visuel, indexée par le numéro d'image extrait du code d'animation (coupe → cut_hit, objet qui vole → whoosh, atterrissage → click/lock, traînée de lumière → glint, carton final → impact, accumulation → riser). Ensuite python scripts/score.py cues.json. Cela synthétise tout (pas d'échantillons, pas de licences), ajoute un fond musical à 96 BPM qui s'arrête au break_frame et se résout au end_frame, et affiche la sonie par seconde pour une vérification sans écoute. Détails et réglages de gain : references/sound.md.
Étape 5 — Voix off (optionnelle)
Phrases courtes, ≤ 6 mots, une par plan, correspondant au texte à l'écran. Meilleure option gratuite : python scripts/kokoro_tts.py lines.txt vo/ (Kokoro hébergé, 3 voix à comparer). Ajoutez les fichiers à la liste voiceover de la feuille de repères avec les temps de début = quand le texte de ce plan apparaît ; score.py supprime le silence et baisse la musique sous la voix. Mesurez la longueur de chaque phrase et assurez-vous qu'elle se termine avant que la suivante ne commence. Options et leçons : references/voiceover.md.
Étape 6 — Rendu et livraison
<Html5Audio src={staticFile("audio/soundtrack.wav")} /> dans la composition, puis npx remotion render <CompositionId> out/ad.mp4. Envoyez le MP4 à l'utilisateur. Dites clairement que vous ne pouvez pas entendre l'audio : les niveaux et le timing ont été vérifiés numériquement, pas à l'oreille.
Règles importantes
- Copie honnête : aucune affirmation que le produit ne peut pas justifier ; gardez les avertissements (bêta, testnet) à l'écran.
- Ne recréez pas la publicité d'une marque spécifique (logos, musique, personnages) — empruntez uniquement le style.
- Texte ≥ 48 px en 1080p, à l'écran ≥ 1,2 s, en bas à gauche ou centré, jamais sur le visage du personnage principal.
- Rendez des images fixes avant le rendu complet ; vérifiez une image de chaque plan.
- Gardez les images et l'audio générés hors de git (
.gitignore) ; versionnez les scripts + le storyboard.