vmitsaras/apply-kinetic-continuity-motion

Appliquer le Mouvement de Continuité Cinétique

Objectif

Appliquer un langage de mouvement contraint qui donne une mémoire physique à la mise en page : les éléments restent identifiables, répondent à l'énergie de l'utilisateur et se stabilisent là où la prochaine décision peut être prise.

Traiter les vidéos de référence fournies comme des preuves d'un langage de conception, pas comme des modèles à reproduire. Préserver le concept demandé par l'utilisateur, la technologie, le périmètre et la limite d'autorisation. Appliquer des modifications de fichier uniquement lorsque l'utilisateur demande une implémentation ; pour les demandes de planification ou de révision, fournir des conseils sans modifier les fichiers.

Quand utiliser cette compétence

Utiliser cette compétence lorsque :

• Une démo GSAP ou une interface web a besoin de continuité entre les états spatiaux ou de mise en page.
• La tâche implique un champ d'image, une galerie, un carrousel, une planche-contact, un aperçu ancré, une séquence basée sur un chemin, un groupe routé ou une typographie cinétique retenue.
• Le mouvement existant semble déconnecté, figé sous une saisie rapide, trop décoratif, ou peu clair quant à l'identité des objets.
• L'utilisateur souhaite traduire des références de mouvement fournies en un langage d'interaction original, accessible et implémentable.

Ne pas utiliser cette compétence lorsque :

• Un simple survol, focus, pression ou changement d'opacité peut être géré avec une transition CSS ordinaire.
• La demande est une tâche d'animation non liée sans problème de continuité ou d'état spatial.
• La tâche concerne le film, le montage vidéo ou l'animation de personnages plutôt que le comportement d'interface.
• L'utilisateur a besoin d'un audit d'accessibilité complet plutôt que d'une planification, d'une implémentation ou d'une révision spécifique au mouvement.

Entrées à inspecter

Inspecter le plus petit ensemble pertinent d'entrées disponibles :

• La tâche utilisateur demandée, le déclencheur, le sujet, l'état de départ et l'état cible.
• Les composants, modèles, styles, utilitaires de mouvement, tests, démos et documentation pertinents.
• Les dépendances d'animation existantes, en particulier les plugins GSAP déjà utilisés.
• Les vidéos, prototypes, captures d'écran, storyboards ou notes d'analyse de mouvement fournis par l'utilisateur.
• Le comportement responsive, le comportement au pointeur et au toucher, les chemins clavier, le comportement du focus et les exigences de mouvement réduit.
• Les contraintes de performance telles que les éléments répétés, le poids des images, la mesure de la géométrie et les entrées à haute fréquence.

Ne pas supposer que les médias de référence, les plugins GSAP ou les conventions de projet existent lorsqu'ils ne sont pas présents.

Routage des références

Lire references/pattern-catalog.md lors de la sélection d'une primitive de mouvement, du réglage du timing et de l'assouplissement, de la définition du comportement de mouvement réduit, ou de la révision du caractère naturel.

Le catalogue est autonome. Si une tâche nécessite une provenance par vidéo ou une comparaison avec un clip nommé, inspecter le média de référence ou le document d'analyse de mouvement fourni dans l'espace de travail de cette tâche plutôt que de supposer des détails à partir de cette compétence.

Contrat de mouvement de base

• Préserver l'identité des objets à travers les changements de position, d'échelle et de mise en page.
• Donner à chaque battement de mouvement une direction dominante.
• Faire en sorte que les éléments voisins réagissent comme un seul champ spatial, avec une vitesse liée et un décalage basé sur la distance.
• Répondre à l'entrée directe sur la prochaine image peinte. Appliquer l'assouplissement à la stabilisation, pas au point de saisie.
• Accélérer brièvement et passer plus de temps à décélérer.
• Superposer suffisamment les états sortants et entrants pour éviter une image morte.
• Utiliser l'échelle de manière cohérente pour communiquer la mise au point, la profondeur ou la priorité.
• Résoudre les passages actifs en états de repos stables et lisibles.
• Garder la distorsion expressive brève, locale, réversible et non essentielle.

Préférer la continuité au spectacle. Supprimer le mouvement qui n'explique pas l'état, la hiérarchie, l'orientation ou le retour d'information.

Sélectionner une primitive principale

Choisir la primitive qui explique le mieux le changement d'état. Ne pas en combiner plusieurs simplement pour augmenter la nouveauté visuelle.

