Claude peut écrire en quelques minutes le code d'une vidéo animée. Faire tourner ce code sur un site en production, sur tous les navigateurs et appareils, est la partie la plus difficile. Avec Claude + GSAP, vous obtenez des animations à partir d'un prompt, appuyées sur un code robuste que vous pouvez déployer en toute confiance.
Le lundi 28 septembre, GSAP a dépassé pour la première fois 1 million de téléchargements quotidiens sur npm. Ce fut un moment passionnant pour l'équipe GSAP, et il est tombé au début d'une semaine inhabituelle. Les téléchargements hebdomadaires progressent normalement de quelques pour cent. La semaine du 27 septembre a enregistré un peu plus de 7 millions de téléchargements, soit près de 50 % de plus que fin août.
Il n'a pas fallu longtemps pour comprendre ce qui se passait : internet vivait un petit moment d'animation. Anthropic venait de publier Claude Opus 5.5, qui est plutôt doué en motion. Nous avons été identifiés dans des centaines de publications, les démos web habituelles, mais aussi une énorme quantité de vidéos. C'était nouveau. Comment les gens obtenaient-ils des vidéos à partir d'un chatbot ?
Eh bien, Claude ne peut pas réellement créer de vidéo. Il fait ce qu'il fait de mieux : il écrit du code. Il construit la scène avec des technologies web comme HTML, SVG et canvas, avec Three.js pour tout ce qui est en 3D, et écrit le code pour animer le tout. Un navigateur headless parcourt ensuite l'animation image par image, et ffmpeg assemble ces images en MP4. La vidéo produite est donc en réalité une page web sous le capot.
Créer des vidéos vs construire pour le web
Si vous fouillez dans le code, vous remarquerez peut-être que, pour la sortie vidéo, Claude n'utilise pas toujours de bibliothèque d'animation, sauf si on lui demande un outil précis. Il crée souvent son propre moteur. Pour une vidéo, c'est généralement correct. Elle tourne une fois, dans un navigateur, à une taille, puis elle est figée en pixels. Si le rendu est bon, c'est gagné. Mais le web n'est pas aussi simple. Les sites doivent fonctionner sur toutes sortes d'appareils, de navigateurs et de vitesses de connexion, et ils doivent continuer à fonctionner, malgré les mises à jour de navigateurs et les modifications du code.
Claude peut écrire du code d'animation en quelques secondes, mais quelqu'un doit encore s'occuper de ce code une fois en ligne. C'est ce qu'une bibliothèque d'animation vous retire des épaules. Quand un navigateur livre un nouveau bug, c'est à l'équipe de la bibliothèque de le corriger, pas à vous, et la prochaine personne (ou le prochain agent) qui ouvre votre projet n'a pas à décoder un moteur maison : il y trouvera de la documentation, des exemples et une communauté sur laquelle s'appuyer.
Créer vos propres vidéos animées
Le prompt qui a lancé cette tendance était simplement
J'ai donné à Opus les assets de la marque GSAP et un fichier de charte de marque, puis je lui ai demandé
C'est incontestablement un bond de capacités impressionnant. Je comprends pourquoi les réseaux sociaux ont été inondés de gens postant leurs expériences.
Si vous voulez un peu plus de contrôle sur le résultat, une autre voie est HyperFrames. C'est le framework open source de HeyGen pour transformer du HTML en vidéo. Il offre un pipeline testé qui rend de la même manière à chaque fois, ainsi qu'un aperçu en direct, une CLI et des extras comme les sous-titres, la voix off et des blocs prêts à l'emploi. Il propose aussi des skills pour Claude Code qui lui enseignent les conventions dès le départ, afin que Claude concentre son énergie (et ses tokens) sur le travail créatif plutôt que sur la plomberie.
Boostez vos compétences GSAP
Si vous animez avec GSAP, vos compétences se transposent directement au web, en particulier ces skills. Nous les avons écrits pour enseigner à Claude (et à bien d'autres agents) ce qui rend une animation web fiable dans la vraie vie. Cela passe par l'utilisation de gsap.matchMedia() pour que les animations s'adaptent aux différentes tailles d'écran et respectent les personnes qui ont activé la réduction des animations. Cela passe par l'animation des transformations plutôt que des propriétés de mise en page pour rester fluide, et par un nettoyage correct de vos animations dans les frameworks JS. C'est le genre de détails fastidieux qu'on apprend d'ordinaire à ses dépens. Tous les plugins GSAP sont désormais gratuits, grâce à Webflow, alors profitez-en pour essayer Physics2D ou MorphSVG.
Si tout bouge, plus rien ne se démarque
Une semaine après ce lundi du million de téléchargements, mes fils d'actualité ont un tout autre aspect. Une publication sur deux est un reel d'animation léché, et je me suis mise à les faire défiler presque sans les regarder. C'est une drôle de sensation quand on passe le plus clair de son temps à penser à l'animation.
Maintenant que n'importe qui peut produire ce niveau de finition en quelques minutes, c'est le bon moment de faire une pause et de se rappeler à quoi sert l'animation. Une bonne animation remplit une fonction. Elle guide le regard, explique comment deux idées sont liées, montre que quelque chose a changé ou rend une interface plus intuitive.
La bonne nouvelle, c'est que le goût en matière de motion se cultive, et que des gens brillants partagent leur expertise. Voici quelques-unes de mes ressources préférées :
- Les skills d'animation d'Emil Kowalski. La philosophie de design engineering d'Emil, packagée pour votre agent. Une excellente façon d'apprendre pourquoi certaines animations sonnent juste et d'autres non.
- Les principes de motion de Material Design. Une analyse réfléchie de la façon dont le mouvement peut communiquer structure et sens dans une interface.
- Osmo. Une bibliothèque d'animations web superbes et prêtes pour la production, pour apprendre et construire, en code personnalisé ou dans Webflow
- Made With GSAP. De superbes effets accompagnés de pas-à-pas structurés. Parfait pour l'inspiration et pour les curieux du code.
