Motion Advanced
Motion avancé pour React/Next.js : drag and drop, gestes, animations de texte et SVG, séquences impératives.
- Quoi
- Motion avancé pour React/Next.js : drag and drop, gestes, animations de texte et SVG, séquences impératives.
- Coût
- Gratuit
- Prérequis
- Utilisez « Motion avancé » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor (rédigé par jeff) : patterns d'animation avancés basés sur la physique pour React et Next.js, qui prolongent motion-foundations (à mettre en place d'abord). Couvre les interactions de drag (cartes déplaçables, feuilles à fermer en glissant, listes réordonnables), les hooks de gestes (détection de swipe combinant offset et vélocité, appui long), l'animation de texte (révélation mot à mot, machine à écrire, compteurs en direct), l'animation SVG (tracé de chemins, morphing d'icônes à nombres de commandes égaux, anneaux de progression), les hooks sur mesure (useScrollReveal, suiveur de curseur, direction de navigation), les séquences impératives multi-étapes avec useAnimate insensible aux interruptions, et les composants de chargement (spinners, squelettes shimmer, indicateurs pulsés, états de bouton). Inclut un arbre de décision d'API (quelle API pour quel scénario), huit règles dures (tester le drag sur appareils tactiles pas seulement à la souris, mettre en pause les animations infinies quand l'onglet est caché, seuils de swipe explicites, aucun nombre en dur, nettoyer chaque listener), et un tableau d'anti-patterns avec correctifs. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : pur guide, rien à installer ; exige motion-foundations configuré d'abord et la librairie motion/react dans votre projet. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseOn scanne automatiquement chaque fiche et on signale tout ce qui semble louche, mais on ne peut pas relire chaque ligne du code de la communauté. Voici comment vérifier une création vous-même avant de l'installer.
Utilisez « Motion avancé » avec votre Muse. Prérequis : l'app Muse (mobile ou web). Skill de pur guide, rien à installer. Un projet React ou Next.js avec la librairie motion/react, et motion-foundations configuré d'abord (ce skill importe ses tokens et ressorts). 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/motion-advanced/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Construis [une feuille à fermer en glissant / une carte swipable / un compteur animé] en suivant ces patterns motion : [décrivez l'interaction]. » 3. Demandez à Muse de respecter les huit règles (tests sur tactile, pause en onglet caché, seuils explicites, imports de tokens, nettoyage des listeners) et de vous montrer le code du composant. Astuce : partez de l'arbre de décision du skill pour choisir la bonne API avant d'écrire du code. useSpring pour les valeurs continues suivies au pointeur, useAnimate pour les séquences multi-étapes. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Relisez tout code avant de le committer, ne collez jamais de secrets dans un chat, et relisez tout ce que Muse propose avant qu'il n'agisse.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.