Underline Reveal

Au survol, un soulignement s’étend sous un lien depuis un côté ou depuis le centre.

Ajoute un effet de survol soulignement animé (Underline Draw) sur [où], aussi appelé animated underline ou hover underline animation.
Quand le pointeur survole le lien, un soulignement doit s’étendre en douceur de gauche à droite sous le texte, puis se rétracter quand le pointeur s’en va : rapide et discret.
Évite que le soulignement décale la mise en page autour et affiche le même effet au focus clavier.

Au survol, une ligne se déploie au-dessus du texte depuis la gauche, le centre ou la droite.

Ajoute un effet de survol « Overline Grow » sur [où].
Une ligne au-dessus du texte doit s’étendre du centre vers les deux côtés tant que le pointeur le survole, puis se rétracter vers le centre quand il sort : rapide et fluide.
Réserve de la place pour la ligne afin que le texte ne bouge pas, et affiche le même effet au focus clavier.

Une bande de couleur façon surligneur se trace sur une expression pour la mettre en valeur.

Ajoute un effet surligneur (Text Highlighter) sur [où], aussi appelé highlight marker ou marker underline.
Une bande de couleur façon surligneur doit glisser en douceur derrière l’expression clé, de gauche à droite, comme si quelqu’un la surlignait au feutre.
Joue-le une seule fois quand l’expression entre à l’écran au défilement, garde le texte lisible sur la bande et fais suivre correctement la bande quand l’expression passe sur deux lignes.

Un soulignement ou une pastille glisse de l’ancien onglet vers l’onglet nouvellement sélectionné.

Ajoute un « Tab Indicator Slide » (aussi appelé sliding underline ou active tab indicator) sur [où].
Quand un nouvel onglet est sélectionné, le soulignement doit glisser de l’ancien onglet vers le nouveau, rapide et en décélérant doucement, et s’étirer à la largeur du nouvel onglet si elle diffère.
Conserve une sémantique d’onglets correcte avec navigation aux flèches du clavier, et déplace l’indicateur sans glissement si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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.

La couleur du fond et celle du texte passent en fondu vers une nouvelle couleur au survol.

Ajoute un effet au survol « Background Fade » (aussi appelé color fade) sur [où].
Les couleurs du fond et du texte doivent passer en fondu vers de nouvelles couleurs tant que le pointeur survole l’élément, puis revenir quand il sort : calme, sans mouvement.
Garde un contraste suffisant entre texte et fond dans les deux états et applique le même effet au focus clavier.