Fondations

Motion

Le mouvement sert à comprendre ce qui vient de se passer — jamais à décorer. Court, discret, et coupé quand la personne a demandé moins d’animations.

Essayer

Survole (ou tabule sur) chaque carte : même déplacement, durée et courbe différentes.

150 ms · ease
--aub-transition

200 ms · sortie franche

340 ms · léger ressort

900 ms · trop lent ✗

Durées et courbes

Valeur	Où	Usage
`--aub-transition: 150ms ease`	tokens.css	Survol, focus, couleurs, bordures : le défaut partout.
140–160 ms	dialog.js	Apparition du fond puis de la lightbox (fondu + 8 px vers le haut).
150 ms	aubui.full.css	Ouverture des menus déroulants (`aub-dropdown-in`).
180–200 ms	dialog.js · aubui.full.css	Entrée/sortie des toasts, tiroir mobile.
`--hub-ease` `cubic-bezier(.22,1,.36,1)`	Hub (polish.css)	Sorties franches : cartes, boutons, éléments ajoutés.
`--hub-spring` `cubic-bezier(.34,1.56,.64,1)`	Hub	Petit ressort : coche, état vide qui apparaît.
`--hub-dur-fast/--hub-dur/--hub-dur-slow`	Hub	120 / 200 / 340 ms.

Les variables --hub-* ne sont définies que sous .aub-hub. Elles ont vocation à rejoindre tokens.css sous le nom --aub-ease, --aub-dur-* ; d’ici là, n’en dépends pas hors du Hub.

Règles

Moins de 350 ms pour tout ce qui répond à un geste. Au-delà, l’interface paraît lente.
Animer transform et opacity, pas width/top : fluide même sur un vieux téléphone.
Un mouvement = une information : « ceci vient d’apparaître », « ceci part ». Pas de boucle infinie, sauf un squelette de chargement.
Survol qui soulève (−2 px) seulement pour ce qui est cliquable.

CSS

.ma-carte { transition: transform var(--aub-transition), border-color var(--aub-transition); }
@media (prefers-reduced-motion: no-preference) {
  .ma-carte:hover { transform: translateY(-2px); }
}