Motion.dev Animations Skill MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

S'active automatiquement aux invites d'animation/Motion.dev
Modèles d'animation d'entrée, de défilement, de geste, de micro et de mise en page
Honors préfère le mouvement réduit par défaut
Cible 60 ips+, bundle <50 Ko, zéro changement de mise en page
Transformations accélérées par GPU ; pas de blabla provenant des accessoires de mise en page

Démo en direct

Aperçu en pratique

motion-dev-animations-skill.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "motion-dev-animations-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ],
      "_inferred": false
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "motion-dev-animations-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
        "~/.claude/skills/motion-dev-animations"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "motion-dev-animations-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/199-biotechnologies/motion-dev-animations-skill.git",
          "~/.claude/skills/motion-dev-animations"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add motion-dev-animations-skill -- git clone https://github.com/199-biotechnologies/motion-dev-animations-skill.git ~/.claude/skills/motion-dev-animations

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Motion.dev Animations Skill

Ajoutez une entrée en fondu de héros avec décalage

👤 Les développeurs frontend ajustent les pages de destination ⏱ ~15 min beginner

Quand l'utiliser : Votre héros semble statique et vous souhaitez une animation de chargement soignée.

Prérequis

Réagir + Motion.dev — npm je bouge
Compétence installée — git clone dans ~/.claude/skills/

Déroulement

Décrire l'effet

Ajoutez une entrée en fondu échelonné au H1, au sous-titre et au CTA du héros. Décalage de 60 ms.✓ Copié

→ Code Motion.dev avec motion.div, ressort de transition, retard via décalage
Repli à mouvement réduit

Assurez-vous que les préférences de mouvement réduit sautent proprement l'animation.✓ Copié

→ hook useReducedMotion ou requête multimédia CSS appliquée

Résultat : Un héros qui se sent vivant sans sacrifier l'accessibilité.

Pièges

Animation des propriétés qui déclenchent la mise en page (largeur, haut) — Utilisez plutôt la transformation (traduction/mise à l’échelle) – accélérée par GPU, pas de CLS

Combiner avec : magic-ui-mcp

Créez des révélations et une parallaxe déclenchées par le défilement

👤 Développeurs frontend avant-gardistes ⏱ ~25 min intermediate

Quand l'utiliser : Votre page de destination longue a besoin de sections qui se déploient lors du défilement.

Déroulement

Révéler au parchemin

Animez chaque section lorsqu'elle entre dans la fenêtre (une fois, seuil de 30 %).✓ Copié

→ useInView avec une fois + montant
Premier plan parallaxe

Ajoutez un subtil décalage de parallaxe pour le SVG décoratif de premier plan.✓ Copié

→ useScroll + useTransform mappant scrollYProgress vers y

Résultat : Expérience de défilement qui ajoute de la profondeur sans distraction.

Pièges

Parallaxe qui provoque le mal des transports — Gardez les décalages petits et ignorez entièrement sous préférences-mouvement réduit

Construisez une carte magnétique déplaçable avec un survol

👤 Concepteurs d'interactions / développeurs frontend ⏱ ~20 min intermediate

Quand l'utiliser : La fiche produit nécessite un polissage par micro-interaction.

Déroulement

Ascenseur en vol stationnaire

En survol : soulevez 4 px, échelle d'ombre subtile ; retour en congé.✓ Copié

→ whileSurvolez avec le printemps ; Transformations compatibles GPU
Traînée magnétique

Rendez-le déplaçable avec des limites élastiques, dragElastic 0.15.✓ Copié

→ glisser + dragConstraints + dragElastic correctement défini

Résultat : Une interaction de carte délicieuse sans le coût des performances.

Animer la réorganisation de la liste avec la mise en page

👤 Les développeurs frontend créent des tableaux de tâches / galeries ⏱ ~25 min intermediate

Quand l'utiliser : Les réorganisations de votre liste semblent choquantes ; vous voulez des transitions en douceur.

Déroulement

Activer la mise en page sur les éléments

Ajoutez des animations de mise en page aux éléments de la liste ; animer également l'entrée/sortie.✓ Copié

→ <mise en page motion.li> + AnimatePresence
Mouvement réduit

Désactivez les animations de mise en page sous préférences-mouvement réduit.✓ Copié

→ Conditionnel appliqué ; réapprovisionnement instantané pour les utilisateurs qui l'ont demandé

Résultat : Des réorganisations qui semblent physiques mais qui respectent les préférences des utilisateurs.

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

motion-dev-animations-skill + magic-ui-mcp

Magic UI pour les composants prédéfinis, motion.dev pour les bits personnalisés

Utilisez le chapiteau de Magic UI pour les logos ; motion.dev pour une parallaxe de défilement personnalisée ci-dessous.✓ Copié

motion-dev-animations-skill + claude-design-auditor-skill

Auditer le mouvement pour un support à mouvement réduit

Après avoir ajouté des animations, effectuez un audit avec scope=motion pour détecter les régressions à mouvement réduit.✓ Copié

motion-dev-animations-skill + claude-code-design-skills

Figma-to-code + animations en un seul flux

Convertissez le cadre Figma ; puis ajoutez les animations de survol et d'entrée spécifiées.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
motion-dev (SKILL)	describe the animation (element + intent + constraints)	Chaque fois que vous voulez du code d'animation, en particulier. avec des contraintes d'accessibilité et de performances	0

Coût et limites

Coût d'exécution

Quota d'API: Aucune
Tokens par appel: Petit pour le code ; grand seulement si vous videz des composants complexes
Monétaire: Gratuite
Astuce: Décrivez précisément l'intention de l'animation : "fondu avec un décalage de 60 ms, durée de 200 ms" et "rendez-le agréable".

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucune

Sortie de données : Aucun de la compétence ; réseau non impliqué

Le code d'animation généré est aussi sûr que votre évaluation : vérifiez les choix de mouvement réduit et d'accessoires de mise en page avant l'expédition.

Dépannage

Erreurs courantes et correctifs

Jank sur le parchemin

Vérifiez que vous animez des transformations, pas des accessoires de mise en page (largeur/haut). Utilisez Will-Change avec parcimonie.

Vérifier : Chrome DevTools → Performance → layout shift count

Animation ignorée en cas de mouvement réduit

Enveloppez avec useReducedMotion et court-circuitez les variantes d'animation.

Vérifier : System → Motion preferences → reduce motion; reload

Gros paquet après avoir ajouté du mouvement

Importez uniquement ce dont vous avez besoin depuis « motion/react » ; évitez de tout réexporter.

Vérifier : Bundle analyzer on the chunks

Alternatives

Motion.dev Animations Skill vs autres

Alternative	Quand l'utiliser	Compromis
magic-ui-mcp	Vous voulez des composants animés prédéfinis, pas un mouvement personnalisé	Moins personnalisé, plus rapide à adopter
cc-frontend-skill	Vous voulez des conseils généraux sur l'interface, pas spécifiquement Motion.dev	Pas axé sur l'animation
excalidraw-skill	Vous voulez des diagrammes, pas des animations Web	Problème différent

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills