Trim

Au survol, un contour s’écarte de l’élément ou se resserre vers lui.

Ajoute un effet de survol « Outline Expand » sur [où].
Un contour doit partir collé au bord de l’élément et s’en écarter pour laisser un petit espace tout autour, rester ainsi pendant le survol et se refermer quand le pointeur sort : fluide et rapide.
Dessine le contour sans changer la taille de l’élément ni pousser le contenu voisin, et affiche le même effet au focus clavier.

La couleur de la bordure apparaît ou change en fondu au survol.

Ajoute un effet au survol « Border Fade » sur [où].
La bordure doit passer en fondu d’une teinte discrète à la couleur d’accent tant que le pointeur survole l’élément : subtil, sans mouvement ni changement de taille.
Garde la même épaisseur de bordure dans les deux états pour que rien ne bouge et applique le même effet au focus clavier.

Au survol, le fond plein se vide et ne laisse qu’un bouton à contour.

Ajoute un effet de survol « Hollow » (aussi appelé ghost fill) sur [où].
Le fond plein doit disparaître en fondu pour ne laisser que le contour, et la couleur du libellé doit changer pour rester lisible sur le fond vide : fluide et rapide.
Garde la même épaisseur de bordure dans les deux états pour que l’élément ne change pas de taille, et affiche le même effet au focus clavier.

Une ligne glisse depuis le bord inférieur ou supérieur jusqu’à sa place pour souligner ou surligner l’élément par le haut.

Ajoute un effet au survol « Underline Reveal » (aussi appelé overline reveal ou reveal) sur [où].
Une ligne pleine largeur doit remonter en glissant jusqu’à sa place depuis juste sous le bord inférieur tant que le pointeur est sur l’élément, puis redescendre hors de vue quand il sort : rapide et fluide.
Rogne la ligne au bord pour qu’elle apparaisse en glissant plutôt qu’en fondu ou en s’allongeant, et applique le même effet au focus clavier.

La carte se déplace et change légèrement d’échelle en réponse au mouvement du pointeur sur elle.

Ajoute un effet « Wobble Card » sur [où].
Quand le pointeur se déplace sur la carte, celle-ci doit glisser légèrement vers lui tandis que son contenu glisse légèrement dans l’autre sens avec un petit agrandissement, en suivant en douceur, puis tout revient en place quand le pointeur sort.
Garde le mouvement réduit, et désactive-le sur les appareils tactiles et si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Un fond coloré balaie l’élément depuis un bord avec un léger dépassement élastique.

Ajoute un effet au survol « Background Bounce Sweep » sur [où].
Une nouvelle couleur de fond doit balayer l’élément depuis un bord, dépasser légèrement le bord opposé avec un rebond élastique puis se stabiliser, pendant que la couleur du texte change pour rester lisible ; quand le pointeur sort, elle ressort en glissant en douceur.
Garde le texte au-dessus du remplissage et applique le même effet au focus clavier.