Qu’est-ce que le motion design : rythme, son, accessibilité et dix Reels dessinés entièrement en code

Le motion design, du graphisme qui bouge dans le temps

On croise le motion design avant de connaître son nom : un logo qui s’assemble avant une vidéo, un prix qui défile dans une publicité, des mots qui tombent dans un Reel en rythme. Wikipédia décrit le motion graphic design, aussi appelé motion design, comme une branche du design graphique qui l’associe aux graphismes animés et à la production vidéo. Rien n’a besoin d’être filmé. La matière : typographie, formes, icônes, éléments d’interface et chiffres.

Le même article le distingue de l’animation comme forme d’art, qui s’appuie sur les effets de cinéma et la narration. Ce métier anime plutôt des objets abstraits, du texte et des éléments graphiques. Pour un commanditaire, la frontière est pratique : un dessin animé avec personnages et intrigue relève de l’animation, une vidéo qui explique un service par texte et schémas, de l’autre. Wikipédia cite parmi ses usages les génériques, la publicité et les interfaces.

Timing, easing et ressorts : la grammaire du mouvement

Les douze principes de base de l’animation, présentés par Ollie Johnston et Frank Thomas, animateurs de Disney, dans leur livre de 1981, servent toujours de liste de contrôle. Le timing est le nombre de dessins ou d’images consacrés à une action. Le principe slow in, slow out place plus d’images au début et à la fin d’un mouvement, pour que rien ne démarre ni ne s’arrête net. Les logiciels appellent cela l’easing.

Les designers d’interfaces en ont fait des chiffres. La documentation de Material Design sur le mouvement pour Android définit l’easing comme une courbe qui détermine le temps qu’un objet met à démarrer et à s’arrêter. Elle propose seize durées standard, de 50 à 1 000 millisecondes : plus la surface ou la distance est grande, plus l’animation dure. Elle décrit aussi des ressorts à trois vitesses ; les spatiaux déplacent les éléments, ceux d’effets changent couleur ou opacité.

Les Human Interface Guidelines d’Apple ajoutent du jugement. Elles demandent d’ajouter du mouvement à dessein, pour soutenir l’expérience sans l’éclipser, et préviennent qu’une animation gratuite ou excessive peut distraire, voire provoquer un inconfort physique. L’animation de retour doit être brève et précise, et l’on doit pouvoir l’interrompre sans attendre sa fin. Dans une vidéo d’entreprise, chaque mouvement pointe vers le message.

Musique, effets sonores et droits dans une vidéo animée

Le graphisme animé est rarement muet. La musique donne le tempo ; coupes, mots, impacts et souffles s’y posent, et l’image semble jouée plutôt que montrée. Wikipédia appelle son versant typographique la typographie cinétique, un texte présenté dans le temps pour transmettre une idée ou une émotion. Elle en situe l’origine dans le générique de Saul Bass pour La Mort aux trousses, en 1959, où les noms entraient en volant.

Les problèmes de droits se cachent souvent dans le son. Le Copyright Office des États-Unis explique qu’enregistrer une chanson peut créer deux œuvres, la composition avec ses paroles et l’enregistrement sonore, souvent détenues et concédées séparément. Utiliser celles d’un autre artiste demande en général l’accord du titulaire ou une licence. Même prudence pour archives, polices et photos. Les règles varient selon le pays et la plateforme : faites vérifier votre cas par un spécialiste.

Mouvement réduit, limite des flashs et formats verticaux

Une image qui bouge peut faire du mal. Selon le W3C, qui explique le critère 2.3.3 des WCAG 2.2, Animation from Interactions, de niveau AAA, l’animation cause à certains distraction ou nausée, et les troubles vestibulaires peuvent entraîner vertiges et maux de tête. Le critère demande que l’animation déclenchée par une interaction puisse être désactivée, sauf si elle est essentielle. Sur le web, l’outil est la caractéristique CSS prefers-reduced-motion, qui selon MDN signale que l’utilisateur a demandé à son appareil moins de mouvement non essentiel.

Une vidéo terminée étant la même pour tous, la règle clé porte sur les flashs. Le critère 2.3.1, Three Flashes or Below Threshold, relève du niveau A, celui de base : rien ne doit clignoter plus de trois fois sur une seconde, sauf sous les seuils général et rouge. Il vise à éviter les crises liées à la photosensibilité, et le W3C note une sensibilité plus forte au rouge. Le critère 1.2.2 ajoute que les sous-titres rendent aussi les sons significatifs.

