Motion Design SaaS

Créez des vidéos produit où l'interface utilisateur réelle est la vedette et chaque mouvement explique quelque chose.

Valeurs par défaut en un coup d'œil

Paramètre	Valeur par défaut	Modifier uniquement lorsque
Ratio d'aspect	16:9 (1920×1080)	L'utilisateur demande explicitement du 9:16
Fréquence d'images	60 fps	L'utilisateur demande autre chose
Fond	Blanc cassé	L'utilisateur spécifie un autre fond
Couleurs	Issues du thème de l'interface du produit	Ne jamais coder en dur les couleurs
Dégradés	Aucun	L'utilisateur les demande explicitement
Voix-off	Aucune	L'utilisateur la demande explicitement
Musique	Un morceau Mixkit énergique choisi par l'utilisateur	L'utilisateur veut une ambiance plus calme, rien ne convient, ou la vidéo sera diffusée (voir Audio)

Une vidéo par exécution. Rendez un seul ratio d'aspect. Ne générez jamais 16:9 et 9:16 ensemble ; un montage 9:16 n'est fait que lorsque l'utilisateur le demande.

Stack technique

Outil	Version	Utilisé pour
Remotion	4.0.535	Construire chaque scène sous forme de composants React, prévisualiser dans Remotion Studio, exporter des images fixes et le rendu final
FFmpeg	Dernière stable	Mixage audio, réduction du volume de la musique sous la voix, planches contacts, encodage final
Node.js	24	Exécuter Remotion et les scripts de construction

