MoizIbnYousaf/marketing-cli

/marketing-demo — Enregistreur de démo produit

Enregistrez des démos de produits pour le marketing. Deux voies de production : rapide (ply + ffmpeg) pour des démos brutes, soignée (Remotion) pour des vidéos marketing de marque.

Lectures

• brand/creative-kit.md — Couleurs, polices, chemins des logos pour les superpositions de marque
• brand/voice-profile.md — Conseils de ton pour les superpositions de texte
• brand/stack.md — Outils disponibles (ply, ffmpeg, remotion)

À l'activation

1. Lire brand/creative-kit.md pour les couleurs, polices, chemins des logos. Si manquant, demander les couleurs de marque et le logo.
2. Lire brand/voice-profile.md pour les conseils de ton sur les superpositions de texte. Si manquant, utiliser un ton clair/neutre.
3. Lire brand/stack.md pour confirmer les outils disponibles. Si manquant, détecter les outils directement.
4. Vérifier la disponibilité des outils :

   command -v ply && echo "ply: prêt" || echo "ply: manquant"
   command -v ffmpeg && echo "ffmpeg: prêt" || echo "ffmpeg: manquant"
   command -v npx && echo "remotion: disponible" || echo "remotion: indisponible"
   

5. Si ply ou ffmpeg manquent, avertir et suggérer l'installation.

Règles de durée par prise

Type de démo	Durée par prise	Notes
Aperçu rapide	0,5-1s	Coupures rapides, créez de l'excitation
Démo de fonctionnalité	2-3s	Temps de lecture + compréhension
Présentation guidée	4-5s	Rythme pédagogique
Clip social	1-2s	Attire l'attention, rapide

Principes de narration de démo

Les démos échouent quand elles montrent le produit mécaniquement au lieu de raconter une histoire. Le spectateur a besoin d'une raison de continuer à regarder. Ces principes viennent de ce qui fonctionne réellement sur les pages d'accueil et les réseaux sociaux :

1. Commencez par le résultat, pas la configuration. Les 2 premières secondes décident si quelqu'un regarde la suite. Montrez l'état "après" — le tableau de bord avec les données, le design terminé, le résultat. La configuration (connexion, chargement, navigation) n'attire aucune attention.
2. Une fonctionnalité = une démo. Essayer de fourrer 5 fonctionnalités en 30 secondes les rend toutes oubliables. Une démo ciblée d'une fonctionnalité vaut mieux qu'une visite guidée précipitée.
3. Montrez le moment magique. Chaque produit a une interaction où les utilisateurs disent "oh wow". Trouvez ce moment et construisez la démo autour — c'est pourquoi les gens cliquent sur "essayer".
4. Ajoutez du contexte avec des superpositions de texte. Les vidéos sociales sont lues en silence. Sans légendes textuelles, les spectateurs voient l'interface changer sans comprendre ce qui se passe ni pourquoi c'est important. Chaque prise a besoin d'une superposition de 3 à 6 mots expliquant la valeur.
5. Rythme : 2-3 secondes par concept. Cela semble rapide, mais l'attention du spectateur est impitoyable. Si une prise ne mérite pas son temps d'écran avec de nouvelles informations, coupez-la.

Étape 1 : Déterminer le type de démo

Type	Durée	Résolution	Format	Cas d'usage
Démo héro	15-30s	1280x800	MP4	Au-dessus de la ligne de flottaison d'une page d'accueil
Mise en avant de fonctionnalité	5-15s	1280x800	GIF/MP4	Section fonctionnalité, documentation
Présentation complète	60-180s	1280x800	MP4	YouTube, présentation commerciale
Clip social	5-15s	1080x1080	MP4	Instagram, Twitter/X
GIF email	3-8s	600x400	GIF	Campagnes email
Tutoriel	30-90s	1280x800	MP4	Documentation d'aide, intégration

Demandez à l'utilisateur quel type, ou déduisez du contexte.

Étape 2 : Planifier la liste des prises

