Direction Aware Hover

Un fond coloré balaie l’élément depuis un bord au survol.

Ajoute un effet au survol « Background Sweep » (aussi appelé background fill ou slide fill) sur [où].
Une nouvelle couleur de fond doit balayer l’élément du bord gauche vers le bord droit, de façon fluide et rapide, sans rebond, puis se retirer de la même manière quand le pointeur sort, pendant que la couleur du texte change pour rester lisible.
Garde le remplissage découpé dans la forme de l’élément et applique le même effet au focus clavier.

Au survol, le libellé du bouton glisse vers l’extérieur tandis qu’une flèche et un remplissage s’étendent.

Ajoute un effet « Interactive Hover Button » sur [où].
Le petit point à côté du libellé doit s’agrandir jusqu’à remplir le bouton pendant que le libellé glisse sur le côté et s’efface, puis le libellé accompagné d’une flèche glisse par-dessus le nouveau remplissage : fluide et rapide.
Garde la taille du bouton fixe et le libellé lisible du début à la fin, et affiche le même effet au focus clavier.

Les icônes d’une rangée grossissent en douceur à l’approche du pointeur, comme le Dock de macOS.

Ajoute un effet « Dock Magnification » (aussi appelé dock) sur [où].
Les icônes de la rangée doivent grossir en douceur à mesure que le pointeur s’approche, la plus proche étant la plus grande et ses voisines légèrement agrandies, puis toutes reprendre leur taille normale quand le pointeur s’en va.
Fais grossir les icônes vers le haut à partir d’une ligne de base fixe et garde chaque icône utilisable à sa taille normale au toucher et au clavier.

L’élément s’élève de quelques pixels au survol, comme s’il flottait.

Ajoute un effet au survol « Float » (aussi appelé lift ou raise) sur [où].
L’élément doit s’élever un peu et rester surélevé tant que le pointeur est dessus, puis redescendre quand il sort : fluide et doux, sans rebond.
Déplace-le seulement visuellement sans décaler la mise en page autour et applique le même effet au focus clavier.

Les cartes voisines deviennent floues et s’assombrissent tandis que la carte survolée reste nette.

Ajoute un effet « Focus Cards » (aussi appelé blur siblings on hover, hover focus blur ou card hover effect) sur [où].
Tant que le pointeur survole une carte, les autres doivent devenir floues, s’assombrir et rétrécir légèrement tandis que la carte survolée reste nette, le tout avec un fondu doux qui s’inverse quand le pointeur sort.
Applique la même mise en avant au focus clavier et garde toutes les cartes nettes et lisibles quand rien n’est survolé.