Reste le format, qui change. Le guide publicitaire de Meta pour la vidéo dans Instagram Reels indique aujourd’hui un ratio 9:16 en 1440 sur 2560 pixels et une durée de 0 seconde à 15 minutes. Il suggère de laisser au moins 14 % en haut, 35 % en bas et 6 % sur les côtés sans texte ni logo. Selon l’aide de YouTube, les outils Shorts créent des vidéos jusqu’à 3 minutes, mises en ligne jusqu’en 1080p. Revérifiez ces deux pages avant de publier.

Ten Reels in Code, la série verticale propre au studio

Ten Reels in Code est une série de films verticaux réalisée par le studio VITON13 pour son propre Instagram en 2026. C’est un travail propre du studio, pas une commande client : le compte et le brief sont les siens. La série devait ressembler au travail de dix motion designers différents. Quatre films parlent des services du studio, trois de VITON13 SCHOOL et trois de VJOURNAL.

Chaque film dure de 14 à 16 secondes, 152 secondes au total, avec son style, sa bande-son et sa couverture. Les techniques changent : un globe de particules, une nuée, une machine qui joue de la musique par collisions, un médaillon en 3D, un montage de typographie cinétique. Dans l’un, des billes lumineuses rebondissent entre sept barres de lumière aux noms des pôles du studio. Chaque chiffre à l’écran a été relevé sur les sites en ligne du studio le 12 octobre 2026. Du brief à dix films terminés, il a fallu une journée.

Images calculées à partir du temps, son tiré de la scène

La méthode rejoint les fondamentaux. Chaque film est une scène HTML dont chaque image est une fonction pure du temps : un même instant donne toujours la même image. Un moteur commun fournit ressorts, caméra 3D, particules, profondeur de champ et une typographie qui tombe sur le temps. C’est la typographie cinétique au sens propre.

La musique et chaque impact, clic et souffle sont synthétisés depuis la liste d’événements de la scène, donc image et son ne peuvent se décaler. Il n’y a ni images d’archives, ni images d’IA, ni musique sous licence. Les références étaient des prompts publics sous l’étiquette « particles ». Le studio a répondu à chacun par sa propre idée, en reprenant les techniques, pas des images ni du code.

Les dix scènes ont été écrites en parallèle à partir d’un seul brief, vérifiées à raison d’une image par temps et rendues avec flou de mouvement dans Chrome headless, un navigateur sans fenêtre. Les films sont programmés un par jour à partir du 13 octobre 2026. Le moteur reste : un nouveau film, c’est un fichier de scène, un fichier de bande-son et une commande. Vu de l’intérieur, le métier est fait de décisions sur le temps, assez précises pour qu’une machine les répète.

Ce que dix Reels dessinés en code ne prouvent pas

Ce cas a des limites nettes. Ce sont les Reels du studio, pas un travail client : ils montrent ce que donne la méthode en toute liberté, pas comment elle s’accommode des règles d’un client. Les films venaient de commencer à paraître, il n’y a donc encore aucun chiffre d’audience ni de ventes. Rien n’indique que des Reels dessinés en code vendent mieux que des Reels tournés.

Le son a sa propre réserve : il a été équilibré par la mesure, pas masterisé à l’oreille. Les prompts de référence sont publics et appartiennent à leurs auteurs ; seule l’idée de chaque technique a été reprise. Une journée de production dit peu d’une commande, où le message se valide d’abord avec le client. La lecture honnête est plus étroite : le motion design peut se faire avec du code et du son synthétisé, et le moteur peut resservir.

Commander du motion design ou de l’animation 2D : quoi préparer

Avant de commander, écrivez le message en une ou deux phrases : ce que le spectateur doit savoir ou faire au bout de quinze secondes. Rassemblez l’existant : fichiers du logo, couleurs, polices avec licence, photos du produit, chiffres réels sourcés. Listez les plateformes, avec ratio et durée tirés de leur aide actuelle, et la date de mise en ligne. Avec cette feuille, le travail se planifie sans deviner.

Un modèle suffit plus souvent qu’on ne le pense : une annonce hebdomadaire, une promotion, de nouveaux horaires. Il donne vite un résultat propre, mais timing, zones de sécurité, flashs et sous-titres comptent aussi. Commander du motion design a du sens quand la vidéo porte la marque des mois durant, explique un produit par texte et schémas ou doit se distinguer de modèles tous pareils. Choisissez l’animation 2D quand l’idée réclame des personnages et une histoire.

Le studio VITON13 fait les deux : du motion design pour des vidéos explicatives et promotionnelles, et de l’animation 2D avec personnages. Le cas des dix Reels montre sa méthode du brief au rendu. Les guides en lien ci-dessous disent combien coûtent vidéos explicatives et promotionnelles, et de quoi dépend le prix. Venez avec le message, les éléments et les formats, et l’échange pourra porter sur l’idée.