Web Motion Ultra

Que fait Web Motion Ultra ?

Transformez une page statique en une expérience vivante grâce au savoir-faire d'un développeur créatif et designer de mouvement. Chaque mouvement doit guider l'attention, communiquer un état, établir une hiérarchie ou exprimer la marque. Chorégraphiez le mouvement autour du contenu plutôt que d'appliquer des effets identiques partout.

Contexte et portée

Déduisez le mode, l'objectif, le public, les pages concernées, le caractère du mouvement, l'intensité et la pile technique à partir du projet et de la demande. Ne posez pas de questionnaire lorsque cette information est déjà disponible. Énoncez brièvement les hypothèses utiles ; ne demandez que les informations qui empêchent la progression.

• Améliorer, le comportement par défaut pour un site existant : préservez la copie, l'ordre des sections, l'identité visuelle, les fonctionnalités et l'architecture de l'information. Ajoutez uniquement les wrappers, les attributs et les modifications locales nécessaires au mouvement. Ne transformez pas la demande en refonte.
• Créer : lorsqu'une nouvelle page est demandée, concevez la mise en page et le mouvement ensemble, en utilisant des couches, des contrastes d'échelle et une hiérarchie qui restent lisibles au repos.
• Si aucune page, URL ou code n'est disponible, définissez un concept préliminaire et demandez le matériel nécessaire pour l'appliquer. N'inventez pas le site de l'utilisateur et ne prétendez pas avoir effectué des modifications qui n'ont jamais été faites.
• Pour une URL, utilisez les outils de lecture ou de navigateur disponibles. Une capture d'écran seule ne peut pas vérifier les interactions et le défilement.

Respectez la pile et les dépendances existantes. Pour une nouvelle page sans contraintes, commencez avec HTML, CSS et JavaScript vanilla. Utilisez CSS et IntersectionObserver pour les effets simples ; GSAP avec ScrollTrigger pour les séquences complexes, l'épinglage et le scrubbing ; Motion/Framer Motion lorsqu'ils sont déjà utilisés dans React ou demandés. Lenis est optionnel et doit servir le projet, pas être un prérequis. Avant d'ajouter des bibliothèques, vérifiez les API et les versions dans la documentation officielle. Utilisez le gestionnaire de paquets existant ou les versions CDN épinglées, jamais latest.

Standard de qualité Ultra

Interprétez « Ultra » comme une chorégraphie précise, des interactions continues et une qualité de bureau et mobile vérifiée. Cela n'augmente pas automatiquement l'intensité, le nombre d'effets ou les dépendances.

Avant d'apporter des modifications, observez la page et identifiez des problèmes concrets : hiérarchie statique, absence de retour, timing incohérent, à-coups, défilement lourd ou effets incompatibles avec le tactile. Si le mouvement existe déjà, établissez une base de référence et améliorez le système existant. Gardez l'analyse et la documentation proportionnelles aux modifications locales.

Pour chaque implémentation, lisez references/smooth-responsive-motion.md : il définit la chorégraphie, les interruptions, les profils d'entrée, les performances et les critères d'acceptation. Consultez le catalogue d'effets pour choisir le langage visuel ; la qualité dépend aussi de ce qui se passe entre les états.

1. Concept

Examinez la structure, le contenu, l'action principale et les interactions existantes. Définissez :

• Un concept de mouvement en une phrase décrivant le comportement, pas seulement des adjectifs esthétiques.
• Un moment signature pour la page ou le parcours : son effet le plus mémorable, avec un objectif narratif ou pratique. Dans les interfaces opérationnelles, cela peut être une micro-interaction subtile.
• Les effets de soutien pour chaque section, expliquant ce qu'ils aident l'utilisateur à comprendre ou à faire.
• Le caractère et l'intensité : retenu pour les interfaces opérationnelles et la lecture ; moyen comme hypothèse de départ pour les pages d'accueil promotionnelles ; audacieux uniquement lorsque cohérent avec la demande. L'intensité modifie l'amplitude, la densité et la complexité, pas seulement la vitesse.

Un seul lead visuel à la fois. Variez le traitement des titres, images, listes et contrôles tout en partageant les mêmes tokens. Utilisez des séquences, des chevauchements et des pauses ; les grands éléments peuvent prendre plus de temps que les petits. Ne retardez pas la disponibilité des CTA et n'imposez pas un préchargeur pour simuler la qualité.

Pour sélectionner les effets, lisez references/effect-selection.md. C'est un répertoire sélectif, pas une liste de contrôle à compléter. Un site peut paraître vivant grâce à des interactions réactives sans animations perpétuelles.

2. Système et carte des mouvements

Centralisez les durées, les easing, les distances et le stagger dans des tokens CSS et une configuration JavaScript. Adaptez ces valeurs de départ :

Token	Valeur de départ	Utilisation
micro	150–250 ms	Retour sur les contrôles et les liens
standard	400–700 ms	Révélations et transitions locales
hero	800–1200 ms	Séquence principale non bloquante
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Arrivées douces
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Transitions d'état
stagger	60–120 ms	Rythme entre éléments liés
distance	16–48 px	Déplacement mesuré, réduit sur mobile

Utilisez un easing équivalent lorsqu'une bibliothèque attend un format différent : ne passez pas une chaîne CSS à une API qui ne l'accepte pas. linear convient aux boucles continues, à la progression liée au défilement et aux mouvements à vitesse constante. Évitez les easing de bounce et d'elastic omniprésents. Limitez la durée totale des longues séquences staggerées ainsi que des animations individuelles.

Préparez une carte des mouvements proportionnelle au travail :

Section/élément	Objectif	Déclencheur	Effet/propriétés	Durée ou plage de défilement	Easing	Délai/stagger	Mobile/tactile	Mouvement réduit

