Motion Patterns

Sélectionné par Skill Harbor : des modèles d'animation prêts à copier qui font animer à Muse les interfaces React et Next.js comme un motion designer. Couvre les besoins quotidiens : retour de bouton, listes en stagger, modales, piles de toasts, enveloppes de transition de page pour l'App Router Next.js, révélations au scroll et progression liée au scroll, cartes extensibles, accordéons et fondus d'éléments partagés avec layoutId. Chaque modèle est bâti sur les tokens et ressorts partagés de motion-foundations, avec huit règles dures : toujours envelopper les rendus conditionnels dans AnimatePresence avec une clé, toujours définir exit avec initial et animate, utiliser mode="wait" pour les transitions de page, ne jamais utiliser layout sur de grands sous-arbres, garder le stagger entre 0,05 s et 0,10 s, les modales incluent toujours piège de focus, fermeture Échap, verrou de scroll et rôles dialog, les révélations au scroll utilisent viewport une fois, et jamais de nombres en dur. Inclut une table de décision pour choisir le bon modèle, le contrat AnimatePresence expliqué (enveloppe, clé, prop exit, en manquer un et les sorties échouent silencieusement), et une table d'anti-modèles mappant chaque erreur à sa règle et son correctif. Modèles originaux par jeff, adaptés ici. Par @affaan-m, listé ici avec crédit à son créateur. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : les modèles importent depuis motion-foundations, configurez ces tokens et ressorts d'abord sinon rien ne compile ; drag, gestes, SVG et animations de texte sont explicitement hors périmètre (voir motion-advanced). Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.