nusakutnjak/motion-feels

Sensations de mouvement (Motion Feels)

La plupart des gens ne peuvent pas nommer une courbe d'assouplissement, mais ils savent exactement comment ils veulent que quelque chose se sente : calme, percutant, onéreux, ludique. Ces mots correspondent à des douzaines de courbes, donc une IA devine, et le travail se transforme en cycles de « trop rapide », « moins rebondissant ». Cette compétence donne à la personne et à vous un ensemble partagé de noms, chacun lié à des valeurs exactes. Eux parlent en sensations ; vous gérez les chiffres.

C'est écrit pour les sites web : marketing, portfolio, contenu et boutiques en ligne. Pour l'interface d'une application ou d'un produit, les mêmes sensations fonctionnent ; utilisez l'extrémité rapide de chaque vitesse.

Trois parties :

• Sensation : comment ça bouge. Une vitesse plus une courbe d'assouplissement. Les 14 sensations sont ci-dessous.
• Effet : ce qui bouge. Révélation par masque, parallaxe, marquise, etc. Voir references/feels.md.
• Boutons de réglage ajustent une sensation : vitesse, arrêt, dépassement, décalage, distance, délai, déclencheur, intensité.

Parlez en sensations, pas en courbes

La personne peut ne connaître aucun terme de mouvement, et ce n'est pas une obligation.

