Le site que vous lisez a été construit avec Claude Code. L'écran de chargement animé, l'apparition des sections au défilement, et même les images de couverture de ces articles : tout a été produit par du code, écrit avec l'IA. Pas de logiciel d'animation, pas de banque d'images. C'est ce qu'on appelle faire du motion design par le code, et c'est devenu accessible.
Claude Code et Opus 5.5 en deux phrases
Claude Code est l'outil d'Anthropic qui lit votre projet, modifie les fichiers, lance des commandes et s'intègre à vos outils de développement. Il fonctionne dans le terminal, dans VS Code et JetBrains, dans une application de bureau et sur le web. Opus 5.5, publié le 22 septembre 2026, est le modèle par défaut de la plupart des comptes : Anthropic le décrit comme le premier modèle de la famille Claude 5.5.
Trois façons de faire du motion design avec Claude Code
1. Les animations web. Vous décrivez l'animation (« les cartes apparaissent l'une après l'autre en glissant de 20 pixels, sur 0,6 seconde, avec un léger rebond ») et Claude écrit le code en CSS, en JavaScript ou avec une bibliothèque comme GSAP. C'est ce qui anime ce site.
2. Les visuels générés. Une image peut être dessinée par un programme : formes, dégradés, lumières, grilles. Les couvertures de ce blog sont dessinées ainsi, avec la même palette à chaque fois. Changer un détail sur toutes les images ne prend qu'une commande.
3. Les vidéos. Remotion est un outil qui fabrique de vraies vidéos MP4 à partir de code React. Remotion publie ses propres compétences (skills) pour les agents IA comme Claude Code : on les installe avec npx skills add remotion-dev/skills, puis on demande une vidéo en langage courant.
Tester une animation en direct : les artefacts
Claude Code peut publier une page web sur claude.ai, appelée artefact, pour voir le résultat tout de suite. La documentation officielle donne précisément cet exemple : demander une page avec des curseurs pour régler la courbe d'accélération, la durée et le délai d'une animation, et voir l'animation changer en direct. Parfait pour trouver le bon mouvement avant de l'intégrer au site.
Ma méthode, étape par étape
Décrivez le mouvement avec des mots précis : durée, direction, distance, ordre d'apparition. « Élégant » ne veut rien dire pour un programme ; « 600 millisecondes, de bas en haut, 20 pixels » oui.
Donnez votre charte : couleurs, typographies, style. Sur ce site, un fichier CLAUDE.md rappelle à chaque session la palette cognac, or et cyan.
Demandez une première version, regardez-la, puis corrigez par petites touches : « plus lent », « moins de rebond », « décale le titre de 100 ms ».
Pensez au téléphone et aux personnes sensibles au mouvement : demandez à respecter le réglage « réduire les animations » du système.
Ce que l'IA fait bien, et ce qui reste votre travail
Claude écrit vite un code d'animation propre et cohérent, décline une idée sur cinquante images, et corrige les détails techniques que l'œil ne voit pas. Le goût, en revanche, reste le vôtre : le rythme, la retenue, savoir quand une animation distrait au lieu d'aider. Une bonne animation se remarque à peine.
Et pour la vidéo générée par IA ?
Le motion design par le code convient aux formes, aux textes, aux graphiques et aux interfaces. Pour des plans réalistes (un produit dans un décor, un personnage), les modèles vidéo comme ceux de Higgsfield sont plus adaptés. J'explique comment les choisir dans mon guide des modèles d'IA de Higgsfield.
Questions fréquentes
Faut-il savoir coder ?
Pas pour obtenir un premier résultat : Claude Code écrit le code. Savoir lire un peu de HTML et de CSS aide beaucoup à affiner.
Claude Code est-il gratuit ?
Il s'utilise avec un abonnement Claude (Pro, Max, Ultra, Team ou Enterprise) ou avec un compte de la console Anthropic, payé à l'usage. Vérifiez les formules sur le site d'Anthropic.
Peut-on faire une vidéo publicitaire entière ainsi ?
Oui pour une vidéo de type présentation animée (textes, chiffres, logos, captures d'écran). Avant un usage commercial avec Remotion, lisez sa licence.
Pour démarrer avec l'outil lui-même, lisez mon guide Claude Code dans VS Code. Informations tirées de la documentation officielle de Claude Code et de Remotion, consultée le 3 novembre 2026.
