maddexritter-rgb/vibe-editing-promo

/promo — Générateur de vidéos de marque (Remotion + Claude Code)

Produit deux types de vidéos promotionnelles premium. Propulsé par Remotion (vidéo basée sur React) + Claude Code + la compétence remotion-best-practices.

🎬 CHOISISSEZ LE MODE D'ABORD (demandez à l'utilisateur si ce n'est pas évident)

• MODE A — EXPLICATION / DÉMO ANIMÉE. Entièrement animé, sans séquence longue réelle comme colonne vertébrale. Démos de decks, lancements de fonctionnalités, la vidéo du rouage du contenu, promos SaaS, explications de marque. → construit à partir de templates/glass/ (verre liquide premium) ou templates/saas/. Voir la section verre ci-dessous. Exemple concret : ~/Downloads/engine/2026-06-12_WorkflowDemo (la composition FlywheelFilm).
• MODE B — FILM D'ARCHIVE / HISTOIRE D'ORIGINE. L'utilisateur vous remet un long montage brut (son propre montage — vraies séquences, chapitres séparés par des plans noirs) et souhaite qu'il soit transformé en film de marque : cartes de chapitre entre les sections, musique adaptée à chaque scène, transitions flash, et une conclusion en courbe de croissance. → cartes d'époque + assemble.py. Voir la section MODE B ci-dessous. Exemple concret : ~/Downloads/engine/2026-06-14_BrandHistory (un film d'origine « 4,5 ans en ~5 minutes »).

