timscheuerai/content-vault

Créateur de vidéo de lancement

Construit une vidéo de lancement en motion design de 30 à 60 secondes pour un produit ou une fonctionnalité de <VOTRE_MARQUE>, de bout en bout :

• Composition React Remotion 4 rendue en MP4 (1920×1080 + 1080×1080)
• Narration IA ElevenLabs (voix Bill par défaut), effets sonores par événement et une trame musicale de fond
• Timing calé sur le rythme : chaque phase visuelle lit son image de début à partir des durées audio mesurées dans script.timings.json. Modifiez le texte → régénérez l'audio → tous les visuels se décalent automatiquement. Plus de réglage manuel des images clés.
• Si votre marque possède un sous-système de motion design (composants verre/curseur/bulle d'outils), héritez-en. Les motifs de référence décrits ci-dessous constituent un système valide : un sous-système de motion design verre dépoli (coques de chat, curseur, bulles d'outils) superposé à un système tabulaire blanc propre (tableaux de résultats, tableaux de bord, traces).

Si votre dépôt contient un projet Remotion de référence, pointez cette compétence vers celui-ci. Sinon, les motifs décrits ci-dessous se suffisent à eux-mêmes. Chemin d'implémentation de référence dans le dépôt source : <VOTRE_CHEMIN_VIDEO_REFERENCE>.

---

Quand l'utiliser

Déclenchez sur :

• "Crée une vidéo de lancement pour X"
• "Fais une vidéo de lancement / une vidéo produit / une présentation de fonctionnalité"
• "Rends une vidéo pour la [fonctionnalité]"
• L'utilisateur tape explicitement /launch-video

Ignorez pour :