Épinglez Remotion exactement. Installez chaque package remotion et @remotion/* en version 4.0.535 sans ^ ni ~. Des versions de packages Remotion incohérentes cassent les rendus.
Vérifiez Node en premier. Exécutez node -v avant d'installer quoi que ce soit. Si ce n'est pas la v24, informez l'utilisateur avant d'aller plus loin.
Dérivez tout mouvement de la frame. Animez avec useCurrentFrame() et interpolate()/Easing.bezier() en utilisant les presets d'easing ci-dessous, jamais de transitions CSS ou de minuteries, afin que chaque rendu soit exact frame par frame.
Définissez la composition à 1920×1080 à 60 fps par défaut, ou 1080×1920 uniquement lorsque du 9:16 est demandé.
Images fixes pour l'étape de revue : npx remotion still <composition> --frame=<n>.
Rendu final : npx remotion render <composition> out/<nom>.mp4 --codec=h264.

Flux de travail

Planifier. Recueillez le brief et rédigez le plan et la liste des plans (voir Planification ci-dessous). Obtenez l'approbation de l'utilisateur.
Lire le produit. Lisez le code source du frontend si vous l'avez, sinon l'interface live, et extrayez son thème (voir Accès au produit et Image de marque ci-dessous).
Rédiger le script et obtenez l'approbation de l'utilisateur (voir Script ci-dessous).
Construire la vidéo en utilisant les règles de mouvement, de chorégraphie, de caméra et de transition ci-dessous, dans l'esprit des références Inspiration.
Ajouter l'audio : proposez une sélection de morceaux Mixkit à l'utilisateur (voir Audio ci-dessous), puis ajoutez les effets sonores et, uniquement si demandé, la voix-off.
Exécuter le contrôle qualité.
Montrer les images fixes et attendre. Montrez à l'utilisateur les images de revue, répondez à ses questions et effectuez les modifications (voir Revue des images fixes ci-dessous). Ne rendez que lorsque l'utilisateur approuve.

Ne sautez pas une étape d'approbation. Chacune est moins coûteuse à modifier que l'étape suivante.

Planification

Avant d'écrire le moindre script, convenez de l'objectif de la vidéo.

1. Recueillir le brief

Demandez à l'utilisateur uniquement ce que vous ne pouvez pas découvrir par vous-même :

Question	Valeur par défaut si non fournie
Quel est le produit, et pouvez-vous partager son code source frontend ? Sinon, où l'interface live est-elle accessible (URL, build local, login) ?	Requis. Demandez. Préférez le code source.
À qui s'adresse la vidéo ?	Clients potentiels
Quelle est la seule chose que le spectateur doit retenir ?	Requis. Demandez.
Quelles fonctionnalités ou flux doit-elle montrer ?	Les 2 à 3 flux qui prouvent le mieux le message clé
Quelle durée doit-elle faire ?	30–45 s
Où sera-t-elle publiée ? Passera-t-elle à la télé ou à la radio ?	Site web et X/LinkedIn (16:9), en ligne uniquement
Y aura-t-il une voix-off, et si oui, masculine ou féminine ?	Pas de voix-off
Quel est l'appel à l'action ?	Visiter l'URL du produit

2. Rédiger le plan

Donnez à l'utilisateur un plan court à approuver :

Objectif : une phrase sur ce que la vidéo doit accomplir
Public : qui regarde, et ce qu'il sait déjà
Message clé : la phrase que le spectateur doit retenir
Format : durée, ratio d'aspect (16:9 sauf si du 9:16 a été demandé), voix-off oui ou non
Arc narratif : le modèle de structure (voir Script) rempli pour ce produit, une ligne par section
Flux à capturer : les écrans et interactions exacts de l'interface à enregistrer, avec l'état des données nécessaire pour chacun (par exemple "tableau de projet avec 12 tâches, 3 en retard")
Preuve : les éléments de preuve que la vidéo montrera, s'il y en a (une métrique, des logos clients, une citation, un benchmark ou un prix), et d'où ils viennent

3. Rédiger la liste des plans

Découpez l'arc narratif en plans, une ligne par plan :

#	Section	Plan	Mouvement	Durée
1	Accroche	Question tapée dans la barre de recherche du produit	Le curseur tape, la réponse défile	4 s

La liste des plans devient la colonne "Ce qui est à l'écran" du script.

Accès au produit

La vidéo n'est aussi bonne que votre accès au produit. Par ordre de préférence :

Accès	Ce que cela vous donne
1. Code source frontend (meilleur)	Tokens de design exacts, composants réels, contenu réel, icônes et fichiers logo. L'interface peut être reconstruite pixel pour pixel dans Remotion et animée librement.
2. Application en cours d'exécution (URL ou build local, avec un login de test)	Le thème et les flux réels, capturés depuis le navigateur. Fidèle, mais plus difficile à animer élément par élément.
3. Enregistrements d'écran ou captures d'écran	Un dernier recours. Reconstruisez les écrans à partir de ceux-ci aussi fidèlement que possible, et prévenez l'utilisateur que le résultat sera moins précis.

Si vous n'avez pas le code source, demandez-le avant de vous contenter d'une option inférieure.

Travailler à partir du code source

Thème : lisez les tokens de design là où le projet les conserve, par exemple les propriétés personnalisées CSS, la configuration Tailwind, un fichier de thème ou un package de design tokens.
Composants : réutilisez les propres composants d'interface du produit dans les compositions Remotion lorsqu'ils se rendent proprement en dehors de l'application. Sinon, recréez-les fidèlement à partir de leur source.
Contenu : reprenez les vrais libellés, états vides, icônes et fichiers logo de la source plutôt que de les inventer. Utilisez des données de seed ou de fixture pour les états de données dont le plan a besoin.
Lecture seule. Ne modifiez jamais le code source du produit. Construisez la vidéo dans son propre projet Remotion.

Image de marque

N'utilisez aucune couleur de marque fixe. Chaque couleur provient du produit présenté.

Lisez l'interface utilisateur principale du produit, depuis le code source lorsque vous l'avez, et extrayez son thème : couleur primaire/d'accent, neutres, couleurs de surface, couleurs de bordure, typographie, rayons de coins et style d'ombre.
Fond : privilégiez un fond blanc cassé par défaut, sauf si l'utilisateur spécifie autre chose.
Accent : utilisez la propre couleur d'accent du produit pour les emphases, les anneaux de curseur, les carets et les surbrillances.
Pas de dégradés dans les fonds, le texte, les lueurs ou les transitions, sauf si l'utilisateur le demande explicitement. Utilisez des remplissages unis.
Typographie : utilisez la propre police du produit lorsque c'est possible, afin que les légendes semblent natives à l'interface.
Logo et marque nominative : utilisez les véritables ressources du produit. Ne les redessinez ni ne les approximez jamais.

Script

Le script pilote tout : les légendes, le timing, et la voix-off s'il y en a une. Rédigez-le à partir du plan et de la liste des plans approuvés, avant de construire une scène, et obtenez l'approbation de l'utilisateur avant de construire.

Format

Rédigez le script sous forme de tableau, une ligne par ligne :

#	Ligne (dite ou à l'écran)	Ce qui est à l'écran	Durée
1	Votre équipe perd six heures par semaine en comptes rendus.	Le compteur monte à 6 au-dessus d'une liste de tâches encombrée	3 s

Règles

Accroche dans les 7 premières secondes. Ouvrez avec le problème, un chiffre surprenant ou le produit faisant quelque chose de ravissant, pas le nom du produit.
Chaque ligne a une image. Si une ligne n'a pas de temps visuel correspondant, coupez-la ou réécrivez-la.
Langage simple. Phrases courtes, une idée par ligne, pas de jargon que le spectateur doit décoder.
Rythme : environ 2,5 mots par seconde lorsqu'elle est exprimée. Calculez la durée de la ligne à partir de son nombre de mots.
Marquez l'emphase avec *étoiles*, au plus une phrase clé par ligne.
Chaque affirmation est vraie. Les chiffres et les benchmarks doivent être réels et annotés si nécessaire.
Respectez la durée définie dans le brief. Coupez les lignes avant d'accélérer le mouvement.
Pas de voix-off par défaut. Sans voix-off, le script apparaît uniquement sous forme de légendes à l'écran.

Sonnez comme une personne, pas comme un modèle

Chaque ligne doit sembler être quelque chose qu'une vraie personne dirait à voix haute à un collègue. Un texte généré par IA fait décrocher les spectateurs et donne au produit un aspect générique. C'est une règle stricte, pas une préférence de style.

Écrivez comme ceci :

Soyez concret. Utilisez les vrais noms de fonctionnalités du produit, de vrais chiffres et l'action réelle de l'utilisateur ("Glisser une tâche vers vendredi", pas "Gérez votre flux de travail sans effort").
Nommez la douleur spécifique que le public ressent, dans ses mots ("Votre daily a duré 40 minutes encore une fois").
Utilisez des contractions et des mots de tous les jours : "vous allez", "c'est", "ça ne marche pas".
Préférez les verbes aux adjectifs. Montrez ce que le produit fait au lieu de décrire à quel point il est bon.
Les lignes courtes sont acceptables lorsqu'elles disent quelque chose de spécifique ("Les réunions se déplacent." fonctionne parce que l'image montre exactement cela).

N'écrivez jamais ceci :

Modèle	Exemples
Cadrage contrasté	"Pas X, mais Y", "Ce n'est pas seulement X, c'est Y", "Pas X. Pas Y. Z.", "X n'est pas le problème. Y l'est."
Listes à trois rythmes	"Plus rapide, plus intelligent, meilleur", "Planifiez. Construisez. Livrez." quand les trois mots ne disent rien de spécifique
Fragments d'adjectifs empilés	"Solution rapide, fiable, intuitive, évolutive" – charge uniquement des adjectifs sans les rattacher à une action réelle
Promesses creuses	"Changez la donne", "Révolutionnez votre flux de travail", "Débloquez votre potentiel"
Descriptions génériques d'IA	"Conçu pour optimiser", "Exploitez la puissance de", "Tirez parti de solutions de pointe"

Quand une ligne ressemble à du remplissage, supprimez-la. Les meilleures vidéos produit ont moins de mots que les spectateurs ne le pensent.

Mouvement

Easing

Utilisez ces presets d'easing pour tous les mouvements. Ne transgressez pas ces règles pour un plan ou un composant spécifique.

Utilisation	Aide-mémoire	Appel de l'API
Déplacement principal	Sortie rapide, amorti à l'arrêt	`Easing.bezier(0.16, 1, 0.3, 1)`
Entrée standard	Glisse doux	`Easing.bezier(0, 0, 0.2, 1)`
Sortie standard	Ralentit progressivement	`Easing.bezier(0, 0, 0.2, 1)`
Mouvement de caméra	Flottant, jamais brusque	`Easing.bezier(0.45, 0, 0.2, 1)`
Transitions de fondu	Cinématique, naturel	`Easing.bezier(0.65, 0, 0.35, 1)`
Apparition de texte (lettre)	Rebond très léger à l'arrivée	`Easing.bezier(0.34, 1.56, 0.64, 1)` (amortissement élastique)

Appliquez toujours extrapolateLeft: 'clamp' et extrapolateRight: 'clamp'.
Ne réutilisez pas les animations. Construisez des composants de mouvement réutilisables (entrée, sortie, saut, fondu, glissement) et composez-les plutôt que de dupliquer du code interpolate.
Tous les timings cités dans ce document sont des valeurs par défaut qui peuvent être modifiées au niveau du plan.

Correspondance des durées

Lorsqu'un mouvement est provoqué par une action (par exemple, un curseur qui clique déclenche un panneau qui glisse), la durée de l'action doit correspondre à la durée de la réaction. Utilisez la même valeur de durationInFrames pour la scène entière. Règle empirique : 12–18 images pour les micro-interactions, 24–36 images pour les transitions d'écran.

Vitesse et espace blanc

Le mouvement doit expliquer, pas divertir. Chaque mouvement a une raison : attirer l'attention, révéler, clarifier ou rythmer.
Laissez 20 à 30 % d'espace blanc de mouvement (les choses bougent seulement pendant 70 à 80 % des images de la scène). Le reste, les éléments restent statiques pour que le spectateur puisse lire.
Accélérez ou ralentissez en toute sécurité en changeant durationInFrames sur la composition englobante, pas en modifiant les courbes d'easing.

Chorégraphie de l'interface

L'interface utilisateur réelle du produit est la star. Elle doit se comporter comme l'interface réelle, à la différence qu'elle entre et sort des scènes de manière cinématographique.

1. Restez fidèle à la réalité

Les données affichées à l'écran doivent être réalistes. Les noms, dates, et statuts doivent ressembler à de vraies données du produit.
Les états vides ne doivent jamais apparaître sauf s'ils prouvent un point ("Aucune tâche en retard — tout est fait").
Les icônes, typographie et couleurs doivent correspondre exactement au produit. Ne mélangez pas les motifs d'interface.

2. Mettez en scène des actions réelles

Montrez l'utilisateur en train d'utiliser le produit. Au lieu d'afficher des transitions, montrez des interactions qui les déclenchent :

Faire ceci	Pas cela
Curseur tape une requête → les résultats apparaissent	Le panneau de recherche apparaît soudainement
Curseur fait glisser une carte → la colonne se met à jour	Les cartes se réarrangent toutes seules
Curseur survole → info-bulle	Texte qui apparaît avec un fondu au hasard

3. Dirigez l'attention

Utilisez le curseur pour lier les actions et les réactions ensemble. Lorsqu'un clic se produit en dehors de l'écran, coupez au résultat, mais ajoutez un son de clic pour maintenir la continuité.
Le curseur touche ou survole les cibles, ne se contente pas de flotter. Faites-le atterrir sur les boutons avant qu'ils ne réagissent.
Mettez en emphase un élément avec un anneau de couleur d'accent autour de lui, jamais une lueur ou un halo.
Utilisez un fondu léger et un zoom avant pour attirer l'attention sur une zone de l'interface, comme un sous-titre mettrait en avant une citation.

Caméra et composition

Règles de caméra

Pas de mouvement de caméra non motivé. Le mouvement de la caméra sert à révéler, suivre ou mettre l'accent. Ne déplacez la caméra que lorsque l'interface impose une action (par exemple, suivre le curseur vers un autre panneau, ou révéler progressivement une grande quantité de données).
Zoom avant pour l'accentuation, zoom arrière pour le contexte. Un zoom avant rapproché doit avoir une raison : un chiffre clé, un bouton CTA ou l'achèvement d'une action.
Pendant les mouvements de caméra, l'interface peut encore bouger (éléments qui se déplacent dans le plan). Les deux couches doivent partager le même easing de caméra pour paraître ancrées.

Transitions

Chaque transition doit être rapide, claire et ne jamais interrompre le flux narratif.

Transition	Utilisation	Effet
Coupure	Changements d'écran normaux ou coupe de rythme pour gagner du temps	Aucun effet. Utilisée pour les plans qui changent de direction ou de contexte
Fondu	Changement de scène ou de section, ou fin d'une boucle	Fondu vers et depuis le noir (jamais le blanc). 12 à 18 images.
Zoom fluide	Pour rester dans la même interface lorsque le focus se déplace naturellement	La caméra et le contenu semblent se déplacer ensemble. 24 à 30 images.
Glissement	Pour montrer des écrans côte à côte (par exemple, avant/après)	Glissement vers la gauche ou la droite. 18 à 24 images.
Coupe rapide	Pour montrer une série rapide d'interactions du même type	8 à 12 images par coupe, sans fondu.

Audio

Pas de voix-off par défaut. Si l'utilisateur en demande une, suivez ces directives :

Locuteur : masculin ou féminin selon le brief. Utilisez des voix naturelles et authentiques, pas des voix de synthèse.
Mixage : abaissez le volume de la musique à -18 dB sous la voix parlée (ducking). Le niveau de la musique seul doit être à -12 dB (pic), la voix à -6 dB (pic).
Synchronisation : chaque mot doit correspondre exactement à son temps visuel. Ajustez la durée de la scène si la phrase nécessite plus ou moins de temps que la durée par défaut.
Effets sonores : ajoutez des sons d'interface subtils pour les actions (clic, glissement, notification, etc.). Les effets sonores ne doivent jamais dominer le mix. Utilisez une bibliothèque de sons d'interface libres de droits.

Musique

Source : utilisez Mixkit pour la musique de fond sauf si l'utilisateur a une licence pour une autre plateforme.
Sélection : proposez 3 à 5 morceaux qui correspondent à l'ambiance du produit. Classez chacun par énergie (élevée/moyenne/calme) et durée.
Énergie : par défaut, choisissez une piste à haute énergie. Pour les produits sérieux, utilitaires ou d'entreprise, choisissez une piste à énergie moyenne. Pour les vidéos d'ambiance ou de relaxation, choisissez une piste calme.
Durée : le morceau doit être au moins aussi long que la vidéo. Si ce n'est pas le cas, bouclez-le de manière transparente.
Pas de piste par défaut. Montrez toujours les options à l'utilisateur avant d'en choisir une.

Contrôle qualité

Avant de montrer les images fixes, exécutez cette liste de vérification :

Revue des images fixes

Rendez des images fixes pour les points clés : une image pour l'ouverture, une pour la partie principale, une pour la fin. Utilisez npx remotion still.
Envoyez-les à l'utilisateur et attendez ses retours avant d'effectuer des modifications ou de lancer le rendu final.
Répondez à chaque retour. Expliquez ce qui a changé ou pourquoi un élément est resté tel quel. Obtenez une approbation explicite avant de continuer.

Demander à votre IA préférée

Documentation