Les deux modes partagent le même kit de verre tokenisé pour la marque (sting, GlassBG, cartes d'époque, courbe de croissance, constants.ts de marque), ils forment donc une seule famille. Re-brandez par marque dans constants.ts + logos dans public/ — ne codez jamais en dur un nom de marque dans un composant.

Quand utiliser cette compétence (vs d'autres compétences vidéo)

• ✅ Utilisez ceci : vidéos promotionnelles autonomes, démos SaaS, teasers de cours, vidéos de lancement de fonctionnalités, explications animées à partir d'une URL.
• ❌ N'utilisez pas ceci : clips en plan poitrine, recadrage avec suivi du visage, suppression de mots de remplissage, sous-titrage de vidéo existante (utilisez plutôt shortform / caption-clips).

Modèles d'animations SaaS prêts à l'emploi

Trois composants Remotion prêts pour la production pour le « style d'animation SaaS » (le style à 1000-2000 $/vidéo qui domine Instagram/TikTok tech en 2026). À intégrer dans n'importe quel projet Remotion :

• templates/saas/SaasTextPopup.tsx — Intro de marque de 4s avec texte pop-in + logo reveal.
• templates/saas/SaasGlassReveal.tsx — Cartes de fonctionnalités UI en verre de 6s avec flou d'arrière-plan.
• templates/saas/SaasDashboardTour.tsx — Tour de tableau de bord 3D de 8s avec curseur animé.

Référence technique complète dans editing-styles/saas-animation-style.md. Orchestrateur en chaîne dans saas-animation-video — déclenchez avec « crée une vidéo d'animation SaaS ».

Voir templates/saas/README.md pour le câblage et la personnalisation de la marque.

---

🟣 VIDÉOS DE DÉMO / EXPLICATION VERRE LIQUIDE PREMIUM — templates/glass/

Le système derrière la vidéo de présentation haut de gamme et native de la marque (le genre qui s'insère dans un deck de diapositives comme démo en direct). Utilisez ceci — pas les modèles SaaS — lorsque le brief est une démo/explication soignée, axée sur un deck ou un concept avec de vraies séquences, une vraie UI de produit, et un texte audacieux à l'écran au lieu d'une voix off. Exemple concret : ~/Downloads/engine/2026-06-12_WorkflowDemo (la composition FlywheelFilm — une démo du rouage de contenu). 1920×1080 @ 30 ips, tiers inférieurs audacieux, pas de VO.

INDÉPENDANT DE LA MARQUE. Le kit est tokenisé pour la marque. Définissez la marque dans src/constants.ts (COLORS + police) et déposez les PNG du logo de la marque dans public/. L'exemple utilise Speaker / company.com (Sambucus #131628, Indigo Électrique #6f00ff, Lavande #a08bec, Poppins) — échangez ces jetons par marque ; ne codez jamais en dur un nom de marque dans un composant.

Ce que contient le kit (templates/glass/src/)

• constants.ts — jetons de marque (COULEURS, FPS, LARGEUR, HAUTEUR, préréglages de ressort). L'endroit UNIQUE pour re-brander.
• components/GlassBG.tsx — fond de dégradé avec orbes dérivants persistant (la base à flux continu ; se trouve derrière chaque battement).
• components/GlassPanel.tsx — le panneau en « verre liquide » givré (flou de filtre d'arrière-plan + éclat + profondeur). Variante dark pour la lisibilité du texte. backdrop-filter REND DANS le Chrome sans tête de Remotion.
• components/GlassBeats.tsx — les primitives de battement : GlassTitle (carte d'accroche), GlassFrame/SceneDemo (UI dans une fenêtre en verre + narration), GlassOutro (carte de conclusion + logo), PayoffCard.
• components/BrandSting.tsx — Sting de logo d'environ 1,5s (traînées → flash → éclat de marque → mot-symbole).
• components/CreateShots.tsx — NarratorChip (la légende audacieuse du tiers inférieur = la couche « texte audacieux, pas de VO ») + plans de lecteur média.
• components/Flywheel.tsx — battements signatures : ContentFlywheel (l'ANNEAU de boucle de cumul), FlywheelEscalation (conclusion en pile de deck), AutoPostScheduler (terminal en direct + véritable enregistrement d'écran, côte à côte), RawSessionPlayer, HeroClipPlayer (clip dans un cadre de téléphone), Tier1Prompt/Tier1Pipeline (commande + étapes).
• components/ChannelScroll.tsx — un véritable flux de chaîne qui défile (vignettes + durées). RealClipShowcase.tsx — une grille de véritables clips verticaux en lecture. GlassBrowser.tsx — UI d'application dans un cadre de navigateur. ScaleWall/Odometer/Stopwatch — volume + drame numérique. FXOverlay — grain/vignette.
• audio/index.tsx — AudioBed (musique, faible) + Sfx (whoosh/braam/riser/tick…) avec une carte de gain MASTER.
• compositions/FlywheelFilm.tsx — l'exemple concret : sting → accroche → preuve brute → commande → pipeline → (milieu : chaîne + terminal auto-post/enregistrement) → (courts : héros + grille) → anneau flywheel → escalade → conclusion.

Le manuel de production (l'ordre qui fonctionne)

1. Lisez le matériau source EN PREMIER (le deck / le brief). Extrayez le concept ET le langage propre de la marque — tirez des lignes textuelles pour les battements afin que la vidéo semble naturelle par rapport à leur discours. (N'inventez pas de copie générique.)
2. Définissez les jetons de marque dans constants.ts ; déposez les logos dans public/ (voir l'écueil n°5 sur les PNG de logo).
3. Storyboardez les battements avec TransitionSeries (sting → accroche → battements de démo → boucle de conclusion → escalade → conclusion). Gardez-le serré (~38–45s) — battements rapides, tiers inférieurs audacieux. (« Trop lent » est la remarque n°1.)
4. Câblez les actifs réels (voir les modèles ci-dessous) — vraies séquences/UI > maquettes, à chaque fois.
5. Rendu : npx remotion render <IdentifiantComp> out/<nom>.mp4 --codec=h264 --crf=16 (ajoutez « utilise les meilleures pratiques Remotion » lorsque vous demandez des modifications).
6. QC EN EXTRAYANT DES IMAGES — ne faites jamais confiance à l'aveugle (écueil n°1).
7. Livrez dans le dossier 20_DELIVER/ du projet (nommé par la marque). Local uniquement sauf indication contraire.

Modèles d'actifs réels

• Séquences → <OffthreadVideo muted startFrom={..} playbackRate={..} /> à l'intérieur d'un cadre de lecteur/téléphone/navigateur en verre. Créez des proxies (720×1280 / 1080) pour que le studio et le rendu restent rapides.
• Enregistrements d'écran → recadrez UNIQUEMENT sur l'UI de l'application (supprimez l'onglet du navigateur/la barre d'adresse/la bannière) : ffmpeg -ss A -t B -i rec.mov -vf "crop=W:H:0:Y,scale=1600:-2" -an out.mp4. Accélérez (playbackRate 2–3,5×) pour qu'il progresse visiblement à travers les étapes, sans s'attarder.
• Terminal + enregistrement côte à côte (le battement tueur) : un terminal stylisé dont le journal reflète la sortie standard du VRAI script (lisez la compétence/le script réel pour obtenir des lignes authentiques) à côté de l'enregistrement d'écran réel — les deux lisant les mêmes noms vendent le concept d'un seul système. Voir AutoPostScheduler.
• Données/vignettes réelles → extrayez en direct : yt-dlp "https://youtube.com/@CHAINE/videos" --flat-playlist --print "%(id)s|%(duration_string)s|%(title)s", puis les vignettes depuis https://i.ytimg.com/vi/<id>/maxresdefault.jpg (repli mqdefault.jpg). Pour les données de clip Speaker, l'outil MCP your analytics.

🛑 LES ÉCUEILS — chacun est une correction réelle issue de la construction de ceci ; lisez avant de lancer le rendu

1. QC par images, jamais à l'aveugle. Après chaque rendu, ffmpeg -ss <t> -i out.mp4 -frames:v 1 f.jpg sur CHAQUE battement et regardez vraiment. Rendez la première moitié tôt avec --frames=0-540 pendant que les actifs finissent.
2. Salade de texte de transition. Deux battements de texte qui se fondent en fondu enchaîné se chevauchent en un fouillis illisible. CORRECTION : fondez le contenu de chaque battement de texte EN SORTIE sur ses ~14 dernières images (un exit = interpolate(f,[dur-16,dur],[1,0]) multiplié dans l'opacité) pour qu'il soit parti avant que le fondu suivant n'arrive. (Ou faites des coupures franches pour les battements de texte.)
3. Saignement du sting/logo. Un sting (ou tout battement) qui se termine sur un logo lumineux SAIGNE À TRAVERS la carte en verre translucide suivante pendant le fondu enchaîné. CORRECTION : fondez le logo du sting en sortie à sa PROPRE fin afin qu'il passe le relais sur une image sombre et propre.
4. Assombrissement du texte par un cache (subtil !). Un <AbsoluteFill> faisant office de cache est un frère positionné, donc il se peint AU-DESSUS du texte statique et l'assombrit — le blanc vif survit, le texte secondaire lavande est écrasé et semble faible. CORRECTION : mettez le cache à zIndex:0 et enveloppez le texte dans un conteneur position:relative; zIndex:1. (Ensuite, un cache à haute opacité tue la pulsation « brille-puis-débrille » de l'orbite dérivante sans assombrir le texte.)
5. Logos invisibles. Un logo carré PNG avec un remplissage transparent rend la marque réelle minuscule/invisible. CORRECTION : recadrez d'abord le PNG sur son contenu, puis dimensionnez par LARGEUR (<Img style={{ width: 600, height: 'auto' }} />).
6. Écrêtage audio. Des effets sonores non mappés jouent à 1,0 → écrêtage à pleine échelle. CORRECTION : un gain MASTER (~0,5) + une carte VOL complète par effet sonore + musique ~0,2 sous la voix ; loudnorm I=-14:TP=-1.5 sur le livrable final. Vérifiez le volumedetect max ≤ ~−3 dB.
7. Séparation de mots dans zsh. for x in $VAR ne se SÉPARE PAS dans zsh (une itération avec la chaîne entière). Utilisez une liste littérale ou ${=VAR}. (M'a mordu lors du téléchargement par lots de vignettes.)
8. Gardez la dernière image vivante (pas noire) — les conclusions se terminent sur la carte du logo ; vérifiez que la luminance de la dernière image > ~10.
9. Polices via @remotion/google-fonts (Poppins, JetBrainsMono). Les chiffres/mots-clés brillent avec une textShadow constante (ne comptez pas sur l'arrière-plan pour la lueur — voir #4).

---

🧊 PARALLAXE 3D + 2,5D + ☁️ ÉCHELLE DE NUAGE (bonus MODE A)

Exemple concret : ~/Downloads/_PROJECTS/2026-06-15_3DSaasDemo (un exemple de démo SaaS — héros en parallaxe, cartes de tableau de bord en verre flottantes, graphique à barres 3D + une variante WebGL véritable).

3D — deux chemins

• CSS 3D (par défaut, sans dépendances, rend partout). Enveloppez une scène dans perspective + transformStyle:'preserve-3d' ; placez les calques à différents translateZ et animez le Z du monde avec useCurrentFrame() = une grue de caméra où les calques proches bougent plus que les lointains (parallaxe 2,5D réelle). Les cartes en verre flottantes, les graphiques à barres extrudés (faces avant/côté/dessus), les sols en grille qui reculent proviennent tous de transformations CSS. Utilisez ceci en premier — c'est à toute épreuve dans Chrome sans tête.
• WebGL véritable — @remotion/three + React Three Fiber. Maillages réels, éclairage, ombres, matériaux. À utiliser uniquement lorsque le CSS-3D ne peut pas (géométrie/éclairage/profondeur de champ réels). Installez @remotion/three + @react-three/fiber@^9 + three (R3F v9 est nécessaire pour React 19 ; v8 est pour React 18). Pilotez l'animation avec useCurrentFrame() de Remotion, PAS avec useFrame de R3F (Remotion rend image par image). Enveloppez dans `<ThreeCanvas width