Exemples de motion design : des vidéos assistées par IA, classées selon leur rôle
Par Potto AI Team·
Des exemples de motion design classés par rôle : films de lancement, écrans produit, typographie cinétique, récits de données, vidéos explicatives et révélations de logo, chacun attribué à son auteur.
Les exemples de motion design les plus utiles se classent selon le rôle de la vidéo, pas selon le style visuel : un film de lancement, un écran produit animé, un reel de typographie cinétique, un récit de données, une vidéo explicative ou une révélation de logo. Chaque rôle a sa durée, son format et son ordre d’idées. Un « bon exemple » n’aide donc que s’il est du bon type. Ce guide retient 21 exemples de motion design dans la bibliothèque de vidéos de motion design IA sur Potto, les range dans ces six rôles et indique pour chacun l’auteur, la durée, le format et ce qu’il faut regarder.
Une chose d’abord : aucune de ces vidéos n’a été faite par Potto. Elles ont été réalisées et publiées par des créateurs indépendants, cités ci-dessous par leur identifiant X. Potto les rassemble pour que vous puissiez les regarder, lire le prompt lorsque l’auteur en a partagé un, et démarrer votre propre vidéo à partir de l’idée. Les descriptions n’utilisent que le titre de chaque vidéo et les détails de sa page (auteur, catégorie, durée, format, outils), parce que le but est de vous aider à choisir quoi étudier, pas de commenter le travail des autres. Tout ce qui concerne l’outil de Potto vient du produit tel qu’il fonctionne aujourd’hui.
Ce qui compte comme motion design
Le motion design, ou motion graphics, est du graphisme mis en mouvement : du texte, des formes, des icônes, des graphiques et des images qui bougent pour expliquer quelque chose, annoncer quelque chose ou donner un visage à une marque. Le guide d’Adobe sur le motion graphics les définit comme « graphics with movement » et les appelle « shorter pieces of animation that entertain or impart information », par opposition aux longs métrages d’animation avec des personnages et une intrigue. L’article de Wikipédia sur le dit que le motion design est en général associé à la mise en mouvement d’objets abstraits, de texte et d’autres éléments de graphisme.
Ensemble, les deux sources nomment les endroits où ce travail apparaît : génériques d’ouverture pour le cinéma et la télévision, habillage broadcast et graphique d’information, publicité et image de marque, typographie animée, conception d’interfaces, vidéos explicatives et promotionnelles. Cette liste est organisée par secteur. Ce guide organise par tâche, parce que, quand vous faites une vidéo, la question est « qu’est-ce que j’essaie de faire passer ? » plutôt que « de quel secteur s’agit-il ? ». Les six rôles ci-dessous correspondent aux catégories de la bibliothèque et couvrent l’essentiel de ce dont une entreprise ou un créateur a vraiment besoin.
Rôle
Ce qu’il fait
Question typique à laquelle il répond
Lancement
Annonce un produit ou une sortie
Qu’est-ce qui est nouveau, et pourquoi cela me concerne ?
Écrans produit
Anime une interface
À quoi ressemble ce produit, et comment fonctionne-t-il ?
Typographie cinétique
Fait bouger les mots comme image principale
Quelle est la phrase que je dois retenir ?
Récit de données
Fait passer un chiffre ou une tendance
Qu’est-ce qui a changé, et de combien ?
Vidéo explicative
Enseigne une idée par étapes
Comment cela fonctionne-t-il ?
Animation de logo
Révèle un signe de marque
Qui a fait cela ?
Comment les 21 exemples ont été choisis
La bibliothèque est grande et continue de grandir, ce guide ne cite donc pas de totaux. La page affiche toujours les chiffres du moment. Pour choisir les exemples, le guide a utilisé quatre filtres. Chaque œuvre doit avoir un auteur cité, une durée et un format enregistrés, une vidéo qui se lit, et un titre qui dit de quoi parle la vidéo. Dans chaque rôle, il a privilégié des œuvres qui varient en durée, en format et en outils, pour montrer l’éventail plutôt qu’un motif répété.
Deux faits sur l’ensemble de la bibliothèque valent d’être connus avant les exemples. Ils viennent des fiches de la bibliothèque, vérifiées le 2026-10-12, et ils bougeront à mesure que des œuvres s’ajoutent :
La plupart des œuvres sont en 16:9. Environ quatre œuvres sur cinq sont en 16:9, à peu près une sur huit est en 9:16, et le reste est en 1:1. Chaque rôle ci-dessous suit le même déséquilibre, qui correspond aux endroits où les gens regardent : sites web, présentations et X.
La durée dépend du rôle. La durée médiane est d’environ 9 secondes pour l’animation de logo, 15 pour la typographie cinétique, 30 pour le lancement, 35 pour le récit de données, 36 pour les écrans produit et 60 pour la vidéo explicative. Les médianes par rôle figurent dans chaque section.
Les 21 œuvres apparaissent ci-dessous dans leurs propres sections, chacune liée à sa page, où vous pouvez la lire. Pour chaque œuvre, le guide donne l’identifiant X de l’auteur, la durée, le format, les outils lorsque la page les indique, et si l’auteur a partagé le prompt. « Prompt partagé » signifie que l’auteur a publié le prompt sur la page de l’œuvre, vous pouvez donc le lire avant de décider de le réutiliser.
Exemples de films de lancement
Un film de lancement annonce quelque chose et demande au spectateur de retenir une chose : le nom. Parmi les vidéos de lancement de la bibliothèque, la durée médiane est de 30 secondes, et environ la moitié dure 30 secondes ou moins. C’est aussi la catégorie dont les formats s’écartent le plus, avec à peu près une œuvre sur cinq en 9:16 pour le téléphone.
Reddit marketing tool launch video de @anthonyriera dure 52,8 secondes en 16:9. La page indique Remotion comme outil, le même moteur de rendu que Potto, ce qui en fait une référence utile pour voir ce qu’un film de lancement construit en code peut contenir sur près d’une minute.
TypingMind showreel announces team features de @ann_nnng dure 15,0 secondes en 16:9, construit sur canvas, et l’auteur a partagé le prompt. Le titre nomme le contenu, team features, et la forme, un showreel.
CodePilot promo floats 17 model-provider logos de @op7418 dure 50,0 secondes en 16:9. Le titre est lui-même un brief précis : un procédé visuel répété, 17 logos, sur une horloge de 50 secondes.
Ce qu’il faut regarder. Lisez un film de lancement une fois sans le son et notez la seconde où le nom du produit apparaît pour la première fois. Comptez ensuite combien d’affirmations distinctes le film avance. Les exemples ci-dessus suggèrent une règle qui tient dans toute la catégorie : plus le film est court, moins il y a d’affirmations. Un film de 15 secondes porte une idée et un nom. Un film de 50 secondes a la place pour un problème, quelques fonctions et une phrase de fin.
Le reprendre avec Potto. L’outil de vidéo produit de Potto construit des films de lancement à partir d’une description ou d’un lien. Un brief qui fonctionne bien nomme le public, la durée et les temps forts :
Film de lancement pour une application fictive de budget appelée Ledgerly, 30 secondes, 16:9. Ouvrir sur le problème du suivi des dépenses dans des tableurs, montrer trois fonctions, finir sur le nom de l’application et un appel à l’action.
Exemples d’écrans produit
L’animation d’écrans produit montre une interface en train de faire quelque chose : une liste se trie, un tableau de bord se remplit, un téléphone parcourt un parcours. La durée médiane de la catégorie est de 36 secondes, mais la moitié centrale des œuvres va d’environ 24 à environ 67 secondes. C’est donc la plus variée des six. C’est aussi là que les exemples en 9:16 et en 1:1 sont les plus utiles, car les parcours d’application se montrent souvent sur téléphone.
Mac app onboarding sorts messages into one calm list de @dhruvalgolakiya dure 13,4 secondes en 16:9. Le titre nomme une seule transformation, des messages qui deviennent une liste, et la durée laisse exactement la place pour cela.
Ce qu’il faut regarder. Mettez en pause sur la première image qui montre l’interface et demandez-vous où le spectateur est censé regarder. Regardez ensuite combien de temps chaque état reste à l’écran. L’animation d’écran produit échoue quand l’écran change avant que l’œil ait trouvé le changement. C’est pourquoi les exemples les plus courts ici montrent une seule transformation, et les plus longs regroupent leurs états en étapes.
Le reprendre avec Potto. Une vidéo de démo produit part de captures d’écran que vous téléversez, jusqu’à huit images, documents ou fichiers audio par projet. Les scènes de capture zooment et suivent un trajet de curseur, et chaque scène peut porter une légende. Le brief habituel est donc une liste d’étapes :
Démo produit pour une application fictive de facturation, 30 secondes, 16:9. Utiliser mes trois captures : créer une facture, l’envoyer, la voir payée. Une courte légende par capture, fin sur le nom de l’application.
Exemples de typographie cinétique
La typographie cinétique met les mots en mouvement comme image principale. C’est le plus court des rôles portés par le texte : la médiane est d’environ 15 secondes, et environ sept œuvres sur dix durent 30 secondes ou moins. Comme il n’y a ni interface ni graphique pour porter le sens, c’est l’écriture qui doit le faire.
Showreel opens on a bold Decision title card de @kenn dure 15,0 secondes en 16:9, et l’auteur a partagé le prompt. C’est un showreel de typographie, la carte de titre est donc le geste d’ouverture.
Slanted credit names glide over an orange grid de @goodside dure 75,0 secondes en 16:9, avec un prompt partagé. À cette durée, le procédé répété est une liste de noms qui se déplace sur un seul fond.
Ce qu’il faut regarder. Coupez le son et lisez. La typographie cinétique doit fonctionner comme du texte : si les phrases sont faibles, le mouvement ne les sauvera pas. Remettez ensuite le son et vérifiez si le timing de chaque mot suit le son. Les deux exemples de 15 secondes lient leur mouvement à une carte de titre ou à un tempo, tandis que les deux exemples de 75 secondes s’appuient sur une structure, une liste de générique et des titres de chapitre, pour retenir l’attention.
Le reprendre avec Potto. Les scènes de texte de Potto entrent sur un repère, et ses scènes de citation, de titre et de liste portent de courtes lignes. Il ne propose pas d’animation libre des lettres, une ondulation à 128 BPM est donc hors de ce qu’il rend. Ce qu’il traite bien, c’est un court script où chaque ligne a son propre écran :
Vidéo de texte cinétique, 15 secondes, 16:9, style Bold Pop. Cinq courtes lignes, une par écran, sur une équipe qui livre chaque vendredi. Finir sur la ligne « Ship it. »
Exemples de récits de données
Un récit de données fait passer un chiffre ou une tendance. Parmi les vidéos de récit de données de la bibliothèque, la médiane est d’environ 35 secondes, et l’écart est large, de 15 secondes à bien plus d’une minute. La catégorie est parmi les plus petites, ce qui en fait un bon endroit pour étudier chaque exemple.
LLM release timeline tracks 2026 models month by month de @nummanali dure 62,1 secondes en 16:9, construit sur canvas, avec le prompt partagé. La page décrit une animation canvas qui parcourt 2026 mois par mois, le temps est donc l’axe.
Ce qu’il faut regarder. Trouvez le seul chiffre que la vidéo veut vous faire retenir, puis vérifiez comment la vidéo le mérite : ce qui vient avant, et ce qui est montré après. Les trois exemples utilisent trois procédés différents pour la même tâche. L’un énonce un résultat, l’un parcourt une chronologie, l’un associe un chiffre à une image de ce qu’il mesure.
Le reprendre avec Potto. Les scènes de statistique montrent un seul grand chiffre, et les scènes de graphique dessinent des barres ou des anneaux avec trois à six valeurs qui montent. Si vous écrivez les chiffres dans le brief, la vidéo les utilise tels qu’ils sont écrits. Vérifiez donc chaque nombre contre votre source avant d’exporter. La page graphique animé en rassemble d’autres :
Récit de données, 30 secondes, 16:9. Les tasses moyennes par jour d’un café fictif sont passées de 120 en juin à 190 en septembre. Ouvrir sur la question, montrer les quatre mois en graphique à barres, finir sur la hausse de 58 %.
Exemples de vidéos explicatives
Une vidéo explicative enseigne une idée par étapes. C’est la plus longue des six : la durée médiane est de 60 secondes, et seulement environ une sur cinq dure 30 secondes ou moins. Les vidéos explicatives de la bibliothèque ont aussi l’éventail de traitements le plus large, du pixel art aux tableaux blancs dessinés à la main.
Kinetic word cloud pitches an AI inference startup de @deedydas dure 26,0 secondes en 16:9, construit avec SVG et GSAP, avec le prompt partagé. C’est la vidéo explicative la plus courte ici, et elle compresse un pitch dans un seul procédé en mouvement.
Ce qu’il faut regarder. Une vidéo explicative doit passer le test de la phrase : après un seul visionnage, pouvez-vous énoncer l’idée en une phrase ? Repérez le moment où le problème devient la solution, et comptez les étapes entre ce moment et la fin. Deux des trois exemples prennent un sujet petit et concret (un chiffre, un parcours d’intégration) et le laissent porter toute la leçon.
Le reprendre avec Potto. La structure derrière la plupart des vidéos explicatives est problème, solution, comment cela fonctionne et étape suivante. Le guide sur ce qu’est une vidéo explicative le détaille, et 12 exemples de vidéos explicatives les décompose selon l’ordre des scènes.
L’outil de vidéo explicative de Potto peut partir d’un sujet, d’un lien ou d’un document tel qu’un PDF. Il n’a pas de style dessiné à la main ni de tableau blanc. Les douze styles intégrés sont Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir et Fresh Mint.
Exemples d’animation de logo
Une révélation de logo est le rôle le plus court : la durée médiane dans la bibliothèque est inférieure à 9 secondes, et les exemples ici vont de 8,7 à 21,0 secondes. Il n’y a qu’une chose à regarder, la vidéo porte donc surtout sur le timing et sur la forme du mouvement.
TypingMind logo reveal de @tdinh_me dure 21,0 secondes en 16:9, avec le prompt partagé. La page décrit une révélation lente dans laquelle le signe s’assemble peu à peu.
Ce qu’il faut regarder. Regardez la dernière image. Une révélation de logo réussit si le signe final est net, centré et lisible assez longtemps pour être enregistré, et si le mouvement qui précède donne au signe sa personnalité. L’exemple de 8,7 secondes montre ce qu’un seul mouvement peut faire, une forme qui se change en une autre.
Le reprendre avec Potto. La scène finale d’appel à l’action de Potto peut terminer une vidéo sur votre logo, et la catégorie animation de logo de la bibliothèque est l’endroit pour étudier des révélations autonomes. Potto rend à partir d’un ensemble fixe de types de scènes et de styles, sans code d’animation sur mesure. Une courbe d’easing précise, comme le morphing élastique ci-dessus, est donc quelque chose à étudier plutôt qu’à copier à l’identique.
Faites votre propre version
Vous avez trois chemins vers une vidéo de ce genre. Écrire le code vous-même, demander à un agent de code de l’écrire, ou décrire la vidéo à un outil qui la rend pour vous.
Beaucoup de créateurs de la bibliothèque construisent avec du code. Remotion, le moteur de rendu qu’utilise Potto, se décrit comme un moyen de créer des vidéos et du motion graphics avec React, et publie des skills d’agent pour que les agents de code puissent travailler avec. La page skills de Potto rassemble des skills d’agent gratuits d’auteurs tiers, que vous pouvez installer dans un agent qui lit les fichiers SKILL.md. Ils s’exécutent dans votre propre agent, avec votre propre modèle.
Claude Motion d’Anthropic, annoncé le 8 octobre 2026 et en bêta sur les offres Team et Enterprise au 2026-10-12, anime du texte, des graphiques, des formes et des images à partir d’un prompt et exporte un MP4. Potto n’est pas Claude Motion et n’a aucune relation officielle avec Anthropic. L’article sur les alternatives à Claude Motion compare les chemins selon des faits que vous pouvez vérifier.
Le chemin par la description est l’outil motion design IA de Potto. Vous lui donnez un prompt, un lien public ou un document. Claude Opus 5.5 écrit le brief, le script et le storyboard, et Remotion rend les scènes en un MP4 avec voix off, sous-titres et musique, en 16:9, 9:16 ou 1:1. Vous pouvez modifier le storyboard écran par écran ou demander un changement dans le chat. Sur les pages de la bibliothèque, une vidéo dont le prompt est partagé a un bouton Use this prompt qui l’envoie au créateur de vidéo Potto. Le résultat est la version propre de Potto, avec ses types de scènes et ses styles, il ne reproduira donc pas l’original. Traitez l’original comme une référence pour l’idée, le rythme et l’allure.
Les aperçus et les storyboards ne coûtent rien. Les crédits sont débités à l’export, et le total est affiché avant que vous confirmiez (voir les tarifs). Potto ne génère pas de prises de vue réelles, d’avatars ni de personnes, et il ne monte pas une vidéo que vous avez déjà.
FAQ
Quels sont les types de motion design ?
Les types de motion design sont en général regroupés selon l’endroit où ils apparaissent : génériques de cinéma et de télévision, habillage broadcast et graphique d’information, publicité et image de marque, typographie cinétique, animation d’interface, vidéos explicatives ou promotionnelles. Ce guide les classe plutôt par rôle : films de lancement, écrans produit, typographie cinétique, récits de données, vidéos explicatives et animations de logo. L’article de Wikipédia sur le motion graphic design sépare aussi les graphismes explicatifs, émotionnels et promotionnels, selon que le but est de clarifier, d’évoquer un sentiment ou de faire connaître.
Qu’est-ce qui est considéré comme du motion design ?
Le motion design est du graphisme animé : du texte, des formes, des icônes, des graphiques et des images mis en mouvement pour informer, promouvoir ou marquer. Adobe les définit comme « graphics with movement » et les décrit comme des pièces d’animation plus courtes qui divertissent ou transmettent une information. Une vidéo qui anime une capture d’écran produit, un graphique en barres ou un logo est du motion design. Un long métrage d’animation avec des personnages et une intrigue s’appelle en général de l’animation.
Quelle est la différence entre le motion design et l’animation ?
Le motion design fait bouger des éléments de graphisme, comme la typographie, les formes et les graphiques, en général pour transmettre une information dans une pièce courte, tandis que l’animation, plus largement, raconte des histoires avec des personnages et des intrigues. Les deux se recouvrent, la frontière est donc une question de but et d’échelle plus que de technique. Le guide d’Adobe trace la ligne par la durée et le but : le motion graphics, ce sont des pièces plus courtes qui divertissent ou transmettent une information.
Combien de temps doit durer une vidéo de motion design ?
Cela dépend du rôle. Dans la bibliothèque Potto au 2026-10-12, la durée médiane est d’environ 9 secondes pour l’animation de logo, 15 pour la typographie cinétique, 30 pour les vidéos de lancement, 35 pour les récits de données, 36 pour les écrans produit et 60 pour les vidéos explicatives. Faites correspondre la durée au nombre d’idées : une idée tient en 15 secondes, et un problème, trois fonctions et une phrase de fin tiennent en 30 à 45. Les durées proposées par Potto sont 15, 30, 45, 60 et 90 secondes.
Les vidéos de ce guide ont-elles été faites avec Potto ?
Non. Elles ont été faites par des créateurs indépendants, et chacune est attribuée à son auteur par son identifiant X. Potto ne les revendique pas comme son propre travail. Elles sont incluses comme références, et la page de chaque œuvre relie la publication d’origine lorsqu’elle est disponible.
Puis-je faire du motion design comme celui-ci avec Potto ?
Oui, pour les sortes de motion design que Potto propose : films de lancement, écrans produit, vidéos portées par le texte, récits de données et vidéos explicatives, construits à partir de ses onze types de scènes, de ses douze styles et de vos couleurs de marque. Potto rend sa propre version à partir de votre prompt, le résultat ne copie donc pas un original, et il ne prend pas en charge le code d’animation sur mesure, les styles dessinés à la main ni l’animation libre des lettres.
Sources
Toutes les pages ont été consultées le 2026-10-12.
Remotion, documentation des skills d’agent (ce que couvrent les skills et comment les installer) : https://www.remotion.dev/docs/ai/skills (consulté le 2026-10-12)
Page d’accueil de Remotion (« Create videos and motion graphics with React ») : https://www.remotion.dev/ (consulté le 2026-10-12)
Pages Potto AI des 21 œuvres, de leurs auteurs, durées, formats et prompts partagés, et des médianes de la bibliothèque par catégorie (vérifié le 2026-10-12)
Potto AI
Créez votre prochaine vidéo de lancement.
Transformez ce qui a retenu votre attention en une vidéo ou une image personnelle. Apportez des captures d’écran, un sujet ou un prompt.
