/ Annuaire / Playground / Motion.dev Animations Skill
← Tous les serveurs ↗ GitHub
● Communauté 199-biotechnologies ⚡ Instantané

Motion.dev Animations Skill

par 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

Décrivez le mouvement souhaité ; obtenez du code Motion.dev qui s'exécute à plus de 60 ips avec la physique du ressort, la prise en charge des mouvements réduits et aucun changement de disposition.

motion-dev-animations-skill est une compétence Claude Code qui écrit des animations de qualité production avec Motion.dev (anciennement Framer Motion). Il s'active automatiquement lors des mentions d'animation, d'effets de défilement, de Motion.dev, de physique des ressorts, etc., et émet du code ciblant 60 ips+, un impact de bundle <50 Ko, une accessibilité totale (préfère un mouvement réduit) et zéro CLS. Couvre les animations d'entrée, les effets de défilement, les interactions gestuelles, les micro-interactions et les animations de mise en page.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

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

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

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.

Déroulement
  1. 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
  2. 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
  1. 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
  2. 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
  1. Ascenseur en vol stationnaire
    En survol : soulevez 4 px, échelle d'ombre subtile ; retour en congé.✓ Copié
    → whileSurvolez avec le printemps ; Transformations compatibles GPU
  2. 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
  1. 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
  2. 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

OutilEntréesQuand appelerCoû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é

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

AlternativeQuand l'utiliserCompromis
magic-ui-mcpVous voulez des composants animés prédéfinis, pas un mouvement personnaliséMoins personnalisé, plus rapide à adopter
cc-frontend-skillVous voulez des conseils généraux sur l'interface, pas spécifiquement Motion.devPas axé sur l'animation
excalidraw-skillVous voulez des diagrammes, pas des animations WebProblème différent

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills