Quand l'utiliser
Utilisez ce skill lorsque l'utilisateur souhaite créer :
-
Vidéos tutoriels éducatifs - Faire des recherches sur un sujet et créer une vidéo explicative animée.
- Exemple : "Crée un tutoriel sur le cycle de vie du papillon pour des élèves de CE2."
-
Démonstrations de logiciels SaaS - Présenter les fonctionnalités d'un logiciel avec une interface animée.
- Exemple : "Crée une vidéo de démonstration montrant comment utiliser la fonction base de données de Notion."
-
Annonces de lancement produit - Vidéos marketing avec animations graphiques.
- Exemple : "Crée une vidéo de lancement pour annoncer notre nouvelle fonctionnalité de recherche alimentée par l'IA."
-
Vidéos tutoriels / pas à pas - Guides détaillés avec animations du curseur.
- Exemple : "Crée un tutoriel montrant comment configurer un projet dans notre application."
-
Vidéos promotionnelles pour les réseaux sociaux - Vidéos textuelles courtes et percutantes pour les publicités.
- Exemple : "Crée une publicité Instagram de 15 secondes pour notre application de fitness."
-
Vidéos de présentation d'applications/produits - Texte cinétique combiné à des maquettes d'interface flottantes.
- Exemple : "Crée une promotion montrant notre interface d'échange de crypto-monnaies."
-
Vidéos de révélation de page d'accueil - Esthétique d'outil de conception avec animations de pages web.
- Exemple : "Crée une vidéo présentant notre nouveau design de page d'accueil SaaS."
Processus de production vidéo
Suivez ce pipeline pour tous les types de vidéos :
1. COMPRENDRE → 2. RECHERCHER → 3. SCÉNARIO → 4. SCÈNES → 5. AUDIO → 6. ANIMER
Étape 1 : Comprendre la demande
Identifiez :
- Type de vidéo : Tutoriel éducatif, démo SaaS, lancement produit, tutoriel pas à pas, promotion sociale, présentation d'application, révélation de page d'accueil ou vidéo explicative IA ?
- Public cible : Âge, niveau d'expertise, contexte.
- Ton : Éducatif, professionnel, énergique, ludique, dramatique, minimaliste.
- Durée : Ultra-courte (5-15s), courte (30-60s), moyenne (1-3min) ou longue (3-5min).
- Format : Écran large 16:9 (1920x1080), carré 1:1 (1080x1080) ou vertical 9:16 (1080x1920).
- Style visuel : Dramatique sombre, dégradé doux, minimaliste propre ou esthétique d'outil de conception.
Étape 2 : Rechercher (pour les tutoriels et démos)
Pour le contenu éducatif :
- Recherchez des informations précises et à jour.
- Utilisez des sources fiables (documentation officielle, sites éducatifs).
- Rassemblez les faits, statistiques ou étapes clés à expliquer.
Pour les démos SaaS :
- Explorez le produit pour comprendre ses fonctionnalités.
- Capturez des captures d'écran ou notez les motifs d'interface.
- Identifiez le flux de travail clé à démontrer.
Étape 3 : Écrire le scénario
Rédigez un scénario de voix off complet AVANT de générer l'audio. La structure varie selon le type de vidéo (voir ci-dessous).
Étape 4 : Planifier les scènes
Divisez le scénario en segments visuels :
- Chaque scène = une idée clé ou une étape.
- Notez les visuels qui accompagnent chaque réplique.
- Planifiez les transitions entre les scènes.
Étape 5 : Générer l'audio
Utilisez Resemble.ai pour générer la voix off (voir configuration ci-dessous).
Étape 6 : Créer les animations
Construisez la composition Remotion avec des animations synchronisées sur l'audio.
Type de vidéo : Tutoriel éducatif
Objectif : Expliquer un concept clairement pour un public d'un niveau spécifique.
Structure du scénario
ACCROCHE (5-10s)
"Vous êtes-vous déjà demandé comment une chenille devient un papillon ?"
INTRODUCTION (10-15s)
Donnez le contexte et un aperçu de ce qu'ils vont apprendre.
CORPS (contenu principal, divisé en 3 à 5 points clés)
- Point 1 : Expliquez avec une métaphore visuelle.
- Point 2 : Enchaînez sur le point précédent.
- Point 3 : Ajoutez des détails ou un exemple.
- ...
RÉCAPITULATIF (10-15s)
Résumez les points clés à retenir.
CONCLUSION (5s)
Appel à l'action ou réflexion finale.
Adaptation au public
| Public | Style de langage | Visuels |
|---|---|---|
| CP-CE1 | Très simple, ludique, phrases de 5 mots | Couleurs vives, personnages mignons, grandes formes |
| CE2-CM2 | Simple mais informatif, analogies | Diagrammes clairs, étape par étape, rythme modéré |
| 6e-3e | Plus de vocabulaire, cause-effet | Graphiques, diagrammes étiquetés, rythme plus rapide |
| Lycée+ | Termes techniques acceptables, nuances | Visualisation de données, graphiques détaillés |
| Adultes | Professionnel, concis | Design propre, infographies |
Motifs d'animation pour les tutoriels
- Apparitions : Faire apparaître les éléments en fondu lorsque le narrateur les mentionne.
- Transformations : Morphing de formes pour montrer le changement (chenille → papillon).
- Diagrammes : Étiquettes animées, flèches pointant vers les parties.
- Chronologies : Barres de progression, indicateurs d'étapes.
- Comparaisons : Côte à côte avec surbrillance.
Exemple de plan de scène
Scénario : "D'abord, le papillon pond de minuscules œufs sur une feuille."
Scène 1 :
- Visuel : Une feuille apparaît (glissement depuis le bas, animation rebond).
- Visuel : De petits œufs apparaissent en fondu sur la feuille.
- Timing : Synchroniser le mot "œufs" avec l'apparition des œufs.
- Durée : 4 secondes
Type de vidéo : Démonstration SaaS
Objectif : Montrer aux utilisateurs comment accomplir une tâche dans un logiciel.
Structure du scénario
ACCROCHE (5-10s)
"Laissez-moi vous montrer comment [accomplir l'objectif] dans [Produit]."
CONTEXTE (10s)
Pourquoi cette fonctionnalité est importante, quel problème elle résout.
DÉMONSTRATION (contenu principal)
- Étape 1 : Accédez à X
- Étape 2 : Cliquez sur Y
- Étape 3 : Configurez Z
- ...
RÉSULTAT (10s)
Montrez le résultat, l'état final.
CONCLUSION (5-10s)
Récapitulez l'avantage, suggérez les prochaines étapes.
Éléments visuels
- Maquettes d'interface : Représentations stylisées de l'interface.
- Animations du curseur : Pointeur animé se déplaçant vers les cibles de clic.
- Surbrillances : Bordures lumineuses autour des boutons/champs discutés.
- Effets de zoom : Focus sur des zones spécifiques de l'interface.
- Légendes : Étiquettes textuelles pointant vers les éléments d'interface.
Motifs d'animation pour les démos
- Mouvement du curseur : Courbes de Bézier lisses, légère pause avant le clic.
- Effet de clic : Ondulation ou impulsion lors du clic.
- Focus sur le champ : Bordure en surbrillance, léger agrandissement.
- Animation de frappe : Caractères apparaissant dans les champs de saisie.
- Transition : Glissement ou fondu entre les écrans.
- Flèches de légende : Apparition animée, pointent vers l'élément, disparaissent en fondu.
Exemple de plan de scène
Scénario : "Cliquez sur le bouton bleu 'Nouvelle base de données' dans la barre latérale."
Scène :
- Visuel : Maquette d'interface de la barre latérale.
- Animation : Le curseur se déplace vers le bouton (0,8s ease-out).
- Animation : Le bouton se illumine.
- Animation : Effet d'ondulation au clic.
- Animation : Un nouveau panneau glisse depuis la droite.
- Durée : 3 secondes
Type de vidéo : Annonce de lancement produit
Objectif : Susciter l'enthousiasme autour d'un nouveau produit ou d'une nouvelle fonctionnalité.
Structure du scénario
ACCROCHE (5-10s)
Affirmation audacieuse ou question qui attire l'attention.
PROBLÈME (10-15s)
Quel problème cela résout-il ?
RÉVÉLATION DE LA SOLUTION (10-15s)
Présentez le produit/la fonctionnalité de manière dramatique.
FONCTIONNALITÉS CLÉS (20-40s)
3 à 5 points forts percutants avec visuels.
PREUVE SOCIALE (optionnel, 10s)
Statistiques, témoignages ou marqueurs de crédibilité.
APPEL À L'ACTION (5-10s)
Que doivent faire les spectateurs ensuite ?
Style visuel
- Typographie audacieuse : Texte grand, animations de typographie cinétique.
- Couleurs de la marque : Utilisez la palette de couleurs du produit de manière cohérente.
- Icônes et graphiques : Formes abstraites, icônes de fonctionnalités.
- Haute énergie : Coupures plus rapides, mouvement dynamique.
- Révélation du logo : Logo animé à la fin.
Motifs d'animation pour les lancements
- Martèlement du texte : Les mots apparaissent avec impact.
- Typographie cinétique : Mots qui bougent, changent d'échelle, tournent.
- Animations de compteurs : Chiffres qui augmentent (utilisateurs, revenus, etc.).
- Séquences d'icônes : Fonctionnalités apparaissant avec un rebond/ressort.
- Fonds dégradés : Dégradés de couleurs qui se déplacent lentement.
- Effets de particules : Étincelles subtiles, formes flottantes.
- Révélation du logo : Agrandissement, apparition en fondu ou assemblage à partir de pièces.
Exemple de plan de scène
Scénario : "Présentation de Smart Search — trouvez n'importe quoi en quelques millisecondes."
Scène :
- Visuel : Fond sombre avec dégradé.
- Animation : "Présentation de" apparaît en fondu (0,5s).
- Animation : "Smart Search" apparaît en grand, en gras (0,3s, avec secousse).
- Animation : L'accroche s'écrit en dessous (machine à écrire, 1,5s).
- Animation : L'icône de recherche pulse.
- Durée : 4 secondes
Type de vidéo : Tutoriel / Pas à pas
Objectif : Apprendre aux utilisateurs comment accomplir une tâche avec des instructions visuelles claires et étape par étape.
Structure du scénario
INTRODUCTION (3-5s)
"Voici comment [accomplir l'objectif] dans [Produit]."
ÉTAPE 1 (10-20s)
Première action avec démonstration visuelle claire.
ÉTAPE 2 (10-20s)
Deuxième action, enchaînant sur l'étape précédente.
ÉTAPE 3+ (10-20s chacune)
Continuez à travers le flux de travail...
ÉTAT DE SUCCÈS (5-10s)
Montrez la fin, célébrez le résultat.
RÉCAPITULATIF (optionnel, 5s)
Résumé rapide de ce qui a été accompli.
Style visuel
- Fonds clairs et propres : Blanc cassé (#fafafa), crème ou gris clair.
- Contexte d'interface complet : Montrez l'interface complète, pas seulement des fragments.
- Indicateurs de progression : Fil d'Ariane des étapes, étapes numérotées (1 → 2 → 3).
- Curseur comme guide : Mouvement fluide du curseur qui guide le regard du spectateur.
- Célébration du succès : Coches vertes, confettis ou écrans de succès personnalisés.
- Distractions minimales : Concentrez-vous sur la tâche, évitez les éléments décoratifs.
Motifs d'animation pour les tutoriels
- Chorégraphie du curseur : Trajets de Bézier lisses avec une légère pause avant les clics.
- Retour de clic : Ondulation ou surbrillance subtile lors du clic.
- Focus sur le champ de formulaire : Lueur de bordure lorsque le champ est actif.
- Simulation de frappe : Texte apparaissant caractère par caractère dans les entrées.
- Transitions d'étapes : Fondu enchaîné doux ou glissement entre les écrans.
- Mises à jour de progression : L'indicateur d'étape/fil d'Ariane s'anime vers l'avant.
- Explosion de succès : La coche s'agrandit avec un rebond, confettis optionnels.
- Révélations de panneaux : Barres latérales ou menus déroulants glissent en douceur.
Éléments visuels
- Navigation par fil d'Ariane : "← 1. Intention → 2. Idée de départ → 3. Bloc-notes"
- Champs de saisie : Texte indicatif, étiquettes, états de validation.
- Boutons : Appels à l'action clairs avec états survol/actif affichés.
- Barres latérales/panneaux : Suggestions IA, paramètres ou palettes d'outils.
- Écrans de succès : Fond de couleur pleine avec icône + message.
Exemple de plan de scène
Scénario : "Commencez par saisir le sujet de votre leçon."
Scène 1 - Mise en place (2s) :
- Visuel : Interface complète de l'application, fond clair.
- Visuel : Le fil d'Ariane montre "2. Idée de départ" actif.
- Animation : L'écran apparaît en fondu.
Scène 2 - Interaction (4s) :
- Visuel : Formulaire avec l'étiquette "Saisissez un concept ou un thème :".
- Animation : Le curseur se déplace vers le champ de saisie (0,6s ease-out).
- Animation : La bordure du champ se surligne en bleu.
- Animation : "La vie secrète des champignons" s'écrit (2s).
- Animation : Le curseur se déplace vers le bouton "Continuer".
Scène 3 - Transition (2s) :
- Animation : Le bouton se surligne au survol.
- Animation : Effet d'ondulation au clic.
- Animation : L'écran glisse vers la gauche, un nouveau panneau glisse.
Scène 4 - Résultat (3s) :
- Visuel : Vue bloc-notes avec panneau de suggestions IA.
- Animation : Les cartes de suggestion apparaissent en décalé (0,15s de délai chacune).
- Animation : La section "Flux de leçon" se remplit.
Scène 5 - Succès (3s) :
- Visuel : Fond d'écran vert plein écran.
- Animation : Un cercle blanc s'agrandit (ressort).
- Animation : Une coche se dessine à l'intérieur du cercle.
- Animation : "Votre leçon est en ligne !" apparaît en fondu en dessous.
- Animation : Le sous-titre "Prêt à inspirer l'émerveillement et la découverte" apparaît en fondu.
Directives de rythme pour les tutoriels
| Complexité de l'étape | Durée | Notes |
|---|---|---|
| Clic simple | 2-3s | Clic et résultat immédiat |
| Saisie dans un formulaire | 4-6s | Saisie + soumission |
| Formulaire à plusieurs champs | 8-12s | Entrées multiples |
| Flux de travail complexe | 15-20s | Plusieurs sous-étapes |
| État de succès | 3-5s | Laissez respirer |
Conseils pour des tutoriels efficaces
- Une action par scène — Ne précipitez pas plusieurs clics ensemble.
- Faites une pause sur les résultats — Laissez les spectateurs voir le résultat avant de passer à la suite.
- Surlignez ce qui change — Utilisez une lueur subtile ou un changement d'échelle sur les nouveaux éléments.
- Faites correspondre la narration à l'action — Le clic se produit pendant que le narrateur dit "cliquez".
- Montrez toute l'interface — Le contexte aide les utilisateurs à s'orienter.
- Terminez par une célébration — Les états de succès renforcent l'accomplissement.
Type de vidéo : Promotion réseaux sociaux
Objectif : Attirer l'attention rapidement avec un texte cinétique audacieux pour les publicités et les contenus sociaux.
Structure du scénario
ACCROCHE (1-3s)
Un seul mot ou une phrase puissante qui arrête le défilement.
PROPOSITION DE VALEUR (3-5s)
Quel est l'avantage pour eux ? Une phrase percutante.
ÉCLAIR DE FONCTIONNALITÉS (5-10s)
2-3 avantages clés, en rafale.
APPEL À L'ACTION (2-3s)
Action claire : "Téléchargez maintenant", "Essayez gratuitement", URL
Style visuel
- Fonds minimalistes : Couleurs unies ou dégradés simples.
- Contraste maximal : Fond sombre + texte blanc OU fond coloré + texte blanc.
- Apparition mot par mot : Chaque mot a son propre moment.
- Transitions de couleurs : La couleur de fond change entre les scènes.
- Format carré : 1080x1080 pour Instagram/flux sociaux.
Motifs d'animation pour les promotions sociales
- Martèlement des mots : Les mots apparaissent avec impact (échelle 1,2→1 + légère secousse).
- Flash d'arrière-plan : Changements de couleur instantanés entre les mots/phrases.
- Redimensionnement du texte : Les mots deviennent grands puis rétrécissent pour faire place au suivant.
- Mouvement minimal : Laissez la typographie audacieuse faire le travail.
- Coupures rapides : 0,5-1s maximum par mot/phrase.
Exemple de plan de scène
Scénario : "Nous sommes prêts."
Séquence de scènes (4 secondes au total) :
- Image 1 : Fond noir, "NOUS" apparaît en blanc (0,8s)
- Image 2 : Fond blanc, "SOMMES" apparaît en noir, centré (0,8s)
- Image 3 : Fond rouge, "PRÊTS" s'écrit, devient "PRÊTS" (1,6s)
- Image 4 : Maintenir l'image finale (0,8s)
Directives de durée
| Plateforme | Durée idéale | Durée max |
|---|---|---|
| Instagram Reels | 15-30s | 90s |
| TikTok | 15-60s | 3min |
| Twitter/X | 15-45s | 2min 20s |
| 30s-1min | 10min | |
| YouTube Shorts | 15-60s | 60s |
Type de vidéo : Présentation d'application/produit
Objectif : Démontrer l'interface d'un produit avec une touche cinématographique, combinant texte et interface utilisateur.
Structure du scénario
ACCROCHE (3-5s)
Énoncé du problème ou question intrigante.
PRÉSENTATION DU PRODUIT (5-10s)
Montrez le nom/logo du produit, établissez la marque.
VISITE DES FONCTIONNALITÉS (20-40s)
Parcourez 3 à 5 fonctionnalités clés avec des démonstrations de l'interface.
RÉSUMÉ DES AVANTAGES (5-10s)
Récapitulez ce qui le rend spécial.
APPEL À L'ACTION (5s)
URL, badge de l'App Store ou prochaine étape.
Style visuel
- Fonds dégradés sombres : Noir à violet/bleu pour les produits technologiques.
- Fonds dégradés doux : Pastels (rose, lavande, menthe) pour les applications conviviales.
- Maquettes d'interface flottantes : Écrans d'application légèrement inclinés avec ombres.
- Texte cinétique à côté de l'interface : Le texte apparaît à côté ou au-dessus de l'interface.
- Interactions du curseur : Montrez les clics, les défilements, la frappe dans l'interface.
Motifs d'animation pour les présentations d'application
...