Animation Claude : comment créer des animations avec Claude et les envoyer à votre application
Comment créer une animation avec Claude : Claude Design, Claude Motion, artefacts et Claude Code, ce que chacun génère et comment intégrer une animation créée par Claude dans une véritable application.
À retenir
Vous pouvez créer des animations avec Claude de trois manières : Claude Design ou Claude Motion pour la sortie visuelle, les artefacts Claude pour les démos HTML, CSS et JavaScript, et Claude Code pour écrire du code d'animation ou piloter d'autres outils sur MCP. Chacun vous donne un design, un fichier vidéo ou un code qui doit encore être placé dans votre produit. Une animation qui doit s'exécuter dans une application réelle nécessite un format que l'application peut exécuter, de sorte que la plupart des mouvements créés par Claude sont transmis à un environnement d'exécution avant d'être expédiés.
À propos de ce guide
ExodeUI n'est pas affilié à Anthropic. Claude est une marque commerciale d'Anthropic. Ce guide décrit ce que Claude peut produire pour le mouvement, sur la base de la propre documentation d'Anthropic, et ce qu'il faut pour intégrer ce mouvement dans une application livrée.
Façons de créer des animations avec Claude
Claude peut produire des mouvements sous différentes formes et ils ne sont pas interchangeables. Celui que vous utilisez décide de ce que vous obtenez et de la quantité de travail qu'il vous reste.
- Claude Design : discutez avec Claude pour obtenir des conceptions et des prototypes interactifs sur une toile. Il est inclus dans les forfaits Free, Pro, Max, Team et Enterprise, et le site autonome claude.ai/design ferme le 14 décembre 2026.
- Claude Motion : transforme votre invite et vos fichiers en une courte animation, construite sous forme de code qui se lit comme une vidéo et s'exporte au format MP4. Il est en version bêta sur les forfaits Team et Enterprise, et il n'utilise pas de modèle vidéo, il ne peut donc pas créer de séquences ou de personnes réalistes.
- Artefacts Claude : HTML, CSS et JavaScript exécutables qui prévisualisent l'intérieur d'une conversation, ce qui est rapide pour une démonstration de mouvement.
- Claude Code : écrit le code d'animation dans votre dépôt ou édite des outils sur MCP, y compris le serveur ExodeUI MCP.
Des conseils qui produisent un meilleur mouvement
Des invites vagues génèrent un mouvement vague. Claude répond aux détails qu'un motion designer demanderait de toute façon : la propriété, le montant, le timing, le déclencheur et les états. Nommez-les au lieu de décrire un sentiment.
Nommez l’assouplissement et la durée
Dites « ressort avec un léger rebond » ou « relâchement sur 200 ms » au lieu de « doux ». Une valeur que le modèle peut utiliser bat un adjectif.
Nommer le déclencheur
Dites ce qui le démarre : "au toucher", "au survol" ou "lorsque le chargement de la liste est terminé". Un mouvement qui a un déclencheur peut être connecté ultérieurement à un événement réel.
Nommer les états
Listez-les, par exemple "inactif, pressé, chargement, succès, erreur", afin d'obtenir une petite machine à états au lieu d'une seule animation.
Nommer la plateforme et les limites
Dites si la sortie est React, SwiftUI ou une démo Web, et ce qu'elle ne doit pas faire, par exemple "animer uniquement la transformation et l'opacité".
Pourquoi une animation de démonstration n'est pas prête pour la production
Claude peut produire du code d'animation qui apparaît correctement dans l'aperçu et qui nécessite encore du travail avant d'être expédié. L’écart n’est pas la qualité, c’est la forme du résultat.
- Il s'agit généralement d'un code unique pour un écran et non d'un composant réutilisable.
- Il a souvent un seul état et aucune logique de chargement, d'erreur, d'interactions désactivées ou interrompues.
- Il est écrit pour une seule plateforme, donc une version React ne fonctionnera pas sur iOS sans être réécrite
- Le timing et la facilitation sont intégrés au code, de sorte qu'un concepteur ne peut pas les modifier sans un développeur
- Tout ce qui est destiné à être réutilisé nécessite un format de fichier que l'application peut exécuter, et non un extrait de code collé dans un composant.
Expédition d'animations créées par Claude avec le serveur MCP de ExodeUI
ExodeUI est un navigateur et un outil de bureau pour l'interface utilisateur et l'animation interactives. Une animation réside dans un fichier .exode ouvert qui contient la mise en page, la chronologie, les machines à états, la physique et la logique du ressort. Les packages d'exécution lisent ce fichier dans React, Vue, Svelte, Angular, Solid, React Native, SwiftUI et Flutter, de sorte que la même animation s'exécute dans l'application au lieu d'être reconstruite pour chaque plate-forme. ExodeUI expose un serveur MCP avec plus de 100 outils (construire, animer, ajouter de la logique et de la physique, synchroniser avec l'éditeur en direct, exporter), de sorte que Claude Code, Cursor, OpenCode et d'autres clients MCP peuvent créer et modifier le fichier à partir d'invites en langage clair. La configuration réside dans le produit, pas dans un script, il n'y a donc aucune commande à copier : activez MCP dans les paramètres ExodeUI, puis connectez votre client de la même manière que vous connectez n'importe quel serveur MCP. Nous fabriquons ExodeUI, alors vérifiez également les alternatives.
1. Activez MCP dans ExodeUI
Dans les paramètres ExodeUI, activez le serveur MCP. Il publie les outils qu'un client de codage AI utilise pour créer et modifier le fichier.
2. Connectez votre client
Pointez Claude Code, Cursor, OpenCode ou n'importe quel client MCP sur le serveur ExodeUI, de la même manière que vous le connectez à d'autres serveurs MCP.
3. Décrivez le mouvement
Demandez l'animation en langage simple. L'agent modifie le fichier .exode et la modification apparaît dans l'éditeur ExodeUI.
4. Expédiez le même fichier
Rendu le fichier .exode via le runtime ExodeUI dans React, SwiftUI, Flutter et plus, et pilotez ses entrées et ses états à partir de votre code.
Claude Design contre Claude Code + ExodeUI
Les deux itinéraires commencent par une invite et se terminent par un mouvement dans votre produit. Ils diffèrent par ce qui se passe entre les deux : Claude Design conserve le travail dans un canevas de conception, tandis que Claude Code plus ExodeUI le conserve dans un fichier qui s'exécute.
Ce que vous obtenez
Claude Design : une conception ou un prototype cliquable, plus un ensemble de transfert pour Claude Code. Claude Code + ExodeUI : un fichier .exode qui joue en tant que composant.
Où se déroule l'animation
Claude Design : dans le canevas de conception et dans les prototypes partagés. Claude Code + ExodeUI : dans l'application, sur le web, iOS et Android, réagissant aux saisies et aux données.
Modification après le transfert
Claude Design : modifiez le design, puis remettez-le à nouveau. Claude Code + ExodeUI : un concepteur modifie le même fichier que celui exécuté par l'application, sans reconstruction.
Où Claude Design gagne
Explorer de nombreuses directions visuelles, présenter aux parties prenantes et produire un travail statique ou un prototype sur n'importe quel plan, y compris le plan gratuit.
Où ExodeUI gagne
Mouvement qui doit être livré, avec les états, la physique et les entrées, réutilisés sur toutes les plates-formes à partir d'un seul fichier.
Extrait d’implémentation en production
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Principes clés à retenir
- Claude Design et Claude Motion produisent un travail visuel et Claude Code produit du code, mais aucun d'entre eux n'est un moteur d'exécution
- Une animation n'est livrée qu'une fois qu'elle a un format que l'application peut exécuter et qu'elle est connectée aux états et entrées réels.
- Nommez l'assouplissement, le déclencheur et les états dans votre invite pour obtenir un mouvement que vous pouvez réellement utiliser
- Le serveur MCP de ExodeUI permet à Claude Code de créer et de modifier un fichier .exode qui s'exécute dans React, SwiftUI, Flutter et plus