• Les graphiques sociaux statiques → /graphics-designer
• Les présentations diaporama / webinaires → votre pipeline de présentations
• Les courts clips publicitaires < 8s → il s'agit généralement d'une simple image fixe Remotion ou d'une composition à une seule scène ; le pipeline complet de cette compétence est excessif.
• Séquences vidéo brutes enregistrées (têtes parlantes, enregistrements de webinaires, vidéos de fondateurs, interviews clients, démos de capture d'écran) → utilisez plutôt /video-use. Cette compétence coupe sur les limites de mots à partir d'une transcription Scribe, supprime les mots de remplissage, effectue l'étalonnage des couleurs et ajoute des sous-titres. Cette compétence est destinée aux motion graphics synthétiques construits à partir de zéro dans Remotion. Les deux se complètent : un montage /video-use peut générer des couches de superposition Remotion pour des insertions d'animations de marque, mais la coupe provient de /video-use.

---

Architecture en un diagramme

motion/<nom-video>/
├── package.json              # remotion 4 + react 19 + tsx + dotenv + mp3-duration
├── remotion.config.ts        # publicDir → ../../brand/motion (source unique d'actifs)
├── tsconfig.json
├── SCRIPT.md                 # script de narration lisible (par temps)
├── .env                      # ELEVENLABS_API_KEY (gitignored !)
├── .env.example
├── generate-audio.ts         # exécuteur de narration ElevenLabs, mis en cache par hachage du temps
├── generate-sfx.ts           # exécuteur de génération sonore ElevenLabs, mis en cache par hachage
├── generate-music.ts         # exécuteur de musique ElevenLabs + suppression du silence initial
├── script.timings.json       # durées de narration (générées)
├── sfx.timings.json          # durées des effets sonores (générées)
├── music.timings.json        # durée de la musique (générée)
└── src/
    ├── Root.tsx              # registerRoot
    ├── Video.tsx             # registre de composition + wrapper LaunchVideoComposition
    ├── theme.ts              # fps + durée + couleurs (reflète <VOTRE_CHEMIN_TOKENS_MARQUE>)
    ├── script.ts             # temps de narration (id, phase, texte)
    ├── timings.ts            # chargeur pour script.timings.json + beatStartFrame()
    ├── sfx.ts                # définitions des clips d'effets sonores (ancrés aux images)
    ├── music.ts              # prompt musical + volume
    ├── Narration.tsx         # piste de séquence de narration uniquement
    ├── SoundDesign.tsx       # narration + effets sonores + musique combinés
    └── scenes/
        ├── HeroBackground.tsx      # vidéo bouclée /video/hero-bg.mp4
        ├── OpeningScene.tsx        # la scène d'orchestration (ancre toutes les phases)
        ├── GlassCursor.tsx         # curseur "vous" style multi-joueur
        ├── CompanyTable.tsx        # tableau de données se remplissant avec dévoilement de colonnes
        ├── AgentDashboard.tsx      # vue hebdomadaire Google Agenda
        ├── AgentRunDetail.tsx      # vue de trace d'appels d'outils
        ├── MemoryPanel.tsx         # tableau de bord de statistiques avec sparkline
        ├── Confetti.tsx            # explosion de particules
        └── ClosingCard.tsx         # callback de chat de clôture (le motif "Inviting")

Les actifs résident dans brand/motion/ :

• video/hero-bg.mp4 + affiche (boucle d'arrière-plan héros de votre marque · par ex. une vidéo ambiante à brand/motion/video/hero-bg.mp4)
• logos/{models,tools,companies,sequencers}/ — marques de tiers
• audio/{launch-narration,sfx,music}/ — mp3 générés (versionnés pour des rendus reproductibles)
• components/HeroChatMockup.tsx — coque de chat indépendante du framework

---

Flux de travail pour une nouvelle vidéo de lancement

1. Brief

Obtenez de l'utilisateur :

• Audience : à qui s'adresse-t-elle ? (Équipes GTM ? Ingénieurs ? Investisseurs ?)
• Durée : secondes cibles (30-45s par défaut ; 60s+ semble long pour une vidéo hype)
• Messages clés : 4 à 8 éléments à communiquer, dans l'ordre narratif
• Formats de sortie : paysage (web/LinkedIn), carré (IG/feed), ou les deux

2. Esquisser les temps

Chaque temps = une phrase de narration qui tombe pendant une phase visuelle. Généralement 6-8 temps. La somme des longueurs audio des temps = durée totale. Les temps ciblent 3-7s chacun.

Pour chaque temps, capturez : id, phase (description visuelle en une ligne), text (ligne parlée, 10-20 mots).

3. Écrire SCRIPT.md

Sauvegardez le script comme un fichier frère de package.json pour une relecture humaine. Format :

## Temps N — Nom de la phase
**Images** ~début-fin (secondes) · **~Nmots cible**

> "Ligne parlée ici."

**Synchronisation visuelle :** ce qui se passe à l'écran.

4. Construire src/script.ts

Reflète SCRIPT.md sous forme de données. Le générateur de narration et la composition importent tous deux SCRIPT. Pas d'imports Remotion ici afin que les générateurs puissent s'exécuter en Node simple :

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. Générer la narration

cd motion/<nom-video>
cp .env.example .env  # collez ELEVENLABS_API_KEY
npm install
npm run generate-audio

Ceci crée brand/motion/audio/launch-narration/{beat-id}.mp3 et écrit les durées dans script.timings.json. Hachage par texte de temps afin que les temps inchangés soient ignorés lors des exécutions suivantes (itération économique).

6. Construire la scène visuelle

Dans OpeningScene.tsx :

1. Calculez les débuts des temps au chargement du module :

   const HERO_BEAT     = beatStart("hero", 0);        // → 0
   const DATABASE_BEAT = beatStart("database", 0);    // → 171 (après la fin du hero)
   // ... etc
   

2. Exprimez chaque image d'animation comme BEAT_X + décalage :

   const BADGE_IN     = HERO_BEAT + 6;
   const TYPE_START   = HERO_BEAT + 38;
   const TOOLS_START  = HERO_BEAT + 115;  // synchronisé avec le mot "stack GTM"
   const CURSOR_PRESS = HERO_BEAT + 165;
   

3. Fondu enchaîné entre les scènes de phase en utilisant des portes d'opacité par temps.

7. Générer les effets sonores (optionnel mais à fort impact)

Définissez les moments de clic/transition dans src/sfx.ts. Ancrez chaque clip à une fromFrame spécifique en utilisant la même fonction beatStartFrame(). Exemples de clips qui méritent leur place :

• texture de frappe sous l'animation du prompt
• clic net sur les pressions du curseur
• pop de célébration sur les moments "inscrire" / d'achèvement
• gonflement subtil lors du dévoilement de la carte de clôture

npm run generate-sfx

8. Générer la musique

Définissez un prompt + une durée dans src/music.ts. generate-music.ts supprime automatiquement le silence initial (la musique ElevenLabs commence souvent par une mesure silencieuse qui ressemble à "pas de musique" par rapport à la narration).

npm run generate-music

9. Itérer avec les rendus

npm run render:landscape

Le rendu prend ~30-90s. Ré-encodez toujours la sortie en yuv420p gamme TV pour la compatibilité QuickTime — la vidéo bg est en yuvj420p (gamme JPEG) et la propagation casse la lecture dans certains lecteurs :

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

Utilisez ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg pour vérifier des horodatages spécifiques sans regarder l'intégralité du rendu.

---

Règles de conception

Voix (visuelle + parlée)

• N'utilisez jamais de tirets longs. Uniquement points, virgules, deux-points, parenthèses, points médians.
• Mots interdits partout : levier, synergie, robuste, de classe mondiale, sans couture, intuitif, puissant, innovant.
• Les chiffres battent les adjectifs ("8 outils" pas "beaucoup d'outils").
• Concis, concret. Pas de réserve.
• Clôture : menée par la marque, pas "Félicitations." Le motif de clôture le plus fort trouvé ici : Kicker "Invitation" → entrée de chat avec un nouveau prompt tapé → signature URL. Le callback du chat vers l'ouverture bat la célébration à tous les coups.

Couleur (exemples de tokens · ajustez à votre marque)

Clair, neutre. Un seul accent, utilisé une fois par scène là où il a du sens (point vivant, surbrillance, état de succès).

Token	Hex	Utilisation
--bg	#fafafa	fond de page
--surface	#ffffff	cartes, tableaux de bord
--ink	#0a0a0a	texte principal + chiffres
--muted	#71717a	texte secondaire
--line	#e4e4e7	bordures
--accent	#10b981	le seul accent

Typographie

• Pile : 'Helvetica Neue', Helvetica, Arial, sans-serif
• Mono (kickers, code, étiquettes) : ui-monospace, 'SFMono-Regular', Menlo
• Typographie héros : poids 450 avec suivi serré (-0.05em)
• Style kicker mono : 11-14px, majuscules, espacement des lettres 0.16-0.18em, couleur #71717a ou #a1a1aa
• Les parties en gras/medium dans le texte du corps gris atténué reflètent le motif de la marque : <span style={{ color: "#0a0a0a", fontWeight: 500 }}>gras</span> vs texte environnant #71717a.

Deux modes visuels

Choisissez-en un par scène ; ne mélangez pas :

1. Verre dépoli / dans le produit — coque de chat, curseur, bulles d'outils, sur la vidéo bg héros. Verre blanc avec backdrop-filter: blur(28px), rgba(255,255,255,0.45).
2. Blanc propre / tabulaire — tableaux, tableaux de bord, traces, panneau mémoire. bg #ffffff, 1px solid #e4e4e7, ombre portée subtile.

La transition par fondu du fond entre les modes est l'un des moments les plus cinématographiques ; prévoyez ~20-30 images pour cela et utilisez Easing.bezier(0.4, 0, 0.2, 1) (standard matériel) pour la fluidité.

---

Règles d'animation

1. Amortissement de 22 à 28 sur les ressorts. En dessous de 20, vous obtenez un rebond qui semble amateur. Utilisez 14-18 uniquement lorsque vous souhaitez intentionnellement un "pop".
2. Décalages plus serrés > plus lents. Le premier réflexe est toujours de ralentir ; le deuxième passage implique généralement de réduire les décalages de moitié. Décalage par défaut entre les éléments en cascade : 3 à 6 images.
3. Synchronisez les visuels sur les paroles là où c'est important. Si la narration dit "stack GTM", les bulles d'outils doivent apparaître sur ce mot — pas 3s avant. Utilisez with_timestamps d'ElevenLabs pour une synchronisation au niveau du mot, ou estimez à partir de la durée du temps / du nombre de mots si une approximation est acceptable.
4. Réservez les hauteurs de ligne. Lorsque les tableaux/cartes animent le texte à l'intérieur, minHeight sur la ligne empêche la mise en page de sauter au fur et à mesure que le contenu se remplit. Cela semble maladroit si les lignes grandissent pendant la cascade.
5. Rendu conditionnel plutôt qu'opacité 0 si cela créerait un grand rectangle vide. Les cartes qui n'ont pas encore commencé à se dévoiler ne doivent pas occuper d'espace.
6. Fondu enchaîné entre les modes de scène, pas de coupe franche. Chaque scène majeure obtient une porte opacity animée via interpolate + courbes d'easing.

---

Pièges ElevenLabs

• Voix + modèle par défaut : generate-audio.ts utilise par défaut Bill (pqHfZKP75CvOlQylNhV4) sur eleven_multilingual_v2. Bill est la voix du cas d'usage advertisement dans la bibliothèque ElevenLabs : sage, mature, nette. Elle se lit comme une véritable voix off publicitaire, pas "un gars IA sur les réseaux sociaux". multilingual_v2 est le modèle le plus stable + réaliste pour la narration de production. N'utilisez pas eleven_turbo_v2_5 pour les vidéos de lancement — c'est le modèle rapide/bon marché et la différence est audible par rapport à une vidéo bg héros. Turbo est acceptable pour les aperçus / vérifications de timing SFX, pas pour le rendu final.
• Réglages vocaux intégrés au script : stability 0.40, similarity_boost 0.75, style 0.30, use_speaker_boost true. Selon les meilleures pratiques ElevenLabs : une stabilité inférieure à 0.30 est instable, supérieure à 0.60 est monotone ; similarity 0.75 est le point idéal de la documentation ; style 0.20–0.40 ajoute de l'expressivité sans dérive. Ne poussez pas style au-dessus de 0.4 à moins que vous ne vouliez des variations d'inflexion notables.
• La clé de cache vocal inclut voix + modèle + réglages. Changer l'un d'entre eux (ou modifier le texte d'un temps) invalide le MP3 mis en cache et re-rend le temps. Modifiez simplement .env (VOICE_ID=... MODEL_ID=...) ou generate-audio.ts et relancez npm run generate-audio.
• Autres voix de qualité narration si Bill ne convient pas :
  • Eric cjVigY5qzO86Huf0OWal — doux, digne de confiance, sensation SaaS moderne
  • Chuck Miller HIGUfNOdjuWQwwapnTRW — clone pro, rauque grave, cinématographique
  • George JBFqnCBsd6RMkjVDRZzb — conteur britannique, narrative_story
  • Logan jD4PjnscE4XmlzgsuqY0 — clone pro, jeune conteur
  • Brian nPczCjzI2devNBz1zQrb — le défaut hérité ; étiqueté social_media, se lit plus "IA" que Bill
  • Échantillonnez A/B ceux-ci dans votre projet Remotion de référence avant de vous engager
• La liste des voix nécessite l'autorisation voices_read. Certaines clés ne l'ont pas ; si vous ne pouvez pas GET /v1/voices, revenez aux ID connus.
• L'API musicale rejette les noms de marque dans les prompts. "Keynote Apple", "Bande-annonce Linear" etc. déclenchent une violation des CGU. Décrivez l'ambiance sans nommer de marques ("instrumental cinématographique pour une bande-annonce de lancement technologique moderne", "rythme électronique palpitant avec mélodie de synthétiseur arpégée").
• La musique commence par un silence initial (~1-2s) par défaut. Le passage silenceremove de ffmpeg du générateur le supprime pour que la lecture démarre à l'image 0. Gardez ce filtre en place.
• La durée minimale des effets sonores est de 0,5 s. En dessous, l'API génère une erreur. Arrondissez au supérieur.
• Volume de la musique : 0.10 semble silencieux sous la narration ; 0.15-0.18 est le point idéal — clairement présent mais ne lutte pas contre la voix.

---

Pièges à éviter

1. Ajouter <Audio> sans <Sequence> : cela jouera c…

[suite du contenu original non fournie, mais le format et les instructions sont préservés]

---

Ce document fait partie de la compétence timscheuerai/content-vault. Pour des questions, consultez la documentation du projet.