Toutes les animations de nos films, redessinées en un jour
· 4 min de lecture

Entre les enregistrements d'écran, un film PageToVid tient grâce à des scènes dessinées : un carton avec un chiffre clé, une liste qui se construit, une citation, un bouton de fin. Elles avaient poussé une à une pendant des mois. Aujourd'hui, nous les avons toutes rendues, avons regardé les images de près, et avons reconstruit toute la bibliothèque sur un seul ensemble de règles.
Nous avons jugé le mouvement à ses images
Nous avons mené cette revue à partir d'images rendues, pas du code, car un mouvement qui se lit bien dans le code peut sembler faux à l'écran. Les images racontaient une histoire claire.
- Un balayage de couleur au début de chaque scène, pensé comme une transition, couvrait la moitié de l'image et détournait le regard du contenu.
- Plus de cinquante ressorts avaient été réglés chacun de leur côté : rien ne bougeait tout à fait comme le reste.
- Le contenu était petit, arrivait d'un bloc et restait à plat dans l'image.
- Certaines entrées se terminaient sous ce balayage, si bien que personne ne les voyait.
La revue comptait seize points en tout, avec une seule racine : chaque scène avait inventé son propre tempo. La bibliothèque n'avait pas besoin de seize corrections, mais d'un système.
D'abord les règles, ensuite les scènes
La première mise à jour de la journée ne changeait rien à l'écran, volontairement. Elle ajoutait un petit système de design pour le mouvement : quelques courbes d'accélération, des réglages de ressort mesurés plutôt que devinés, des durées et des décalages standard, des briques d'entrée, des niveaux de profondeur et une échelle typographique. Chaque mouvement reconstruit ce jour-là serait fait de ces pièces, pour que les films partagent une même sensation.
Nous avons aussi donné à chacune des 22 scènes dessinées son propre fichier, pour la lire et la revoir à part. Pour prouver que ce déménagement ne changeait rien, nous avons comparé les images rendues avant et après, pixel par pixel. Et nous avons construit un outil de revue qui rend en quelques minutes des bandes d'images et de courts extraits de chaque scène et de chaque mouvement : chaque décision suivante pouvait se prendre en regardant, pas en devinant.
Des coupes nettes, un texte lisible, des listes qui se construisent
La deuxième mise à jour a reconstruit ce que vous voyez, sur ce système.
- Les scènes s'enchaînent désormais en coupes nettes par défaut. Les quinze transitions ont été redessinées sur les courbes communes et ne couvrent jamais plus qu'une mince bande de l'image, et l'entrée d'une scène commence une fois sa transition terminée.
- Les 37 mouvements de bloc sont désormais entièrement visibles : ils déplacent le contenu lui-même, sans couture sur l'arrière-plan.
- Les 42 mouvements de texte partagent une même recette. Les effets les plus chargés se dévoilent désormais calmement et restent lisibles, et chaque nom existant fonctionne toujours : aucun storyboard n'a dû changer.
- Listes, frises, grilles et tableaux de prix se construisent avec leur contenu, avec des décalages minutés et un surlignage qui parcourt les éléments, et les cartes de prix se lisent confortablement en 9:16.
Les citations ont gagné un guillemet dessiné, les scènes de conversation un indicateur de saisie, et les cartons d'ouverture et de fin un vrai bouton d'appel à l'action.
Des chiffres posés, et des designs que l'IA sait écrire
La troisième mise à jour a reconstruit chiffres et données : statistiques, grands nombres, compteurs, graphiques, jauges et tableaux partagent désormais un même kit. Un compteur suit une seule courbe et s'installe dans une largeur réservée dès le départ : la mise en page reste immobile pendant que les chiffres grandissent, et les nombres entiers restent entiers. Des effets plus légers rendent ces scènes environ 10 % plus rapides à calculer.
Elle a aussi ouvert une nouvelle porte, en option : quand une scène a besoin d'un visuel qu'aucune scène intégrée ne propose, l'IA peut en écrire un dans un petit langage du mouvement. Chaque design est vérifié : rien ne doit sortir du cadre, se chevaucher, manquer de lisibilité, de contraste ou de rythme. Si un design ne passe pas, la scène utilise à la place une scène intégrée éprouvée : une idée ambitieuse ne peut jamais vous coûter un film. Le soir même, ces designs partaient de l'une de sept mises en page éprouvées, comme un grand nombre, une suite d'étapes ou une comparaison, et en remplissaient les emplacements.
Des sous-titres plus nets et les bonnes polices
Regarder d'aussi près a aussi rendu évidentes deux finitions. Les sous-titres vivent désormais sur leur propre calque, au-dessus de chaque transition : un fondu entre deux scènes montre un sous-titre net, jamais deux sous-titres flous à la fois.
Les polices se chargent désormais avant la première image. Un film sans police de marque utilise Inter, comme prévu, et les citations prennent la police du film ou une police à empattements correctement chargée. Le texte a désormais exactement l'allure voulue.
Ce qui change dans votre prochain film
Votre prochain film devrait paraître plus calme et plus réfléchi : des coupes plutôt que des balayages, un contenu qui arrive dans un ordre pensé, des chiffres qui se posent proprement, un texte lisible de la première à la dernière image. Rien ne doit changer dans vos storyboards pour en profiter.
Vous pouvez parcourir les mouvements reconstruits sur /animations, et lancer un film sur /new.
Voyez-le sur votre propre site
Collez une page et obtenez la vidéo commentée dont parle ce blog. La première est offerte.
À lire ensuite