Avant d'enregistrer, planifiez chaque prise :

## Liste des prises

1. [Action : Naviguer vers la page d'accueil]
   - URL : https://example.com
   - Attendre : 1s pour le chargement
   - Mettre en évidence : Section héro

2. [Action : Cliquer sur le bouton "Commencer"]
   - Attendre : animation de transition
   - Mettre en évidence : Formulaire d'inscription

3. [Action : Remplir les données de démo]
   - Saisir : [email protected]
   - Mettre en évidence : État de succès

Chaque prise = une capture d'écran ply ou séquence d'interaction.

Étape 3 : Choisir le mode de production

Mode A : Démo rapide (ply + ffmpeg)

Démos rapides et brutes à partir de captures d'écran assemblées en vidéo.

Capturer des captures d'écran :

# Naviguer et capturer chaque prise
ply navigate "https://example.com"
ply screenshot --output marketing/demos/shot-01.png
ply click "Commencer"
ply screenshot --output marketing/demos/shot-02.png

Assembler avec ffmpeg :

# MP4 à partir de captures d'écran (2 secondes par image)
ffmpeg -framerate 0.5 -i marketing/demos/shot-%02d.png \
  -c:v libx264 -pix_fmt yuv420p \
  -vf "scale=1280:800:force_original_aspect_ratio=decrease,pad=1280:800:(ow-iw)/2:(oh-ih)/2" \
  marketing/demos/demo.mp4

# GIF de prévisualisation (qualité inférieure, fichier plus petit)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=10,scale=640:-1:flags=lanczos" \
  -c:v gif marketing/demos/demo-preview.gif

# GIF email (600px de large, optimisé)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "fps=8,scale=600:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
  marketing/demos/demo-email.gif

# Recadrage carré pour les réseaux sociaux (1080x1080)
ffmpeg -i marketing/demos/demo.mp4 \
  -vf "crop=min(iw\,ih):min(iw\,ih),scale=1080:1080" \
  marketing/demos/demo-square.mp4

Mode B : Démo soignée (Remotion)

Pour un rendu de qualité marketing avec transitions, superpositions de texte, intros de marque.

Générer une composition Remotion :

# Initialiser si nécessaire
npx remotion init marketing/demos/remotion-demo

# Rendre la vidéo finale
npx remotion render marketing/demos/remotion-demo/src/index.tsx \
  --output marketing/demos/demo-polished.mp4

Structure de la composition :

src/
├── index.tsx          # Composition racine
├── Intro.tsx          # Intro de marque (logo, slogan)
├── DemoScene.tsx      # Capture d'écran avec superposition de texte
├── Transition.tsx     # Fondu/glissement entre les scènes
└── Outro.tsx          # Appel à l'action + URL

Principaux motifs Remotion (voir references/remotion-examples.md pour le code complet des composants) :

• Utilisez <Img> pour les captures d'écran, <AbsoluteFill> pour la mise en page
• useCurrentFrame() + interpolate() pour les animations
• Tirez les couleurs de marque de brand/creative-kit.md
• 30ips pour une lecture fluide, 1280x720 ou 1920x1080
• Ajoutez des superpositions de texte mettant en avant les fonctionnalités avec <Sequence>

Scène d'intro (2-3s) : Logo centré, slogan apparaît en fondu. Couleurs de marque en arrière-plan dégradé. Gardez-la courte — le produit est la vedette.

Scène de démo (par prise) : La capture d'écran remplit 80 % du cadre. Superposition de texte en haut ou en bas avec un appel de fonctionnalité d'une ligne. Utilisez interpolate() pour un zoom avant subtil (1,0 → 1,05 pendant la durée de la scène) pour ajouter de la vie.

Transition entre les scènes : Fondu + léger glissement (200 ms). N'utilisez jamais de transitions fantaisistes — elles distraient du produit.

Scène de fin (3-4s) : Texte d'appel à l'action ("Essayez-le gratuitement sur [url]"), logo et éventuelle ligne de preuve sociale. C'est la seule diapositive qui vend — gardez toutes les autres diapositives concentrées sur la démonstration.

Récupération d'erreurs

Échecs ply (page ne se charge pas, élément non trouvé, délai d'attente dépassé) : Passez à la prise N+1 et documentez l'échec dans la liste des prises. Une fois toutes les prises terminées, examinez les prises ignorées et réessayez une fois. Si cela échoue encore, utilisez des captures d'écran manuelles comme solution de repli.

Échecs ffmpeg (codec non trouvé, erreur de format) : Vérifiez ffmpeg -codecs pour les codecs disponibles. Si libx264 est manquant, essayez -c:v h264 ou installez via brew install ffmpeg. Pour les problèmes de palette GIF, simplifiez la chaîne de filtres — supprimez split/palettegen/paletteuse et utilisez -vf "fps=10,scale=640:-1" basique.

Échecs Remotion (plantage du rendu, erreurs de composition) : Vérifiez la version de node (node -v, besoin de 18+). Si npx remotion render échoue, essayez npx remotion render --gl=angle ou --gl=swangle pour les problèmes GPU. Pour les erreurs de composition, vérifiez que tous les chemins src <Img> sont corrects et que les images existent.

Étape 4 : Convertir et produire

Toutes les sorties vont dans marketing/demos/. Nommez par type :

Sortie	Nom de fichier	Notes
MP4 (bureau)	demo-hero.mp4	H.264, 1280x800
MP4 (social)	demo-social-1080.mp4	Carré, 1080x1080
GIF (prévisualisation)	demo-preview.gif	640px large, <5 Mo
GIF (email)	demo-email.gif	600px large, <2 Mo
MP4 (soigné)	demo-polished.mp4	Sortie Remotion

Étape 5 : Résumé de fin

## Ressources de démo créées

| Ressource | Taille | Format | Utilisation suggérée |
|-----------|--------|--------|----------------------|
| demo-hero.mp4 | 1,2 Mo | MP4 1280x800 | Section héro de la page d'accueil |
| demo-preview.gif | 3,4 Mo | GIF 640px | README, documentation |
| demo-email.gif | 1,1 Mo | GIF 600px | Campagnes email |
| demo-social-1080.mp4 | 800 Ko | MP4 1080x1080 | Instagram, X |

Toutes les ressources enregistrées dans `marketing/demos/`.

Configurations de zone d'affichage

Plateforme	Largeur	Hauteur	Échelle
Bureau	1280	800	1x
Bureau HD	1920	1080	1x
Mobile	390	844	2x
Instagram	1080	1080	1x
Twitter/X	1200	675	1x
Email	600	400	1x

Anti-patrons

Erreur	Pourquoi ça échoue
Enregistrer les flux de connexion/inscription	Personne ne se soucie de votre écran d'authentification. Commencez après la connexion.
Montrer des spinners de chargement	Éditez-les ou passez à l'état chargé. Les spinners tuent l'élan.
Pas de superpositions de texte sur la lecture automatique silencieuse	Les vidéos sociales sont lues en silence. Sans texte, les spectateurs n'ont aucune idée de ce qu'ils regardent.
Démo de plus de 60s sans pauses de chapitre	L'attention chute après 15s. Si c'est long, ajoutez des titres de section clairs.
Enregistrer à des tailles de zone d'affichage incohérentes	Les prises qui sautent entre les tailles semblent amateurs. Verrouillez la zone d'affichage avant d'enregistrer.
Montrer chaque fonctionnalité	Choisissez 3 à 5 fonctionnalités maximum. Les démos qui montrent tout ne vendent rien.
Curseur de souris qui erre sans but	Planifiez chaque clic. Le curseur doit se déplacer avec un but — des lignes droites vers les cibles.

Compétences connexes

• /creative — Visuels publicitaires, photos de produits (ressources statiques, pas des démos)
• /content-atomizer — Transformer la démo en publications spécifiques à la plateforme
• /page-cro — Auditer la page que la démo met en avant