• Champ inertiel : une constellation panoramique ou dérivante qui se déplace comme un seul système.
• Rails parallèles : pistes médiatiques répétées avec une variation de vitesse retenue.
• Groupes routés : grappes se déplaçant entre des voies ou catégories visibles.
• Échange d'aperçu ancré : un index stable contrôle une région d'aperçu délimitée.
• Procession incurvée : les cartes dérivent leur position, échelle et empilement d'une seule valeur de progression de chemin.
• Chaîne convergente : une vue d'ensemble se plie et se met à l'échelle en une composition ciblée.
• Résolution de planche-contact : les éléments retenus font le pont entre les mises en page denses et organisées.
• Perturbation de texte délimitée : le texte d'affichage se décale brièvement, puis se reconstruit proprement.

Utiliser les transitions CSS ordinaires lorsque l'interaction n'a besoin que d'un simple survol, focus, pression ou changement d'opacité.

Flux de travail

1. Confirmer si la demande est une planification, une implémentation ou une révision, et préserver cette limite.
2. Identifier le déclencheur, le sujet, l'état de départ, l'état cible et la tâche utilisateur.
3. Rédiger une thèse de mouvement d'une phrase expliquant pourquoi le mouvement existe.
4. Choisir une primitive principale et définir ses compositions de début et de fin stables.
5. Définir l'état de mouvement réduit avant d'ajouter la chorégraphie complète.
6. Établir la hiérarchie micro, méso et macro. Tous les éléments n'ont pas besoin de mouvement à chaque couche.
7. Implémenter ou spécifier la réponse directe, le déplacement coordonné et une stabilisation silencieuse.
8. Faire en sorte que l'entrée rapide recible l'état rendu actuel au lieu de mettre en file d'attente les animations.
9. Vérifier les chemins du pointeur, du toucher, du clavier, du focus, du mouvement réduit, de l'interruption et de l'échec.
10. Examiner à vitesse normale et à vitesse 0.25x ou image par image pour trouver les discontinuités et les erreurs d'empilement.
11. Lorsqu'une implémentation a été demandée, exécuter les tests ou vérifications pertinents du référentiel et signaler les validations manuelles restantes.

Signature temporelle

Utiliser les jetons de référence comme points de départ, puis ajuster modestement en fonction de la distance de déplacement et de la fréquence d'interaction :

• Accusé de réception immédiat : environ 90 ms.
• Survol ou focus : environ 180 ms.
• Changement d'état compact : environ 320 ms.
• Reconfiguration de la mise en page : environ 520 ms.
• Grande scène spatiale : environ 780 ms, normalement plafonnée en dessous de 1000 ms.
• Décalage spatial : 35–60 ms, ordonné par distance de la source de mouvement.

Préférer power3.out pour la stabilisation standard, power4.out pour une entrée éditoriale plus forte, et power2.inOut pour la reconfiguration d'un état connu. Utiliser un mouvement linéaire uniquement lorsque la progression suit le défilement, le glissement ou une autre entrée continue.

Ne pas faire d'assouplissement élastique ou de retour en arrière la signature du système. Si un déclic de relâchement a besoin d'un dépassement, le maintenir en dessous d'environ 3 %.

Invariants d'implémentation

• Utiliser CSS pour les transitions d'état simples et les timelines GSAP pour les séquences coordonnées.
• Utiliser GSAP Flip pour les changements de mise en page réels lorsque la continuité des éléments partagés est précieuse.
• Utiliser Draggable uniquement lorsque le glissement est une interaction réelle et que des contrôles visuels équivalents existent.
• Utiliser ScrollTrigger uniquement pour un véritable récit de défilement ; ne pas introduire de détournement de défilement.
• Dériver les propriétés de mouvement courbe d'une valeur de progression normalisée afin que x, y, l'échelle, l'opacité et l'empilement ne dérivent pas.
• Utiliser overwrite: "auto", quickTo() ou une timeline pilotée par la progression pour un mouvement interruptible.
• Animer transform et opacity en premier.
• Regrouper les lectures DOM, mettre en cache la géométrie et éviter les mesures dans les mises à jour à haute fréquence.
• Appliquer will-change uniquement pendant le mouvement actif et le supprimer après les grandes séquences uniques lorsque cela est pratique.
• Garder le contenu final disponible si JavaScript échoue. Ne pas nécessiter une timeline d'entrée pour révéler le contenu essentiel.

Suivre les conventions existantes du référentiel en matière de HTML, CSS, JavaScript, ressources et documentation de démonstration. Ne pas ajouter ou remplacer une dépendance d'animation sans autorisation de l'utilisateur.

Invariants d'interaction et d'accessibilité

• Faire correspondre le survol avec le focus et le comportement de clic ou de tapotement.
• Garder le style de focus visible et au moins aussi clair que le survol.
• Préserver l'ordre sémantique source lorsque les éléments visuels deviennent spatiaux.
• Garder une source de texte lisible intacte pour la typographie divisée ou perturbée.
• Faire du glissement, du balayage et de la molette des méthodes de saisie facultatives ; fournir des contrôles précédent et suivant ou un autre chemin clavier.
• Annuler l'élan lorsqu'un nouveau geste commence.
• Mettre en pause le mouvement continu pendant une interaction significative et lorsque la page n'est pas visible.
• Pour prefers-reduced-motion: reduce, supprimer l'inertie, l'orbite, la lecture automatique, le déplacement du zoom et la perturbation du texte. Préserver le contenu et la sélection avec des changements instantanés ou une courte transition d'opacité.
• Ne pas revendiquer la conformité en matière d'accessibilité sans tests.

Standard de révision

Signaler le mouvement lorsqu'il :

• téléporte ou remplace des objets qui devraient rester identifiables ;
• utilise un décalage aléatoire sans source spatiale ;
• met en file d'attente des états de survol obsolètes ;
• reste en mouvement constant à côté du contenu de lecture ;
• rend l'échelle décorative plutôt que significative ;
• dépend du glissement, du survol ou de l'animation pour exposer le contenu essentiel ;
• crée un travail de mise en page à chaque image d'animation ;
• transforme un propriétaire sticky au lieu d'une couche de scène interne ;
• est plus long ou plus élaboré que le changement d'état ne le justifie.

Format de sortie

Retourner le résultat approprié au mode :

Planification

• Thèse de mouvement et primitive sélectionnée.
• États de départ, de transition et stabilisés.
• Hiérarchie du mouvement, timing, interruption et comportement de mouvement réduit.
• Notes sur l'accessibilité, la performance, l'implémentation et la validation.

Implémentation

• Résumé du comportement de mouvement appliqué.
• Fichiers modifiés et rôle de chaque modification.
• Primitive sélectionnée, hiérarchie du mouvement, résultat de mouvement réduit, comportement d'accessibilité et stratégie de performance.
• Tests ou vérifications exécutés et toutes les vérifications manuelles restantes.

Révision

Priorité	Problème	Preuve	Recommandation

Signaler également la primitive inférée, la hiérarchie du mouvement, le résultat de mouvement réduit, le comportement d'accessibilité, la stratégie de performance et toute limite de preuve.

Barre de qualité

La tâche est terminée uniquement lorsque :

• La primitive choisie explique le changement d'état plus clairement qu'une transition plus simple ne le ferait.
• L'identité de l'objet, la direction, la réponse, l'interruption, la stabilisation et le repos sont cohérents.
• Les états de mouvement complet et de mouvement réduit préservent le même contenu et le même résultat de tâche.
• Le comportement du pointeur, du toucher, du clavier et du focus ont des chemins utilisables équivalents, le cas échéant.
• Le mouvement à haute fréquence évite les mesures de mise en page répétées et les états mis en file d'attente obsolètes.
• Les résultats de la révision citent des états d'interface, du code ou un comportement observable concrets.
• Le travail d'implémentation suit les conventions du projet et inclut une validation proportionnée.

Cas particuliers

• Si le projet n'utilise pas GSAP, préserver sa pile existante sauf si l'utilisateur demande d'ajouter GSAP ; exprimer les mêmes principes avec les API de la plateforme disponibles ou fournir un plan.
• Si les médias de référence ne sont pas disponibles, utiliser le catalogue de motifs fourni et divulguer qu'aucune comparaison spécifique au clip n'a été effectuée.
• Si plusieurs changements d'état nécessitent des primitives différentes, choisir une primitive principale par changement d'état et conserver un timing et des règles physiques cohérents.
• Si l'animation échoue ou si JavaScript n'est pas disponible, le contenu et les contrôles essentiels doivent rester utilisables.
• Si un élément sticky ou appartenant au défilement doit sembler se transformer, animer une couche de scène interne au lieu du propriétaire sticky.
• Si un concept entre en conflit avec les exigences de mouvement réduit, de clavier ou d'accès au contenu, préserver le résultat de la tâche et la relation d'état tout en simplifiant la chorégraphie.

Compétences associées

• motion-behavior-planner pour un plan de mouvement indépendant de la bibliothèque sans implémentation.
• motion-experience-director pour un système de mouvement plus large à l'échelle du site.
• motion-animation-accessibility-audit pour un audit complet de l'accessibilité du mouvement.
• creative-technologist pour une planification plus large de la faisabilité frontale et de l'amélioration progressive.