sukirman1901/motion

Que fait motion ?

Aperçu

Motion clarifie la hiérarchie et le feedback — elle ne décore pas. Choisissez des familles/modèles par nom, puis faites à la main (CSS / Motion / GSAP). Ne pas recourir à des installations de registres tiers par défaut.

Catalogue complet : references/motion-families.md (12 familles · 144 modèles).

Quand l'utiliser

• Micro-interactions (survol, focus, appui)
• Transitions d'entrée/sortie ou de mise en page (échanges de sections, tiroirs, modales)
• Défilement lié, texte, carrousel, hero ou autres modèles nommés
• Par défaut (léger) : shell d'application / tableau de bord / /ui multi-section — fondu de section + glissement de tiroir + défilement fluide (sauf si l'utilisateur l'interdit)

Quand l'éviter

• Réglages statiques de jetons/couleurs uniquement
• L'utilisateur a demandé zéro animation / « tanpa animasi »
• Inspection / explication d'une motion existante → motion-inspection

Les utilisateurs à mouvement réduit ont toujours besoin de changements d'état et de solutions de repli instantanées/d'opacité utilisables ; ignorez les effets spatiaux/décoratifs, pas le contrat d'interaction.

Voies

Voie	Utilisation	Valeurs par défaut
Produit / shell	Chrome d'application, paramètres, tableaux de bord	fade-up / page-crossfade, drawer-slide, press-scale, lift-hover
Marketing / expressif	Page d'atterrissage, campagnes	Choisir 1–2 familles + 1–2 modèles du catalogue — budget 2–3 mouvements / viewport

Utilisation des familles (rapide)

Famille	Pour	Pas pour
Micro Interaction	Bascule, toast, like, progression	Hero / histoire de défilement
Survol et Interaction	Levée, appui, magnétique, inclinaison	Entrée de page
Basé sur le défilement	Collant, horizontal, zoom de défilement	Micro uniquement sur bouton
Révélation et Effacement	Fondu d'entrée, séparation, masque, tiroir	Boucles infinies comme seul mouvement
Texte en mouvement	Révélation de mot, machine à écrire, défilement de type marquee	Formulaires / paramètres denses
Carrousel et Flux continu	Marquee, filmstrip, accrochage	Pages à focus unique sur CTA
Mouvement de grille	Bento, grille de retournement, réorganisation	Chrome à un bouton
Projecteur et Focus	Mise en scène centrale, assombrissement des frères	Bruit sur toute la page
Pile et Dispersion	Jeu de cartes, éventail, jeu de balayage	Tableaux d'administration
Mouvement de section Hero	Parallaxe / flotteur d'appareil / aurore	Shell d'application (max 1 signature)
Morphose et Transformation	Élément partagé, morphose de FAB	Chaque navigation
3D et Perspective	Orbite, coverflow	Interface produit par défaut

Flux de travail

1. Voie — shell produit vs marketing
2. Famille — correspond à l'utilisation (max 2 familles)
3. Modèles — nommez 1–2 depuis motion-families.md ; lisez la définition + l'indice de réalisation artisanale
4. Contrat + implémentation — enregistrez le déclencheur/identité d'état, les propriétés, l'interruption, les alternatives d'entrée et le point de terminaison à mouvement réduit (motion.md). Préférez transform/opacity ; utilisez une taille/mise en page mesurée limitée lorsque la divulgation ou la morphose l'exige.
5. Budget — ≤2–3 mouvements intentionnels par viewport
6. Accessibilité — prefers-reduced-motion: reduce (solutions de repli d'opacité/instantané) ; jamais de sens par le seul mouvement
7. Rapport — Conventions : Motion: shell léger | familles : Survol+Révélation | modèles : lift-hover, fade-up ; distinguez les vérifications de source/état de la lecture réelle de la cible et des mesures de performance.

Valeurs par défaut du shell (produit)

• Entrée de section : fade-up ~250–300ms
• Tiroir mobile : drawer-slide + fondu d'arrière-plan
• Contrôles : press-scale (0.96)
• scroll-behavior: smooth (désactivé en mouvement réduit)

Le défilement fluide n'est pas une permission de faire défiler automatiquement les données entrantes. Les recettes d'état produit dans references/motion.md régissent les mises à jour des graphiques, la divulgation et le suivi de flux ; un lecteur qui fait défiler vers le haut garde le contrôle.

Règles strictes

• Faites à la main à partir des noms de modèles — l'installation depuis un registre n'est pas la valeur par défaut du pack
• N'empilez pas Hero + 3D + Texte + Projecteur + Carrousel dans un seul viewport
• Marketing : max un modèle de signature Hero

Liste de contrôle

• Voie choisie (produit vs marketing)
• Utilisation de la famille correspond à la demande (≤2 familles)
• Modèles nommés listés (≤2–3 mouvements dans le viewport)
• Réalisé à la main à partir de la définition (pas de registre comme réponse)
• prefers-reduced-motion géré
• Inversion rapide, mouvement imbriqué, focus/clavier et annulation par geste vérifiés le cas échéant ; les données/états finaux restent véridiques
• Pas de thrashing de mise en page / spam décoratif
• Ligne de conventions Motion remplie

Profondeur

• Vocabulaire : references/motion-families.md
• Recettes : references/motion.md
• Chevauchement micro-craft : polish
• Shell de démo : bac à sable local test/ (optionnel ; non expédié)