• Ne leur demandez jamais de choisir un assouplissement, une courbe, une bezier ou un nombre de millisecondes. Interrogez sur la sensation, avec une image de la vie quotidienne : « Doit-il atterrir en douceur, comme poser un verre, ou dépasser un peu puis se stabiliser, comme un ressort ? »
• Décrivez les sensations par leur apparence, pas par leur fabrication : « commence vite et glisse jusqu'à l'arrêt », pas « power4.out ».
• Les noms des sensations sont un raccourci facultatif. Mentionnez-en un en passant (« J'appellerai cette sensation Luxueux ») pour qu'ils puissent le réutiliser. Ne l'exigez jamais, et ne corrigez jamais leurs mots.
• Les chiffres vont dans le code, plus une courte ligne pour celui qui construit ou révise : « Pour les développeurs : 1,2 s, cubic-bezier(0.22, 1, 0.36, 1). » Omettez cette ligne quand personne ne construira à partir de cela, par exemple quand la personne ne fait que choisir une direction.
• Les mots de ce fichier sont pour vous, pas pour eux. Les noms de boutons de réglage et les termes CSS restent hors de vos réponses. Dites « le petit rebond à la fin » (dépassement), « l'un après l'autre » (décalage), « la distance parcourue » (distance), « la douceur de l'arrêt » (arrêt), « ce qui bouge en même temps » (intensité), « d'où ça vient » (origine), « pour les personnes qui désactivent les animations » (mouvement réduit).
• Une ligne de traduction, puis construisez. Ne donnez pas de cours, et ne retenez pas le travail. La seule exception est un mot que les tableaux ci-dessous marquent « demander », où une question simple vient en premier.
• Voir bat décrire. Quand ils ne peuvent pas mettre en mots, proposez la page de démonstration (assets/feels-demo.html, ouvrez-la dans n'importe quel navigateur) ou construisez une bascule A/B rapide et laissez-les choisir.

Les 14 sensations

Sensation	Apparence	Vitesse	CSS	GSAP
Crisp (Sec)	un interrupteur : arrêt instantané et net	150 ms	cubic-bezier(0.33, 1, 0.68, 1)	power2.out
Snappy (Vif)	jaillit et atterrit fermement	300 ms	cubic-bezier(0.16, 1, 0.3, 1)	expo.out
Springy (Élastique)	rapide, un petit dépassement, puis se stabilise	600 ms	ressort, rebond 0.3 (linear() en CSS)	pas de ressort ; le plus proche back.out(1.2)
Smooth (Lisse)	une porte coulissante : début doux, arrêt doux	500 ms	cubic-bezier(0.65, 0, 0.35, 1)	power2.inOut
Gentle (Doux)	arrive en flottant et s'estompe jusqu'à l'arrêt	700 ms	cubic-bezier(0.61, 1, 0.88, 1)	sine.out
Luxurious (Luxueux)	démarrage rapide, long glissement lent jusqu'au repos	1,2 s	cubic-bezier(0.22, 1, 0.36, 1)	power4.out
Floaty (Flottant)	une plume : lent et régulier, pas de début ou de fin clair	2 s	cubic-bezier(0.37, 0, 0.63, 1)	sine.inOut
Dramatic (Dramatique)	un rideau de théâtre : monte, se précipite, se stabilise	1,2 s	cubic-bezier(0.87, 0, 0.13, 1)	expo.inOut
Wind-up (À ressort)	un lance-pierre : recule d'abord, dépasse la fin	800 ms	cubic-bezier(0.68, -0.6, 0.32, 1.6)	back.inOut(1.7)
Pop (Éclat)	saute par-dessus la fin et revient une fois	450 ms	cubic-bezier(0.34, 1.56, 0.64, 1)	back.out(1.7)
Elastic (Élastique)	gelée : vacille plusieurs fois, puis se stabilise	1 s	linear() de elastic.out	elastic.out(1, 0.3)
Bounce (Rebond)	une balle qui atterrit	900 ms	linear() de bounce.out	bounce.out
Mechanical (Mécanique)	un tapis roulant : vitesse constante tout du long	1 s	linear	none
Stepped (Par paliers)	un flipbook : saute image par image	900 ms	steps(6)	steps(6)

Une sensation conserve sa courbe à n'importe quelle vitesse : « Springy à 400 ms » est la forme Springy, juste plus rapide. Les ressorts, l'élasticité et le rebond en CSS pur sont une liste linear() échantillonnée à partir de la courbe ; les valeurs prêtes à coller sont dans references/feels.md (« Code prêt à coller »). Le « rebond » du ressort est la valeur 0–1 utilisée par SwiftUI et Motion (ratio d'amortissement = 1 − rebond).

Comment travailler

1. Vérifiez d'abord l'élément : à quelle fréquence il est vu, et s'il s'agit d'une partie d'interface ou d'un mouvement de vitrine (« Avant de choisir une sensation » ci-dessous). Cela peut signifier moins de mouvement, ou pas du tout.
2. Traduisez leurs mots en sensation + boutons de réglage + effet, en utilisant les tableaux sous « Mots du quotidien » ci-dessous. Si deux ou trois sensations correspondent, posez une question simple (ou montrez une bascule A/B).
3. Dites le plan en une ligne simple avant de construire, par ex. « Les lignes de titre glissent vers le haut et se stabilisent lentement à mesure que vous défilez vers elles, une fois (sensation : Luxueux). » Ils peuvent rediriger avant que quoi que ce soit ne soit construit.
4. Construisez avec la durée, le délai et l'assouplissement dans des variables CSS ou un objet de configuration (--motion-dur, --motion-ease, --motion-stagger), de sorte que chaque ajustement soit un changement d'un seul nombre. Suivez les « Règles de construction ».
5. Rapportez en mots simples, avec les valeurs pour les développeurs. Pour un changement, montrez l'avant → l'après : « un peu plus lent : 1,2 s → 1,8 s ». Gardez les valeurs précédentes, pour que « revenir en arrière » les restaure exactement.
6. Restez cohérent : une fois que les sensations du site sont claires, suggérez de les enregistrer comme sa palette de mouvement (ci-dessous) dans les jetons de conception du projet, afin que chaque section bouge de la même manière.

Une palette de mouvement pour tout le site

Un bon site utilise 2 ou 3 sensations, pas 14 : une pour les parties d'interface, une pour les moments de vitrine, et peut-être une accentuation. Quand quelqu'un ne peut pas du tout décrire le mouvement, demandez la marque en trois mots et proposez une palette en une ligne.

La marque ressemble à	Vitrine	Interface	Accentuation
calme, digne de confiance, attentionné (santé, finance, droit)	Doux	Sec	—
premium, éditorial (mode, architecture, hôtels)	Luxueux	Sec	Dramatique pour le premier chargement
audacieux, rapide, technique (startups, SaaS, sport)	Vif	Sec	Éclat
amical, ludique (enfants, alimentation, applis grand public)	Élastique	Vif	Éclat ou Rebond
créatif, expressif (studios, portfolios, agences)	Luxueux ou Dramatique	Vif	À ressort
rêveur, naturel (bien-être, beauté, méditation)	Flottant pour les boucles, Doux pour le contenu	Sec	—
rétro, brut (jeux, musique, brutaliste)	Par paliers	Sec	Marquises mécaniques

Avant de choisir une sensation

À quelle fréquence est-elle vue ?

Un mouvement qui ravit une fois devient gênant à la dixième fois. Adaptez la quantité de mouvement à la fréquence à laquelle un visiteur rencontre l'élément.

Fréquence	Exemples	Mouvement
Sur chaque page, chaque visite	liens de navigation, en-tête, boutons, liens de pied de page, champs de formulaire	petit et rapide : Sec, ou seulement un changement de couleur. Le focus clavier montre l'anneau de focus immédiatement, sans mouvement. Une entrée sur ceux-ci (une navigation qui glisse au chargement) ne se joue que lors de la première vue de page.
À chaque clic	transitions de page	court : 600 ms ou moins, même lorsque la marque est lente et premium
Une fois par page	héros, révélations de sections, cartes d'études de cas, compteurs de statistiques	la sensation complète. Les révélations au défilement ne se jouent qu'une fois, pas à chaque fois que vous remontez.
Une fois par visite	chargeur d'introduction, moment héros du premier chargement	place pour le Dramatique et le ravissement. Exécutez les chargeurs uniquement lors de la première vue de page.

L'accentuation de la palette va sur le résultat, pas sur le contrôle : une pression sur « ajouter au panier » reste rapide (Sec), et c'est le compteur du panier qui éclate.

Quand quelqu'un demande une sensation lente sur un élément de chaque page, construisez la version rapide et dites en une ligne comment basculer : « Les liens de navigation sont sur chaque page, donc je les ai gardés rapides ; la version lente est un échange d'un seul nombre. » N'attendez pas de réponse ; c'est leur décision.

Partie d'interface ou vitrine ?

• Parties d'interface : le visiteur essaie de faire quelque chose. Menus déroulants de navigation, menu mobile, onglets, accordéons, modales, infobulles, retours de formulaire, filtres. Gardez-les à 300 ms ou moins, quelle que soit la sensation ; les menus mobiles et les modales peuvent aller jusqu'à 400 ms. Les sorties s'exécutent à environ 75 % de l'entrée : mettez la durée la plus courte sur l'état fermé.
• Mouvement de vitrine : donne le ton. Héros, révélations de sections, révélations d'images, marquises, boucles d'arrière-plan, le moment du premier chargement. La vitesse propre de la sensation s'applique, et les longues durées sont acceptables.

Valeurs par défaut selon l'élément (quand aucune sensation n'est donnée)

La vitesse ici remplace la vitesse propre de la sensation. Tout retour (« a l'air bon marché », « trop rebondissant ») remplace ces valeurs par défaut.

Élément	Sensation	Vitesse
boutons, liens, bascules, survols, infobulles	Sec	150 ms
menus déroulants de navigation, onglets, survols de cartes	Vif	250 ms
accordéons, FAQ	Lisse	300 ms
menu mobile, modales, tiroirs, panneaux latéraux	Élastique	400 ms
glisser-déposer	Élastique	600 ms
diapositives, carrousels, éléments se déplaçant sur l'écran	Lisse	500 ms
révélations de texte et d'image (fondu en fondu de 24 px, décalage de 60 à 80 ms)	la sensation de vitrine de la palette ; sans indication, Vif	la sienne propre
transitions de page	Lisse	600 ms
moment héros, premier chargement	Dramatique	1,2 s
boucles d'arrière-plan, formes ambiantes	Flottant	2 s
états de succès, badges	Éclat	450 ms
chargeurs, marquises, mouvement piloté par le défilement	Mécanique	selon le besoin

Mots du quotidien

Utilisez-les pour traduire. La colonne de gauche est ce que les gens disent réellement ; rien de tout cela n'a besoin de connaissances en mouvement. Dans une conversation plus longue, montrez chaque traduction une fois, puis appliquez-la silencieusement.

Mots → sensations

Ils disent	Lire comme	Demander quand
premium, cher, élégant, classe, haut de gamme, luxe, « comme un magazine », « lent et assuré »	Luxueux	—
lisse, fluide, onctueux, homogène, soyeux, « glisse »	Lisse (se déplaçant) ou Doux (apparaissant)	l'élément ne le rend pas évident : « Glisse uniformément du début à la fin, ou arrive en douceur et s'estompe jusqu'à l'arrêt ? »
doux, calme, détendu, tranquille, confortable, chaleureux, « pas tape-à-l'œil »	Doux	—
subtil, à peine perceptible, « ne veulent pas que les gens le remarquent »	Sec (interface) ou Doux (contenu)	—
rêveur, aérien, flottant, apesanteur, « comme une plume », « comme sous l'eau »	Flottant	—
rapide, vif, réactif, instantané, cliquable, serré, « comme un interrupteur »	Sec (petites choses) ou Vif (choses plus grandes)	la taille n'est pas claire
percutant, énergique, audacieux, confiant, fort, « atterrit fort », « avec de l'attitude »	Vif	—
naturel, physique, vivant, « comme une application téléphonique », « comme un objet réel »	Élastique	—
amusant, ludique, mignon, convivial, espiègle, joyeux	Éclat, Élastique ou Élastique	presque toujours : « Un petit saut par-dessus la fin, un léger rebond élastique, ou une oscillation gélatineuse ? »
rebondissant	Rebond (atterrit et rebondit) ou Éclat / Élastique (dépasse, se stabilise)	toujours : « Rebondit comme une balle qui atterrit, ou dépasse un peu puis se stabilise ? »
gélatineux, vacillant, caoutchouteux, spongieux, tremblotant	Élastique	—
cinématographique, épique, « comme un film », puissant, lourd, « un moment waouh », grande révélation	Dramatique	—
cartoon, « remonte d'abord », « comme un lance-pierre »	À ressort	—
robotique, constant, régulier, « comme un tapis roulant », bande défilante	Mécanique	—
rétro, saccadé, stop-motion, pixel, glitch, « comme un vieux jeu vidéo », flipbook	Par paliers	—
moderne, cool, joli, propre, « fais-le ressortir », « rends-le beau », « ajoute un peu d'animation », « donne-lui vie »	rien en soi	toujours : proposez les 3 sensations qui correspondent au contexte en mots simples, ou demandez la marque en trois mots (« fais-le ressortir » peut signifier la sensation Éclat, ou juste « plus visible »)

Retour → boutons de réglage

Ils disent	Changement
trop rapide, précipité, « tu clignes des yeux et tu l'as manqué », « je ne peux pas le voir »	Vitesse × 1,5
trop lent, lent, molasson, « prend une éternité », « je l'attends »	Vitesse ÷ 1,5. Sur une partie d'interface, vérifiez également la limite de 300 ms.
brusque, rude, saccadé, « claque en place », « s'arrête trop brusquement »	Arrêt : plus doux, un pas le long de power2.out → power3.out → power4.out → expo.out (valeurs CSS dans references/feels.md)
mollasson, « traîne à la fin », « rampe », « met trop de temps à se stabiliser »	Arrêt : plus ferme (queue plus courte), ou plus rapide
faible, sans vie, « a besoin de plus de punch », « n'atterrit pas »	Arrêt plus ferme + Vitesse ÷ 1,5, ou passez à Vif
trop rebondissant, « trop », ringard, enfantin, « exagéré »	Dépassement d'un cran vers le bas : Éclat cubic-bezier(0.34, 1.56, 0.64, 1) → un peu cubic-bezier(0.34, 1.4, 0.64, 1) → aucun (Vif)
a l'air bon marché	généralement trop de mouvement : Distance vers le bas et Dépassement vers le bas ; si c'est lent, Vitesse ÷ 1,5
saccadé, tremblant, « apparaît de nulle part »	il part de rien ou dépasse : commencez à scale(0.95) (Règles de construction), Dépassement vers le bas d'un cran, Distance vers le bas
rigide, robotique, mort, « a besoin de plus de vie »	Dépassement vers le haut d'un cran, ou passez à Élastique
plat, ennuyeux, « rien ne se passe », « je ne le remarque pas »	Décalage vers le haut, ou Distance vers le haut
chargé, distrayant, « trop de choses en même temps », agaçant	Intensité vers le bas, Décalage vers le bas. Agaçant signifie souvent qu'il est vu trop souvent : vérifiez « À quelle fréquence est-elle vue ? »
« me donne le vertige », « me donne la nausée »	supprimez la parallaxe, les grands changements d'échelle et les mouvements de longue distance ; vérifiez le repli de mouvement réduit
commence trop tard / trop tôt	Délai vers le bas / haut par pas de 100 ms
semble bizarre, « pas tout à fait », « je ne sais pas ce qui ne va pas »	ne devinez pas : demandez « Est-ce la vitesse, la façon dont ça commence, la façon dont ça s'arrête, ou le petit rebond à la fin ? », ou montrez deux versions côte à côte

Règles de construction

• Déplacez avec transform, fondez avec opacity. N'animez pas width, height, top, left ou margin ; ils saccadent pendant le défilement. Pour les accordéons, grid-template-rows: 0fr → 1fr est l'exception acceptée (le contenu se trouve dans un wrapper interne avec min-height: 0; overflow: hidden). Jamais transition: all ; nommez les propriétés.
• Ne partez jamais de rien. Commencez les zooms avant à scale(0.95) avec opacity: 0 (0,9 pour les éclats plus importants), jamais scale(0).
• Zoomez depuis l'endroit où il apparaît. Utilisez transform-origin pour le point de départ réel : le centre du bouton pour les badges, le bord inférieur de l'image pour une carte qui se déplie, la souris ou le doigt pour ce qui apparaît à partir d'un clic ou d'un tap. Pour un tableau, transform: scale(1), pas deux valeurs distinctes.
• Le délai augmente progressivement. Le décalage est de 60 ms entre les éléments, jusqu'à 100 ms pour un défilement luxueux. Plus de 200 ms et les premiers sont déjà terminés quand les derniers commencent. Gardez la fin d'une séquence décalée en dessous de 2 s.
• Ajustez la vitesse de défilement. scroll-timeline: --show; animation-timeline: --show entre dans la règle @supports (animation-timeline: scroll()). Aucune réponse sur l'axe, sauf lorsque le défilement pilote le mouvement ; IntersectionObserver pour le reste.
• Sans JS, pas de mouvement. Le CSS @media (prefers-reduced-motion: no-preference) dans une règle @layer ; à l'extérieur, pas d'animation (laissez opacity à 1 en dehors de la règle). Le JS matchMedia('(prefers-reduced-motion: reduce)') désactive les animations et les observateurs ; will-change n'est pas défini. Le déclenchement d'entrée avec JS vérifie la même chose en premier.
• Pour les personnes qui désactivent les animations (accessibilité) : offrez prefers-reduced-motion: reduce comme un interrupteur dans l'interface, pas seulement comme une préférence système. `aria-hidden=