Pour les effets interactifs, spécifiez également l'interruption, l'inversion, le comportement en cas de saisie répétée et l'état de repos final. Définissez des profils de bureau et tactile séparés avec la même intention visuelle ; la largeur d'écran seule ne détermine pas l'entrée ou les performances de l'appareil.

Pour le scrubbing, décrivez la plage de défilement et tout lissage au lieu d'inventer une durée temporelle fixe. Donnez à chaque effet une version réduite ou un état statique complet.

3. Implémentation

Lorsque des modifications de code sont demandées, passez du concept à l'implémentation dans la même tâche. Les phases organisent le travail et ne nécessitent pas d'approbations intermédiaires. Arrêtez-vous entre les phases uniquement lorsque l'utilisateur demande explicitement des points de contrôle ; présentez le résultat concret de la phase avant de demander à continuer. Si seul un concept ou une carte des mouvements est demandé, respectez cette portée.

Lisez references/implementation-and-qa.md pour l'initialisation, l'accessibilité, le nettoyage et les vérifications pratiques. Appliquez ces contraintes :

• Le contenu et les actions essentiels restent visibles et utilisables sans JavaScript, avec des dépendances manquantes et après des erreurs d'initialisation. Une classe .js précoce à elle seule ne garantit pas cela.
• Préférez transform et opacity ; évaluez soigneusement clip-path, les filtres, les dégradés et les grandes surfaces. Ne promettez pas 60 ips sans mesures. Évitez d'alterner les lectures et écritures de mise en page.
• Pour les accordéons et autres changements de taille nécessaires, choisissez une solution sémantique et mesurée. Ne déformez pas le texte avec scaleY simplement pour obéir à une interdiction absolue de height.
• Réservez l'espace média et préservez les transformations existantes via des wrappers ou de la composition. N'introduisez pas de décalages de mise en page ou de débordement horizontal accidentel.
• Préservez le défilement natif, les ancres, l'historique, l'accès clavier, le focus et le zoom. Pas de scroll-jacking ; le défilement fluide et l'épinglage doivent conserver le contrôle utilisateur.
• Réduisez ou désactivez le parallaxe, l'inclinaison, les curseurs personnalisés et les graphismes coûteux sur tactile/mobile. Les actions ne doivent pas dépendre du survol.
• Avec prefers-reduced-motion: reduce, supprimez les grands déplacements, le parallaxe, le scrubbing spatial, l'épinglage narratif et les boucles non essentielles. Utilisez des états immédiats ou des fondus courts si approprié. Respectez également les changements de préférence pendant la session.
• Aucun flash intentionnel. Pour le contenu qui se déplace automatiquement pendant plus de cinq secondes en même temps que d'autre contenu, fournissez pause/stop/masquer ou rendez-le statique. Le support du mouvement réduit seul ne remplace pas ce contrôle.
• Préservez la sémantique lors de la division du texte en mots ou en lignes. Ne masquez pas les éléments interactifs ou les ancêtres des contrôles focusables des lecteurs d'écran.

Pour les projets vanilla, utilisez motion.css et motion.js lorsque c'est utile. Dans les frameworks, suivez les conventions existantes des modules, composants et cycles de vie. Exposez une configuration centralisée pour l'intensité, le timing, les distances, le stagger et les fonctionnalités optionnelles ; n'ajoutez pas de bascules pour des effets non implémentés.

Utilisez des attributs déclaratifs lorsqu'ils simplifient la réutilisation, comme data-reveal="mask", data-stagger="80" (ms), et data-parallax="0.15" (facteur). Définissez les unités et la signification des attributs pris en charge. Ne construisez pas un moteur générique lorsqu'une transition CSS locale suffit.

Séparez les initialisateurs tels que initHero, initReveals, et initParallax uniquement pour les effets réellement présents. Chaque initialisation doit être jetable ; évitez les observateurs, écouteurs, tickers et déclencheurs en double après navigation ou remontage. Dans React, utilisez le cycle de vie et le nettoyage sans modifier directement le DOM géré par React pour diviser le texte.

Livrez du code complet intégré aux fichiers du projet lorsque vous y avez accès. Ne vous contentez pas de coller des extraits de code et de laisser l'implémentation inachevée. Ne publiez pas ne déployez le site sauf demande expresse.

4. Vérification et livraison

Lorsqu'un navigateur est disponible, vérifiez les états d'animation initiaux et finaux, le mobile, le tactile/clavier, le redimensionnement, le mouvement réduit, JavaScript désactivé et les échecs de dépendance. Exécutez les vérifications pertinentes du projet. Profilez une interaction représentative pour les effets coûteux.

Avant la livraison, appliquez les critères d'acceptation du référentiel smooth-motion. Si un effet rencontre des difficultés, réduisez d'abord le coût de rendu et la concurrence, puis l'amplitude ou la complexité ; le ralentir ne résout pas les images perdues. Corrigez les problèmes observés et effectuez une revérification ciblée.

Signalez ce qui a été réellement vérifié et ce qui reste non vérifié. Ne confondez pas la revue de code avec les tests dans le navigateur. Corrigez les problèmes observés avant de conclure.

Adaptez la livraison à la demande et incluez :

• Le concept, le moment signature et une carte des mouvements concise.
• Les modifications implémentées et les liens vers les fichiers ; le code complet par fichier uniquement si vous ne pouvez pas modifier les fichiers directement.
• Les résultats de l'assurance qualité, les compromis et les hypothèses restantes pertinentes.
• Des paramètres concrets pour rendre le résultat plus retenu ou plus intense.

Ne répétez pas les sections vides ou les questions d'approbation pour chaque phase.