motion-tokens

motion-tokens

Catalogue généré le 2026-05-11

En une phrase

GénérerGénère desun motionjeu de tokens d'animation (durées, easings, distances) versionnables en JSON + CSSvariables variables)CSS, avec mapping prêt pour Motion (React) et mappings pour Motion/GSAP afin d’unifier tout le projet.GSAP.

Quand l'utiliser

• VoirAu ladémarrage descriptiond'un ci-dessusprojet etquand laon sectionveut «une grammaire d'animation cohérente

Quand les animations existantes sont incohérentes (chaque dev choisit ses durées au pif) Pour allerunifier plusun loindesign ».system qui couvre déjà couleurs/typo mais pas le mouvement Avant d'attaquer un site marketing avec plusieurs sections animées Pour préparer le terrain avant motion-system ou motion-framer-patterns

Comment l'invoquer

• Slash command : /motion-tokens (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— dès qu'un design system ou theming motion est nécessaire

PourDescription aller plus loin

Motion Tokens Generator

Objectifdétaillée

FournirCe skill produit un fichier tokens.motion.json avec 5 à 7 durées de base (par exemple fast: 120ms, base: 200ms, slow: 320ms), 3 à 5 courbes d'easing nommées (standard, accelerate, decelerate) et un set de distances pour les translations.

Il génère ensuite trois sorties exploitables tout de suite : le JSON pour versionner dans Git, des variables CSS (--motion-duration-base, --motion-ease-standard) à poser dans :root, et un mapping côté JS pour Motion ou GSAP afin que tu puisses écrire transition={{ duration: motion.duration.base, ease: motion.ease.standard }} au lieu de coder des nombres en dur.

Il finit par poser des règles d'usage : quelle durée pour un hover, laquelle pour une ouverture de modal, quel easing pour quel type de mouvement. Pour Thymon : c'est la fondation à poser avant d'animer sérieusement quoi que ce soit. Une fois ces tokens en place, tu peux changer le ressenti motion versionnablesde +tout mappingle libs.site en modifiant un seul fichier.

Procédure

Durations (5–7) + easings (3–5) + distances Générer JSON + CSS vars + mapping Donner conventions d’usage

Outputs attendus

tokens.motion.json CSS vars mapping Motion/GSAP règles d’usage

Source

• Plugin : perso (standalone)
• Nom interne : motion-tokens
• Fichier : /home/thymon/.claude/skills/motion-tokens/SKILL.md